Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSSの歩き方

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
67
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
BedrockとLambdaで作る リアルタイム進行型推理ゲーム
Avatar for kawai kawametho
0
130
Harness Engineering on Rails
Avatar for Joël Quenneville joelq
0
770
人にやさしく、AIにやさしく、書き手を選ばないIaCのガードレール再考 / Rethinking IaC Guardrails for Humans and AI Alike
Avatar for kohbis kohbis
5
1.9k
データ品質を壊しながらSnowflakeのAIに分析させてみた
Avatar for かわなご kawanago
0
330
高負荷プロダクション環境におけるAWS Lambdaのリアル 〜スケールとコストを左右する実行ライフサイクルの技術仕様〜
Avatar for maimyyym maimyyym
2
830
あなたの知らないAmazon VPC Route Server／Amazon VPC Route Server you don't know about
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
180
10年欲しかった音楽管理アプリを、AIと一緒に作りはじめた
Avatar for log5 judau
1
190
Mastering Agentic Development: Harness Engineering for Effective Coding Agents
Avatar for Kyosuke Konishi konippi
3
660
20260915deck.gl-raster を使ってみた
Avatar for rena1208 rena1208
0
180
【Findyテック文化祭ワークショップ】新卒エンジニア&採用担当と作る、 なりたい姿と今やるべき一歩
Avatar for ディップ株式会社 dip_tech
PRO
0
150
猫でもわかるKiro Web
Avatar for Hiroo Katoh kentapapa
1
160
全社共通データ基盤をつくる。ソニーのDatabricks活用とデータガバナンス設計の裏側
Avatar for ソニー株式会社 sony
0
280

Featured

See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
850
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
510
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
380
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
560
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k

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