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
830
2019_09_26_LT_TableMarkup_vs_ListMarkup
Hiroki FUJIMOTO
September 26, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
エラーって何種類あるの?
kajitack
5
320
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
610
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
140
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
590
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
Deep Dive into ~/.claude/projects
hiragram
10
2k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Language of Interfaces
destraynor
158
25k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Code Review Best Practice
trishagee
68
18k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How GitHub (no longer) Works
holman
314
140k
Designing for humans not robots
tammielis
253
25k
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
ありがとうございました!