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

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
30
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
26
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
180
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
92
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
110
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
49
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
Yahoo!ショッピングのレコメンデーション・システムにおけるML実践の一例 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
190
[JAWS DAYS 2026]私の AWS DevOps Agent 推しポイント
Avatar for Toshihiro Furuno furuton
0
140
IBM Bobを使って、PostgreSQLのToDoアプリをDb2へ変換してみよう/202603_Dojo_Bob
Avatar for Mayumi Hirano mayumihirano
1
310
PMBOK第8版は第7版から何が変わったのか（PMBOK第8版概要解説） / 20260304 Takeshi Watarai
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
200
[2026-03-07]あの日諦めたスクラムの答えを僕達はまだ探している。〜守ることと、諦めることと、それでも前に進むチームの話〜
Avatar for tosite tosite
0
180
OCI Security サービス 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
Avatar for ryu rfdnxbro
0
500
OCI技術資料 : コンピュート・サービス 概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
54k
生成AIの利用とセキュリティ /gen-ai-and-security
Avatar for Masayoshi Mizutani mizutani
1
1.6k
スクリプトの先へ！AIエージェントと組み合わせる モバイルE2Eテスト
Avatar for Ryo WATANABE error96num
0
150
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
3
710
AI時代のSaaSとETL
Avatar for Shu Suzuki shoe116
1
110

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
410
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
220
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
440
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k

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