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

CSSの歩き方

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

 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
47
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
今のコンピュータ、AI にも Web にも 向いていないので 作り直そう!!
Avatar for piacerex piacerex
0
630
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
430
abema-trace-sampling-observability-cost-optimization
Avatar for tetsuya28 tetsuya28
0
480
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
Avatar for iwashi iwashi86
9
4.4k
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
Avatar for Yuji Oshima yuj1osm
0
690
AIを使ってテストを楽にする
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
420
次世代のメールプロトコルの斜め読み
Avatar for HIRANO Yoshitaka hirachan
3
380
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
260
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
Avatar for okiyuki okiyuki99
6
1.8k
AI連携の新常識！ 話題のMCPをはじめて学ぶ！
Avatar for MakoAkiba makoakiba
0
180
最近読んで良かった本 / Yokohama North Meetup #10
Avatar for Takuya Mukohira mktakuya
0
770
Copilotの精度を上げる！カスタムプロンプト入門.pdf
Avatar for Izumu KUSUNOKI ismk
2
220

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
72
4.9k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
720
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
650
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.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. おしまい