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 Jun Ernesto Okumura pacocat
6
1.3k
【ASW21-02】STAMP/CAST分析における生成AIの支援 ～羽田空港航空機衝突事故を題材として （Support of Generative AI in STAMP/CAST Analysis - A Case Study Based on the Haneda Airport Aircraft Accident -）
Avatar for Hiroyuki.Anraku hianraku9498
0
220
変わるもの、変わらないもの ：OSSアーキテクチャで実現する持続可能なシステム
Avatar for gree_tech gree_tech
PRO
0
1k
入社したばかりでもできる、 アクセシビリティ改善の第一歩
Avatar for una unachang113
2
360
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
Avatar for ZOZO Developers zozotech
PRO
0
360
.NET 10のASP. NET Core注目の新機能
Avatar for tomokusaba tomokusaba
0
140
学術的根拠から読み解くNotebookLMの音声活用法
Avatar for Shu Kobuchi shukob
0
490
TypeScript×CASLでつくるSaaSの認可 / Authz with CASL
Avatar for Jumpei Sakatsu saka2jp
2
140
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
320
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6k
AWS re:Invent 2025 で頻出の 生成 AI サービスをおさらい
Avatar for komakichi komakichi
3
240
Android Studio Otter の最新 Gemini 機能 / Latest Gemini features in Android Studio Otter
Avatar for Yuki Anzai yanzm
0
460

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Docker and Python
Avatar for Tania Allard trallard
46
3.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k

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