Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSの歩き方
Search
嘉音とんと
February 12, 2025
Technology
0
53
CSSの歩き方
嘉音とんと
February 12, 2025
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
28
これまでに一番苦労したプロジェクト
kanon_tonto
0
23
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
90
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
47
Goで始めるWebsocketプログラミング
kanon_tonto
0
160
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
410
Other Decks in Technology
See All in Technology
AI-DLCを現場にインストールしてみた:プロトタイプ開発で分かったこと・やめたこと
recruitengineers
PRO
2
160
AIの長期記憶と短期記憶の違いについてAgentCoreを例に深掘ってみた
yakumo
4
450
AWS運用を効率化する!AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
nikkei_engineer_recruiting
0
110
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
scova0731
0
350
Python 3.14 Overview
lycorptech_jp
PRO
1
120
寫了幾年 Code,然後呢?軟體工程師必須重新認識的 DevOps
cheng_wei_chen
1
1.5k
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
sansantech
PRO
1
150
文字列の並び順 / Unicode Collation
tmtms
3
610
通勤手当申請チェックエージェント開発のリアル
whisaiyo
2
100
5分で知るMicrosoft Ignite
taiponrock
PRO
0
400
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
tomoki10
0
250
まだ間に合う! Agentic AI on AWSの現在地をやさしく一挙おさらい
minorun365
12
720
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
62
Making Projects Easy
brettharned
120
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
390
The Cost Of JavaScript in 2023
addyosmani
55
9.4k
Thoughts on Productivity
jonyablonski
73
5k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
67
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
26
Transcript
CSSの歩き方
嘉音 とんと #YouTube #マリオカート #鏡音レン
CSSの レビューが難しい
None
.profile .name-and-sns .sns .profile-details
.profile .name-and-sns .sns .profile-details どこの何?
CSSレビューを 少しでもラクにする 命名規則を紹介
BEM
Block Element Modifier
サンプルコードを 添えて解説
None
Block Element Modifier
Block Element Modifier それは何を表す?
ヘッダー 認証エリア
None
Block Element Modifier
Block Element Modifier Block を構成する要素
None
アンダーバー 2 本で表現する 新規登録ボタンは login_header の中でのみ 存在が保証される
ここを表現してみる
None
None
Block Element Modifier
Block Element Modifier どういう状態?
ここを 表現してみる
None
「小さいよ」という状態を 示している
サイズ small, large 状態 disabled, focused テーマ dark, light
適用させた結果を CSS で見てみる
None
None
少し読みやすくなった気がする
若干古めの命名規則ですが 知っているだけでも CSS が読みやすくなります
おしまい