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

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
28
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
23
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
170
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
90
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
47
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
業務の煩悩を祓うAI活用術108選 / AI 108 Usages
Avatar for 株式会社スマートバンク smartbank
9
19k
AWS re:Invent2025最新動向まとめ（NRIグループre:Cap 2025）
Avatar for KoheiGamo gamogamo
0
150
ルネサンス開発者を育てる 1on1支援AIエージェント
Avatar for Yusuke Shimizu yusukeshimizu
0
130
「アウトプット脳からユーザー価値脳へ」がそんなに簡単にできたら苦労しない #RSGT2026
Avatar for Aki / @LoveIdahoBurger aki_iinuma
7
3.8k
Everything As Code
Avatar for わいわい yosuke_ai
0
490
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
Avatar for tomo gamella
1
610
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
340
Java 25に至る道
Avatar for Yuichi.Sakuraba skrb
3
150
ハッカソンから社内プロダクトへ AIエージェント ko☆shi 開発で学んだ4つの重要要素
Avatar for Tech Leverages leveragestech
0
560
コールドスタンバイ構成でCDは可能か
Avatar for 平目 hiramax
0
130
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
58
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
59
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
110
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Leo the Paperboy
Avatar for Maya Tellez mayatellez
1
1.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
94
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
0
25
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
180

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