Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSSの歩き方

Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
69
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
44
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
41
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
200
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
100
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
120
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
63
Goで始めるWebsocketプログラミング
Avatar for 嘉音とんと kanon_tonto
0
180
AWS Lambdaでファイルをこねくり回す
Avatar for 嘉音とんと kanon_tonto
0
440
iOSアプリをリリースするまで
Avatar for 嘉音とんと kanon_tonto
2
440

Other Decks in Technology

See All in Technology
AIがGISを代替する日：〜すべてをAIが創る時代に、私たちがFOSS4Gに関わる意味〜
Avatar for Yuji Kobayashi lehupa
1
210
AIエージェントの監視、思考を見るか行動を見るか / Monitoring AI Agents: Thoughts or Actions
Avatar for Yusuke Shimizu yusukeshimizu
2
170
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
220
Maestro MCPとClaude Code Skillsによる自律的なE2Eテスト支援
Avatar for asmz asmz
0
420
DBTS2026 盛り上がってますか！？Databricksが実現するAI時代のデータ基盤
Avatar for Akihiro Kuwano akuwano
1
180
Kiro Crew の Bot (続く役目を任せる窓口) | 目指せ Kiro マスター 12
Avatar for Riku INADA inariku
PRO
2
280
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
430
Flutter Widget Previewerで始めるUIプレビューとVRTの自動化
Avatar for Aokiti sakusaku3939
0
210
TSKaigi Sendai 2026 - tsgo時代のTypeScript Playgroundはどう動くか
Avatar for teamLab teamlab
PRO
0
110
令和の今、あらためて IAM を考える。アクセスキーを「無くせない現実」との向き合い方
Avatar for kazzpapa3 kazzpapa3
0
330
"AWSはちょっと苦手"でも大丈夫。AWS Blocks で手軽に作る Flutter のバックエンド #FlutterKaigi
Avatar for Kihara, Takuya tacck
PRO
0
160
並列度を下げたら速くなった — go build の重複コンパイルを実測で見る
Avatar for Tomoaki tomoaki25
0
160

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
930
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
600
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
5
55k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
400
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
550
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k

Transcript

  1. CSSの歩き方

  2. 嘉音 とんと #YouTube #マリオカート #鏡音レン

  3. CSSの レビューが難しい

  4. None

  5. .profile .name-and-sns .sns .profile-details

  6. .profile .name-and-sns .sns .profile-details どこの何？

  7. CSSレビューを 少しでもラクにする 命名規則を紹介

  8. BEM

  9. Block Element Modifier

  10. サンプルコードを 添えて解説

  11. None

  12. Block Element Modifier

  13. Block Element Modifier それは何を表す？

  14. ヘッダー 認証エリア

  15. None

  16. Block Element Modifier

  17. Block Element Modifier Block を構成する要素

  18. None

  19. アンダーバー 2 本で表現する 新規登録ボタンは login_header の中でのみ 存在が保証される

  20. ここを表現してみる

  21. None
  22. None

  23. Block Element Modifier

  24. Block Element Modifier どういう状態？

  25. ここを 表現してみる

  26. None

  27. 「小さいよ」という状態を 示している

  28. サイズ small, large 状態　 disabled, focused テーマ dark, light

  29. 適用させた結果を CSS で見てみる

  30. None
  31. None

  32. 少し読みやすくなった気がする

  33. 若干古めの命名規則ですが 知っているだけでも CSS が読みやすくなります

  34. おしまい