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

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
EdgeプロファイルでAWSアカウントを安全に使い分ける
Avatar for jhashimoto jhashimoto
0
100
コーディングエージェントはTypeScriptの 型エラーをどう自己修正しているのか
Avatar for Melonps melonps
4
480
RubyでRuby拡張を書いたらRubyより35倍速になったってどういうこと？？
Avatar for kazuho kazuho
3
610
キャリア25年目にしてTypeScript に出会うまで - 「型」を通じて振り返るプログラミング言語遍歴 / Meeting TypeScript After 25 Years in Tech - Looking Back at My Programming Language Journey Through "Types"
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
280
AI とサービス・デザイン / AI and Service Design
Avatar for Kenji Saito ks91
PRO
0
170
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
oracle-to-databricks-migration-with-llm-and-dbt
Avatar for case-k-git casek
0
120
生成AIに振り回されない 〜確率論と決定論の使い分け〜
Avatar for Shu Kobuchi shukob
0
110
Agentic Design Patterns
Avatar for Guillaume Laforge glaforge
0
190
その英語学習、AWSで代替できませんか？
Avatar for Tatsuya suzutatsu
1
250
Geek Woman の育ち方 〜コミュニティとAIと〜
Avatar for chicaco chicaco
0
410
TypeScriptとAngular Signal で実現する保守性の高いアプリケーション設計 - 3層アーキテクチャによる責務分離の実践（たつかわ） https://2026.tskaigi.org/talks/10
Avatar for Nealle nealle
1
350

Featured

See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
120
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
210
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
210
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
190
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
150
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
190
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k

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