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

CSSの歩き方

嘉音とんと
February 12, 2025
Technology
0
29

 CSSの歩き方

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
26
これまでに一番苦労したプロジェクト
kanon_tonto
0
21
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
87
Kanazawa.rbを振り返る
kanon_tonto
0
97
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
44
Goで始めるWebsocketプログラミング
kanon_tonto
0
150
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
400

Other Decks in Technology

See All in Technology
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
120
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
170
表現を育てる
kiyou77
1
210
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
250
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.8k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
380
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
620
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2.1k
ビジネスモデリング道場　目的と背景
masuda220
PRO
9
550
Goで作って学ぶWebSocket
ryuichi1208
3
1.5k
速くて安いWebサイトを作る
nishiharatsubasa
11
13k
分解して理解する Aspire
nenonaninu
1
290

Featured

See All Featured
KATA
mclloyd
29
14k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing for Performance
lara
604
68k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
How STYLIGHT went responsive
nonsquared
98
5.4k
Practical Orchestrator
shlominoach
186
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Faster Mobile Websites
deanohume
306
31k
Documentation Writing (for coders)
carmenintech
67
4.6k
Designing Experiences People Love
moore
140
23k
Visualization
eitanlees
146
15k

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