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

CSSの歩き方

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

 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
Новые мапы в Go. Вова Марунин, Clatch, МТС
Avatar for Lamoda Tech lamodatech
0
2k
RubyKaigi NOC 近況 2025
Avatar for Sorah Fukumori sorah
1
870
kernelvm-brain-net
Avatar for らすぴー raspython3
0
540
Ninno LT
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
120
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
Avatar for M Yano nagauta
0
160
AIと共同執筆してより質の高い記事を書こう
Avatar for Riya Amemiya riyaamemiya
1
340
AIによるコードレビューで開発体験を向上させよう！
Avatar for Atsushi Nakatsugawa moongift
PRO
0
420
MySQL InnoDB Data Recovery - The Last Resort
Avatar for lefred lefred
0
110
Как мы автоматизировали интеграционное тестирование с Gonkey и не пожалели. Паша Егорычев, Кирилл Поляков
Avatar for Lamoda Tech lamodatech
0
2.1k
非root化Androidスマホでも動く仮想マシンアプリを試してみた
Avatar for Sora Arakawa arkw
0
120
Azure × MCP 入門
Avatar for Ryosuke Hyakuta ry0y4n
8
1.7k
AI 코딩 에이전트 더 똑똑하게 쓰기
Avatar for nacyot nacyot
0
540

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
570
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
700
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
10k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
2.9k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Side Projects
Avatar for Sacha Greif sachag
453
42k

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