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
テストセンター受験、オンライン受験、どっちなんだい？
Avatar for Yuuki Yamashita yama3133
0
200
AWS re:Invent 2025 を振り返る
Avatar for kazzpapa3 kazzpapa3
2
110
RALGO : AIを組織に組み込む方法 -アルゴリズム中心組織設計- #RSGT2026 / RALGO: How to Integrate AI into an Organization – Algorithm-Centric Organizational Design
Avatar for kyonmm kyonmm
PRO
3
440
ECS_EKS以外の選択肢_ROSA入門_.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
120
戰略轉變：從建構 AI 代理人到發展可擴展的技能生態系統
Avatar for Bo-Yi Wu appleboy
0
180
2025年の医用画像AI/AI×medical_imaging_in_2025_generated_by_AI
Avatar for YoshihiroTodoroki tdys13
0
290
Redshift認可、アップデートでどう変わった？
Avatar for daiki.handa handy
1
120
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.5k
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.3k
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
340
スクラムマスターが
スクラムチームに入って取り組む5つのこと
- スクラムガイドには書いてないけど入った当初から取り組んでおきたい大切なこと -
Avatar for scrummasudar scrummasudar
0
890

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
0
110
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
410
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
65
35k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
100
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k

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