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

CSSの歩き方

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

 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
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
5
2.4k
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
Avatar for quiver quiver
1
580
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
Avatar for yuu26 yuu26
9
2.3k
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
Avatar for 弁護士ドットコム bengo4com
0
2.4k
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを 愛するようになったか（改）
Avatar for Takaya Saeki nullpo_head
7
2.6k
Serverless Meetup #21
Avatar for 吉田真吾 yoshidashingo
1
130
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
Avatar for いのうえ senseofunity129
0
140
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
Avatar for LayerX layerx
PRO
9
2.3k
テストを実行してSorbetのsigを書こう！
Avatar for SansanTech sansantech
PRO
1
100
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
Avatar for puku0x puku0x
0
580
LTに影響を受けてテンプレリポジトリを作った話
Avatar for Horikawa hol1kgmg
0
370
Eval-Centric AI: Agent 開発におけるベストプラクティスの探求
Avatar for Asei Sugiyama asei
0
130

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Done Done
Avatar for chrislema chrislema
185
16k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

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