2019_09_26_LT_TableMarkup_vs_ListMarkup

 2019_09_26_LT_TableMarkup_vs_ListMarkup

B4888669ace17f5a30c44dfba7d10ea1?s=128

Hiroki FUJIMOTO

September 26, 2019
Tweet

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