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. ありがとうございました！