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
きのこカンファレンス2026_肩書きを外したとき私は誰か
Avatar for yamasatimi yamasatimi
1
130
認証認可だけじゃない！ ID管理の構成要素と ライフサイクルを意識しよう
Avatar for ritou ritou
1
470
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
Avatar for やくも yakumo
2
540
SRE依存からの脱却 運用を開 発チームへ移す、 フルサイ クル開 発体制の実践
Avatar for joe joooee0000
0
180
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
Avatar for Kozo Taira kozotaira
0
250
Compose 新機能総まとめ / What's New in Jetpack Compose
Avatar for Yuki Anzai yanzm
0
120
AWS Summit 2026で見えたSIerにとっての Amazon Quickの位置づけ
Avatar for まふりる maf_0521
0
160
フルAIで個人開発して学んだあれこれ / yuruai vol.1
Avatar for Isao Shimizu isaoshimizu
0
180
Agentic AI 時代のテスト手法: Kiro とはじめるプロパティベーステスト (AWS Summit Japan 2026 | DEV212)
Avatar for Hiroki Yamazaki ymhiroki
0
210
型は壁、Rustでもバグを直すな、表現できなくせよ
Avatar for nwiizo nwiizo
9
1k
product engineering with qa
Avatar for Nealle nealle
0
140
5分でわかる Amazon Connect_20260608
Avatar for hwangbyeonghun hwangbyeonghun
0
180

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
180
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
170
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
230
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
880
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
150

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