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
38
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
33
推しの 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
57
Goで始めるWebsocketプログラミング
Avatar for 嘉音とんと kanon_tonto
0
170
AWS Lambdaでファイルをこねくり回す
Avatar for 嘉音とんと kanon_tonto
0
440
iOSアプリをリリースするまで
Avatar for 嘉音とんと kanon_tonto
2
420

Other Decks in Technology

See All in Technology
AIは実装を速くする。では、私たちは何を今作るべきか？－立場を越えてリリースに向き合ったチーム開発の実践 / 20260801 Hiromi Nakaya and Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
180
『モンスターストライク』 の運営に伴走する！ データ民主化への 解析グループの3つのアプローチ
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
200
BigQuery を検索ソースとした AI Agent の作り方って 〇〇 通りあんねん
Avatar for SatohJohn satohjohn
0
150
plamo-3-translateの開発
Avatar for Preferred Networks pfn
PRO
0
240
LLMリーダーボードアップデートに向けたAgentic Math_SWEのトレースについて
Avatar for YuyaYAMAMOTO nejumi
0
190
Claude Mythos、Fable...フロンティアAIの最新動向と企業のセキュリティ対策
Avatar for GMO Flatt Security flatt_security
0
180
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
Avatar for Ryotaro Harada alchemy1115
1
270
オートロックマンションなのに、各部屋は施錠なし！？ 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
Avatar for NTT docomo Business nttcom
0
660
VPCセキュリティ対応の最新事情
Avatar for nagisa_53 nagisa53
2
350
初めてのGitHub Actions / GitHub Actions at First
Avatar for philomagi tooppoo
0
120
AIエージェントの知識表現と推論に なぜグラフが使われるのか - 記号的AIの復権とニューラルAIとの統合
Avatar for Yohei Onishi yohei1126
1
250
Atlassian Cloudサポート業務でのAIエージェント活用事例
Avatar for Makky12 smt7174
0
220

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.1M
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.7k

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