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
27
これまでに一番苦労したプロジェクト
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 una unachang113
2
360
機械学習を「社会実装」するということ 2025年冬版 / Social Implementation of Machine Learning November 2025 Version
Avatar for Moe Uchiike（内池 もえ） moepy_stats
4
530
Dify on AWS の選択肢
Avatar for Yuki Sekiya ysekiy
0
110
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
Avatar for ZOZO Developers zozotech
PRO
0
360
AI駆動開発を実現するためのアーキテクチャと取り組み
Avatar for Yuichiro Yamashita baseballyama
17
14k
クラスタ統合リアーキテクチャ全貌～1,000万ユーザーのウェルネスSaaSを再設計～
Avatar for hacomono Inc. hacomono
PRO
0
200
信頼性が求められる業務のAIAgentのアーキテクチャ設計の勘所と課題
Avatar for Koji Miyata miyatakoji
0
180
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
21k
組織の“見えない壁”を越えよ！エンタープライズシフトに必須な3つのPMの「在り方」変革 #pmconf2025
Avatar for Masakazu Inaba masakazu178
1
1k
小規模チームによる衛星管制システムの開発とスケーラビリティの実現
Avatar for Takahiro Miyoshi sankichi92
0
150
今すぐGoogle Antigravityを触りましょう
Avatar for ryu rfdnxbro
0
210
経営から紐解くデータマネジメント
Avatar for Jun Ernesto Okumura pacocat
6
1.3k

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.1k
Visualization
Avatar for Eitan Lees eitanlees
150
16k

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