Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSSの歩き方

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

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
28
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
23
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
170
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
90
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-DLCを現場にインストールしてみた：プロトタイプ開発で分かったこと･やめたこと
Avatar for Recruit recruitengineers
PRO
2
160
AIの長期記憶と短期記憶の違いについてAgentCoreを例に深掘ってみた
Avatar for やくも yakumo
4
450
AWS運用を効率化する！AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
110
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
350
Python 3.14 Overview
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
120
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
610
通勤手当申請チェックエージェント開発のリアル
Avatar for WHIsaiyo whisaiyo
2
100
5分で知るMicrosoft Ignite
Avatar for Taiji HAGINO taiponrock
PRO
0
400
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
250
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
12
720

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
62
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
390
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
67
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
26

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