2019_09_26_LT_TableMarkup_vs_ListMarkup

by Hiroki FUJIMOTO

Slide 1

Slide 1 text

ぼくがマークアップする上で  いつも悩んでしまうことについて聞いてほしい  株式会社VALU    藤本大貴 

Slide 2

Slide 2 text

よくあるこういうやつがこわい  Chatwork : https://go.chatwork.com/ja/price/?click=header-navi 

Slide 3

Slide 3 text

表っぽいデザインってどういうマークアップが理想？   

Slide 4

Slide 4 text

最初に思いつくのは, テーブル構造      tapple : https://tapple.me/policies/pricing/ 

Slide 5

Slide 5 text

// 表題部分を  // theadに記述する  // (ただ調査した感じ  // 使ってない人少なかった)                // 表の内容を  // tbodyに記述する             

Slide 6

Slide 6 text

- HTMLだけで表が作れる    - HTMLとCSSの分担が明快    - head要素とbody要素で  分かれているので読みやすい  ( htmlタグに明確な意味付けすることが可能 )    - row要素は拡張性しやすい        - 記述量が増えてしまう    - ???  ってなる    - テーブルでないと使えないテクニック    - column要素は拡張しにくい   

Slide 7

Slide 7 text

リストとかでがんばる   

  GitHub : https://github.co.jp/pricing 

Slide 8

Slide 8 text

という箱を作って中にリストを  置くパターン    外側の”container”に，    display: flex;     を当てて，横に並べて比較する！  テーブルっぽくすることも可能！     

Slide 9

Slide 9 text

- リストだけで全部できちゃうから楽    - CSSもFlexboxだけ使えばいいから楽    - column要素は拡張性しやすい          - CSSの記述量は増える    - 変更しづらい    - HTMLに明確な意味づけができない    - row要素は拡張しにくい  -> 鬼の入れ子構造になる可能性がある 

Slide 10

Slide 10 text

他  STORES : https://stores.jp/functions 

Slide 11

Slide 11 text

他  Notion : https://www.notion.so/pricing 

Slide 12

Slide 12 text

もう悩みたくないので，採用率を調査してみました   

Slide 13

Slide 13 text

サブスクリプションモデルを採用するスタートアップを  中心に37社分の採用率を調査しました 

Slide 14

Slide 14 text

  tableを使っているサイトは多かったが，    テーブルの見た目は減りつつあることがわかった    結論，僕はまるっと消したりすることもできるので，    1column毎にlist使って作ってくっつける方がいいと思う 

Slide 15

Slide 15 text

可愛かったPricingページ　VALUっぽい  prott : https://prottapp.com/ja/plans/ 