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
58
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
280
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
210
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
23k
みんなで作るAWS Tips 100連発 (FinOps編)
Avatar for Ai Hayakawa schwrzktz
1
300
AWS認定資格は本当に意味があるのか？
Avatar for NRI Netcom nrinetcom
PRO
2
270
自立を加速させる神器 - EMOasis #11
Avatar for スタンバイ stanby_inc
0
140
Claude Code を安全に使おう勉強会 / Claude Code Security Basics
Avatar for MasahiroKawahara masahirokawahara
11
32k
2026年、知っておくべき最新 サーバレスTips10選/serverless-10-tips
Avatar for Serverless Operations slsops
13
5.2k
プラットフォームエンジニアリングの実践 - AWS コンテナサービスで構築する社内プラットフォーム / AWS Containers Platform Meetup #1
Avatar for Masatoshi Hayashi literalice
1
140
AzureのIaC管理からログ調査まで、​随所に役立つ​SkillsとCustom-Instructions​ / Boosting IaC and Log Analysis with Skills
Avatar for AEON aeonpeople
0
230
コードや知識を組み込む / Incorporate Code and Knowledge
Avatar for Kenji Saito ks91
PRO
0
150
20年前の「OSS革命」に学ぶ AI時代の生存戦略
Avatar for Sam Akada samakada
0
420

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
270
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
180
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
300
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k

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