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

CSSの歩き方

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

 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
88
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
AIエージェントデザインパターンの選び方
Avatar for Almondoイベント担当 almondo_event
0
150
うちの会社の評判は？SNSの投稿分析にAIを使ってみた
Avatar for Kiyotaka Doumae doumae
0
240
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
Avatar for 高棹大樹 daitak
0
120
AIのための
オンボーディングドキュメントを整備する - hirotea
Avatar for hirotea hirotea
9
2.3k
GitHub Coding Agent 概要
Avatar for KAMEGAWA Kazushi kkamegawa
1
1.7k
技術書典18結果報告
Avatar for Mutz mutsumix
2
180
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
Avatar for 株式会社カミナシ kaminashi
1
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
38k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
Avatar for cohalz cohalz
1
490
やさしいClaude Code入門
Avatar for みのるん minorun365
PRO
32
24k
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
Avatar for Ikuo Suyama martin_lover
1
650
継続戦闘能⼒
Avatar for SansanTech sansantech
PRO
0
220

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Fontdeck: Realign not Redesign
Avatar for Paul Robert Lloyd paulrobertlloyd
84
5.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
123
52k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k

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