Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2019_09_26_LT_TableMarkup_vs_ListMarkup
Search
Hiroki FUJIMOTO
September 26, 2019
Programming
0
840
2019_09_26_LT_TableMarkup_vs_ListMarkup
Hiroki FUJIMOTO
September 26, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Leading Effective Engineering Teams in the AI Era
addyosmani
7
610
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
400
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
CSC509 Lecture 06
javiergs
PRO
0
270
Devoxx BE - Local Development in the AI Era
kdubois
0
140
CSC509 Lecture 07
javiergs
PRO
0
240
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
AkarengaLT vol.38
hashimoto_kei
1
120
チームの境界をブチ抜いていけ
tokai235
0
220
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Typedesign – Prime Four
hannesfritz
42
2.8k
BBQ
matthewcrist
89
9.9k
Balancing Empowerment & Direction
lara
5
700
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Side Projects
sachag
455
43k
Transcript
ぼくがマークアップする上で いつも悩んでしまうことについて聞いてほしい 株式会社VALU 藤本大貴
よくあるこういうやつがこわい Chatwork : https://go.chatwork.com/ja/price/?click=header-navi
表っぽいデザインってどういうマークアップが理想?
最初に思いつくのは, テーブル構造 <table></table> tapple : https://tapple.me/policies/pricing/
// 表題部分を // theadに記述する // (ただ調査した感じ // <thead>使ってない人少なかった) <thead>
<tr> <th></th> </tr> </thead> // 表の内容を // tbodyに記述する <tbody> <tr> <td></td> </tr> </tbody>
- HTMLだけで表が作れる - HTMLとCSSの分担が明快 - head要素とbody要素で 分かれているので読みやすい (
htmlタグに明確な意味付けす ることが可能 ) - row要素は拡張性しやすい - 記述量が増えてしまう - <td>?<thead>?<th>? ってなる - テーブルでないと使えないテ クニック - column要素は拡張しにくい
リストとかでがんばる <ul><li></li></ul> GitHub : https://github.co.jp/pricing
<div>という箱を作って中にリストを 置くパターン 外側の”container”に, display: flex; を当てて,横に並べて比較する!
テーブルっぽくすることも可能!
- リストだけで全部できちゃうか ら楽 - CSSもFlexboxだけ使えばい いから楽 - column要素は拡張性しやす
い - CSSの記述量は増える - 変更しづらい - HTMLに明確な意味づけがで きない - row要素は拡張しにくい -> 鬼の入れ子構造になる可能 性がある
他 STORES : https://stores.jp/functions
他 Notion : https://www.notion.so/pricing
もう悩みたくないので,採用率を調査してみました
サブスクリプションモデルを採用するスタートアップを 中心に37社分の採用率を調査しました
tableを使っているサイトは多かったが, テーブルの見た目は減りつつあることがわかった 結論,僕はまるっと消したりすることもできるので, 1column毎にlist使って作ってくっつける方がいいと思う
可愛かったPricingページ VALUっぽい prott : https://prottapp.com/ja/plans/
可愛かったPricingページ marvel : https://marvelapp.com/pricing
ありがとうございました!