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

CSSの歩き方

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
66
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
どんな手を使っても絶対間に合わせるスケジューラ
Avatar for asari asari194617
0
1.5k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.3k
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
2
1.6k
Beyond the Hype: Practical AI for Your Oracle Database with MCP
Avatar for thatjeffsmith thatjeffsmith
1
100
アクセスキー流出時の対応で再認識した攻撃側と防御側の非対称性について
Avatar for kazzpapa3 kazzpapa3
1
510
Cloudflare製品を活用した AIガバナンス実践入門 / AI governance with Cloudflare Service
Avatar for 株式会社DELTA delta_tech
1
170
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
150
Claude Codeで開発以外の業務も爆速化しよう！
Avatar for みのるん minorun365
PRO
12
9.4k
Backstageでつくるセルフサービスな社内開発基盤
Avatar for Sakazaki Kikunosuke kikunosuke75
1
160
Claude Teamプランの コスト最適化を考える
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
860
LLMアプリ、 雰囲気で運用してませんか？ 〜LLMOpsの現在地〜
Avatar for Takaaki Yayoi taka_aki
1
650
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.9k

Featured

See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
270
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.6k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
460
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
460
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
460
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
800
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
64k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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