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

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
26
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
23
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
170
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
89
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
ヘンリー会社紹介資料（エンジニア向け） / company deck for engineer
Avatar for Henry, Inc. henryofficial
0
420
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
Avatar for ymotongpoo ymotongpoo
1
550
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
Avatar for OPTiM optim
0
120
書籍『実践 Apache Iceberg』の歩き方
Avatar for Satoru Ishikawa ishikawa_satoru
0
260
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
570
What's new in OpenShift 4.20
Avatar for Red Hat Livestreaming redhatlivestreaming
0
380
もう外には出ない。より快適なフルリモート環境を目指して
Avatar for もっち mottyzzz
14
11k
IBC 2025 動画技術関連レポート / IBC 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
2
220
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
Avatar for Jumpei Sakatsu saka2jp
0
120
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
Avatar for Yuuki Yamashita yama3133
2
190
GraphRAG グラフDBを使ったLLM生成（自作漫画DBを用いた具体例を用いて）
Avatar for sea-turt1e seaturt1e
1
160
コンパウンド組織のCRE #cre_meetup
Avatar for LayerX layerx
PRO
1
290

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k

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