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

CSSの歩き方

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
0
55

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
29
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
25
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
170
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
91
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
110
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
48
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 Copilot Migration Agent / #jazug
Avatar for Kodai Sakabe koudaiii
1
220
#23 Turing × atmaCup 2nd 6th Place Solution + 取り組み方紹介
Avatar for yumizu yumizu
0
150
Getting started with Google Antigravity
Avatar for Mete Atamel meteatamel
0
210
AWS DevOps Agent x ECS on Fargate検証 / AWS DevOps Agent x ECS on Fargate
Avatar for Masanori Yamaguchi kinunori
3
420
Exadata Fleet Update
Avatar for oracle4engineer oracle4engineer
PRO
0
1.2k
生成AIで始める業務改革 - 製造業編 in 福島 -
Avatar for Daiki Kanemitsu daikikanemitsu
2
590
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
Avatar for hiro-torii hiro_torii
0
340
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
200
Amazon Rekognitionで 「信玄餅きなこ問題」を解決する
Avatar for usanchuu usanchuu
1
400
Generative UI を試そう！A2-UIでAIエージェントにダッシュボードを作らせてみた
Avatar for Kamoshika kamoshika
1
220
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
260
バイブコーディングで作ったものを紹介
Avatar for tatsuya1970 tatsuya1970
0
150

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
190
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
120
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
120
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
260
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
460
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
700

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