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

CSSの歩き方

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

 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
88
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
46
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
成立するElixirの再束縛（再代入）可という選択
Avatar for kubell kubell_hr
0
870
VCpp Link and Library - C++ breaktime 2025 Summer
Avatar for Akiko Kawai harukasao
0
220
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
Avatar for k.muguruma mtpooh
2
200
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
Avatar for ShigeruOda shigeruoda
2
380
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
Avatar for kura kuralab
5
850
新卒3年目の後悔 〜機械学習モデルジョブの運用を頑張った話〜
Avatar for camay kameitomohiro
0
370
～宇宙最速～ 2025年AWS Summit レポート
Avatar for satodesu satodesu
1
1.2k
監視のこれまでとこれから/sakura monitoring seminar 2025
Avatar for FUJIWARA Shunichiro fujiwara3
10
2.9k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
1.4k
Liquid Glass革新とSwiftUI/UIKit進化
Avatar for Fumiya Sakai fumiyasac0921
0
140
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
Avatar for emi emiki
0
690
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
Avatar for Kohei "Max" MATSUSHITA ma2shita
29
9.5k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
920
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Scaling GitHub
Avatar for Zach Holman holman
459
140k

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