Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
Azure Well-Architected Framework入門
Avatar for tomokusaba tomokusaba
0
200
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
1
820
What is BigQuery?
Avatar for Aizack aizack_harks
0
120
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す：設計と活用事例
Avatar for Fumiya Sakai fumiyasac0921
0
120
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
Avatar for GMO Flatt Security flatt_security
0
320
生成AIを活用したZennの取り組み事例
Avatar for igarashi ryosukeigarashi
0
190
KMP の Swift export
Avatar for Koki Hirokawa kokihirokawa
0
310
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
100
Pythonによる契約プログラミング入門 / PyCon JP 2025
Avatar for 7pairs 7pairs
5
2.4k
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
Avatar for Hiroki Yamagishi roki18d
1
320
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
Avatar for mtskhs matsu0228
3
1.2k
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
Avatar for Ken’ichiro Oyama k1low
1
260

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
4
160
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k

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. おしまい