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
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
15
4.9k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
12k
業務の煩悩を祓うAI活用術108選 / AI 108 Usages
Avatar for 株式会社スマートバンク smartbank
9
19k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
330
AI との良い付き合い方を僕らは誰も知らない (WSS 2026 静岡版)
Avatar for Asei Sugiyama asei
1
230
Node vs Deno vs Bun 〜推しランタイムを見つけよう〜
Avatar for すずとも kamekyame
1
220
技術選定、下から見るか？横から見るか？
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
180
Java 25に至る道
Avatar for Yuichi.Sakuraba skrb
3
150
Claude Codeを使った情報整理術
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
20
12k
自己管理型チームと個人のセルフマネジメント 〜モチベーション編〜
Avatar for KAKEHASHI kakehashi
PRO
5
1.9k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
21k
テストセンター受験、オンライン受験、どっちなんだい？
Avatar for Yuuki Yamashita yama3133
0
200

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
530
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
94
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
110
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
130
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
31k
It's Worth the Effort
Avatar for 3n 3n
187
29k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
59
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
36
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
140
Designing for Performance
Avatar for Lara Hogan lara
610
70k

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