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
AIでLINEスタンプを作ってみた
eycjur
1
230
楽して成果を出すためのセルフリソース管理
clipnote
0
190
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Kiroで始めるAI-DLC
kaonash
2
630
Rancher と Terraform
fufuhu
2
550
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
770
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
はじめてのMaterial3 Expressive
ym223
2
900
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Faster Mobile Websites
deanohume
309
31k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Facilitating Awesome Meetings
lara
55
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
What's in a price? How to price your products and services
michaelherold
246
12k
Music & Morning Musume
bryan
46
6.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Done Done
chrislema
185
16k
Designing Experiences People Love
moore
142
24k
Docker and Python
trallard
46
3.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
ありがとうございました!