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

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
41
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
34
推しの 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
60
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
Bet AI Day 2026丨Agentは、「金融」という巨大産業の何を変えられるのか
Avatar for LayerX layerx
PRO
0
490
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
Avatar for k.muguruma mtpooh
3
230
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.3k
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
0
130
Cloudflare製品を活用した AIガバナンス実践入門 / AI governance with Cloudflare Service
Avatar for 株式会社DELTA delta_tech
1
170
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
530
人気商品が「ちゃんと買える」をつくる ー ECの負荷改善
Avatar for ykagano ykagano
1
180
AI時代のキョウソウ戦略
Avatar for Yoshitake Kobayashi ystk
2
110
デザイナーとPdMが自分でデプロイする ― Amplify Hosting の PR プレビューで回す仮説検証
Avatar for KAKEHASHI kakehashi
PRO
2
100
VPCでもFloatingIPを使いたいんだ
Avatar for Yasunobu Kotani (はくひめ) y_kotani
1
140
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
5k
いま好きなこと 最初はそんなに好きじゃなかった #tamagawadev
Avatar for Ichiro Nishiuma nishiuma
0
110

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
300
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
370
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
500

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