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
CSSの歩き方
Search
嘉音とんと
February 12, 2025
Technology
0
43
CSSの歩き方
嘉音とんと
February 12, 2025
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
26
これまでに一番苦労したプロジェクト
kanon_tonto
0
23
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
88
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
46
Goで始めるWebsocketプログラミング
kanon_tonto
0
160
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
410
Other Decks in Technology
See All in Technology
AIエージェントデザインパターンの選び方
almondo_event
0
150
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
240
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
120
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.3k
GitHub Coding Agent 概要
kkamegawa
1
1.7k
技術書典18結果報告
mutsumix
2
180
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
やさしいClaude Code入門
minorun365
PRO
32
24k
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
継続戦闘能⼒
sansantech
PRO
0
220
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Facilitating Awesome Meetings
lara
54
6.4k
KATA
mclloyd
29
14k
The Invisible Side of Design
smashingmag
299
50k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimizing for Happiness
mojombo
378
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Transcript
CSSの歩き方
嘉音 とんと #YouTube #マリオカート #鏡音レン
CSSの レビューが難しい
None
.profile .name-and-sns .sns .profile-details
.profile .name-and-sns .sns .profile-details どこの何?
CSSレビューを 少しでもラクにする 命名規則を紹介
BEM
Block Element Modifier
サンプルコードを 添えて解説
None
Block Element Modifier
Block Element Modifier それは何を表す?
ヘッダー 認証エリア
None
Block Element Modifier
Block Element Modifier Block を構成する要素
None
アンダーバー 2 本で表現する 新規登録ボタンは login_header の中でのみ 存在が保証される
ここを表現してみる
None
None
Block Element Modifier
Block Element Modifier どういう状態?
ここを 表現してみる
None
「小さいよ」という状態を 示している
サイズ small, large 状態 disabled, focused テーマ dark, light
適用させた結果を CSS で見てみる
None
None
少し読みやすくなった気がする
若干古めの命名規則ですが 知っているだけでも CSS が読みやすくなります
おしまい