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

CSSの歩き方

Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
67
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
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
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
Oracle Cloud Infrastructure(OCI)：Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
Avatar for oracle4engineer oracle4engineer
PRO
2
20k
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
33
31k
おい、エージェントを使って終わらせろ
Avatar for nwiizo nwiizo
3
900
C#コードの結合を可視化する Roslyn解析による設計改善と リファクタリング判断
Avatar for dora56 dora56
0
560
What the customer really needed
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
220
C#未経験の僕がAIに読めるコードを書かせるまで
Avatar for マグロ隊長kinTV maguroalternative
0
260
積み重なった技術負債への挑戦 〜初手としての全社ゴト化〜
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
1.6k
AIに賢く動いてもらうためのコンテキスト〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
170
Oracle Cloud Network Path Analyzerを試してみた/I Tried Out Oracle Cloud Network Path Analyzer
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
110
AIに書かせて、プラットフォームで縛る ― EKSプラットフォームで実践した責任境界と権限設計
Avatar for elmo elmodev09
0
250
[Kiro Meetup #7] Kiro Crew Dive Deep
Avatar for Kyosuke Konishi konippi
0
280
リアーキテクチャ後の障害ゼロを目指したShadow Testingの取り組み
Avatar for nihonbuson nihonbuson
PRO
1
180

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
530
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
300
Done Done
Avatar for chrislema chrislema
187
17k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
380
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
470

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