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

CSSの歩き方

Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
65
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
Avatar for ritou ritou
0
390
記録をかんたんに、提案をパーソナルに ── AIであすけんが目指すもの
Avatar for oprst oprstchn
0
140
フルAIで個人開発して学んだあれこれ / yuruai vol.1
Avatar for Isao Shimizu isaoshimizu
0
180
SRE Lounge Hiroshimaへの招待
Avatar for gr1m0h grimoh
0
180
きのこカンファレンス2026_肩書きを外したとき私は誰か
Avatar for yamasatimi yamasatimi
1
130
10x Speed With QA Agent Platform - How we scaled adoption from individual effort to organizational capability
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
130
そのタスクオンスケですか？
Avatar for フクイ poropinai1966
0
130
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
Avatar for Kazuki Adachi k_adachi_01
2
350
Compose 新機能総まとめ / What's New in Jetpack Compose
Avatar for Yuki Anzai yanzm
0
120
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
370
打造你的 AI 工作流：Agent Skill + MCP 實戰工作坊
Avatar for Bo-Yi Wu appleboy
0
540
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
250

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
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.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
320
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
340
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
250
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
240
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k

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