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
Effective Match Types - Scala Days 2025
Avatar for Jamie Thompson bishabosha
1
110
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
Avatar for mtx2s mtx2s
5
1.2k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
Avatar for Susisu susisu
7
1.8k
夢の印税生活 / Life on Royalties
Avatar for とみたまさひろ tmtms
0
280
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
Avatar for Yuki Anzai yanzm
0
190
ソフトウェア エンジニアとしての 姿勢と心構え
Avatar for Recruit recruitengineers
PRO
4
760
あとはAIに任せて人間は自由に生きる
Avatar for Kentaro Kuribayashi kentaro
3
1.1k
7月のガバクラ利用料が高かったので調べてみた
Avatar for 高橋広和 techniczna
3
440
Browser
Avatar for Recruit recruitengineers
PRO
4
340
制約理論（ToC）入門
Avatar for Recruit recruitengineers
PRO
3
310
あなたの知らない OneDrive
Avatar for Murachi Akira murachiakira
0
240
モバイルアプリ研修
Avatar for Recruit recruitengineers
PRO
3
260

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Done Done
Avatar for chrislema chrislema
185
16k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.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. おしまい