Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
AIがコードを書く時代に、エンジニアは何で自分の価値を証明するのか / In an era where AI writes code how do engineers prove their value
Avatar for CARTA Engineering carta_engineering
3
860
OSC2026on_the-world-is-waiting-for-your-voice.pdf
Avatar for Naruhiko Ogasawara naruoga
0
370
AgentCoreで実践するハーネスエンジニアリング
Avatar for やくも yakumo
1
300
WasmをRustにする
Avatar for SansanTech sansantech
PRO
0
200
アウトプット初心者、半年間のふりかえり
Avatar for aoi 4o1sobblue
0
130
OR学会2026年秋期大会_機械学習と数理最適化の融合による、配合レシピ最適化システム開発事例
Avatar for BrainPad brainpadpr
0
130
実体験から学ぶ分析エージェントの開発と運⽤
Avatar for Recruit recruitengineers
PRO
8
2.2k
More Freedom on the Same Shared GPU Cluster: A Small Team’s Experience with vCluster
Avatar for NTT docomo Business nttcom
0
160
味覇で作るパスタが美味い - 20261001_yabaubuki.dev
Avatar for Livesense Inc. livesense
PRO
0
130
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
570
USB PDを使ってスマホを労わりたい
Avatar for らすぴー raspython3
0
160
触りたくないデータに、どう触るか AI時代のRBACアクセスガバナンス
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
130

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
430
Between Models and Reality
Avatar for mayunak mayunak
4
490
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
590
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
580
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
560
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
250
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
2
320

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