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

CSSの歩き方

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

 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
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
140
モノレポ開発のエラー、誰が見る？Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
790
Data-centric AI入門第6章：Data-centric AIの実践例
x_ttyszk
1
400
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
330
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.3k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
240
7日間でハッキングをはじめる本をはじめてみませんか？_ITエンジニア本大賞2025
nomizone
2
1.8k
トラシューアニマルになろう ～開発者だからこそできる、安定したサービス作りの秘訣～
jacopen
2
2k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
100
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
7.1k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
730

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
Six Lessons from altMBA
skipperchong
27
3.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building an army of robots
kneath
303
45k
Being A Developer After 40
akosma
89
590k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for humans not robots
tammielis
250
25k

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