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

CSSの歩き方

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

 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
46
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 Sotaro Karasawa sotarok
18
8.2k
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
2.9k
AI エージェントとはそもそも何か？ - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
Avatar for Yoshitaka Haribara hariby
3
670
研究開発と製品開発、両利きのロボティクス
Avatar for Yutaka Kondo youtalk
1
180
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
150
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
Avatar for Tobias Lampert tobiaslampertlotum
0
120
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
Avatar for shibayu36 shibayu36
0
180
Language Update: Java
Avatar for Yuichi.Sakuraba skrb
2
240
AIのグローバルトレンド2025 #scrummikawa / global ai trend
Avatar for kyonmm kyonmm
PRO
1
200
TypeScript入門
Avatar for Recruit recruitengineers
PRO
35
12k
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
Avatar for hacusk hacusk
1
140
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
210

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
51
5.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k

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