2019_09_26_LT_TableMarkup_vs_ListMarkup

Transcript

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

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

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

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

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

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

7. リストとかでがんばる
 
 <ul><li></li></ul>
 GitHub : https://github.co.jp/pricing

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

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

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

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

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

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

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

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

16. 可愛かったPricingページ
 marvel : https://marvelapp.com/pricing

17. ありがとうございました！