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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
33
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
27
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
180
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
96
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
110
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
52
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
20260516_SecJAWS_Days
Avatar for Takuya Yonezawa takuyay0ne
2
460
マンション備え付けのネットワークとLTE回線を組み合わせた ネットワークの安定化の考案
Avatar for harutiro harutiro
1
140
Swift Sequence の便利 API 再発見
Avatar for treastrain / Tanaka Ryoga treastrain
1
290
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.4k
開発サイクルのボーダーレス化に伴う組織変革から学んだこと / Organizational Transformation Amid the Borderless Development Cycle
Avatar for miisan mii3king
0
210
オライリーイベント登壇資料「鉄リサイクル・産廃業界におけるAI技術実応用のカタチ」
Avatar for Takumi Karasawa takarasawa_
0
410
20260513_生成AIを専属DSに_AI分析結果の検品テクニック_ハンズオン_交通事故データ
Avatar for NobuakiOshiro doradora09
PRO
0
230
Claude Code で使える DuckDB Skills を試してみた / DuckDB Skills and Claude Code
Avatar for MasahiroKawahara masahirokawahara
1
740
AWS運用におけるAI Agent活用術 / JAWS-UG 神戸 #11 LT大会
Avatar for GENDA genda
1
300
「強制アップデート」か「チームの自律」か？エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
0
210
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
0
440
SpeechTranscriber + AIによる文字起こし機能
Avatar for Kazuki Shirai kazuki1220
0
110

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
180
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
620
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
810
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.4k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.2k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
220
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
120
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
440
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
750
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
540

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