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

CSSの歩き方

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

 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
89
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
エンジニアリングマネージャー“お悩み相談”パネルセッション
Avatar for ar_tama ar_tama
1
670
株式会社島津製作所_研究開発（集団協業と知的生産）の現場を支える、OSS知識基盤システムの導入
Avatar for Kuniharu, AKAHANE (赤羽根/州晴) akahane92
1
1.2k
Expertise as a Service via MCP
Avatar for Yoda Keisuke yodakeisuke
1
140
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
Avatar for Kyosuke Awata wooootack
1
120
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
Avatar for Yasuhiro Onishi onishi
12
5.2k
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
Avatar for Yuki Harayama parayama0625
0
160
Microsoft Defender XDRで疲弊しないためのインシデント対応
Avatar for Kunii, Suguru sophiakunii
3
400
M365アカウント侵害時の初動対応
Avatar for LHazy lhazy
7
4.6k
TROCCO今昔
Avatar for gtnao gtnao
0
210
本当にわかりやすいAIエージェント入門
Avatar for segavvy segavvy
10
6k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
Avatar for HASEGAWA Tomoki tomzoh
2
390
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
Avatar for NTT docomo Business nttcom
0
220

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k

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