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
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
290
チームの境界をブチ抜いていけ
tokai235
0
180
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
理論と実務のギャップを超える
eycjur
0
140
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Cursorハンズオン実践!
eltociear
2
1.1k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Navigating Team Friction
lara
190
15k
RailsConf 2023
tenderlove
30
1.3k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Code Reviewing Like a Champion
maltzj
526
40k
Site-Speed That Sticks
csswizardry
13
910
For a Future-Friendly Web
brad_frost
180
10k
Facilitating Awesome Meetings
lara
56
6.6k
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
ありがとうございました!