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

CSSの歩き方

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

 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
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
410
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
Avatar for Kosuke ENOMOTO coosuke
PRO
1
330
本当に使える？AutoUpgrade の新機能を実践検証してみた
Avatar for oracle4engineer oracle4engineer
PRO
1
120
VCpp Link and Library - C++ breaktime 2025 Summer
Avatar for Akiko Kawai harukasao
0
220
Prox Industries株式会社 会社紹介資料
Avatar for Prox proxindustries
0
190
A2Aのクライアントを自作する
Avatar for Ryunosuke Iwai rynsuke
1
150
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
Avatar for たけのこ kmiya84377
0
3.5k
Agentic Workflowという選択肢を考える
Avatar for takuya kikuchi tkikuchi1002
1
370
ハノーバーメッセ2025座談会.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
doda開発 生成AI元年宣言！自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
Avatar for techtekt techtekt
0
200
監視のこれまでとこれから/sakura monitoring seminar 2025
Avatar for FUJIWARA Shunichiro fujiwara3
10
2.9k
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
Avatar for Yudai Hayashi yudai00
0
470

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k

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