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
770
2019_09_26_LT_TableMarkup_vs_ListMarkup
Hiroki FUJIMOTO
September 26, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
Elm 0.19.0 Changes
bkuhlmann
0
490
Goのエラースタックトレースの歴史と今後
sonatard
7
1.1k
Netty Chicago Java User Group 2024-04-17
sullis
0
170
新宿ダンジョンを可視化してみた
satoshi7190
2
240
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
270
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
VS Code をプロダクトにどう取り込むか
onomax
1
350
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
The Language of Interfaces
destraynor
151
23k
In The Pink: A Labor of Love
frogandcode
138
21k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Writing Fast Ruby
sferik
621
60k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
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
ありがとうございました!