Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSの歩き方
Search
嘉音とんと
February 12, 2025
Technology
0
48
CSSの歩き方
嘉音とんと
February 12, 2025
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
26
これまでに一番苦労したプロジェクト
kanon_tonto
0
23
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
89
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
46
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
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
670
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
Expertise as a Service via MCP
yodakeisuke
1
140
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
120
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
12
5.2k
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
160
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
M365アカウント侵害時の初動対応
lhazy
7
4.6k
TROCCO今昔
gtnao
0
210
本当にわかりやすいAIエージェント入門
segavvy
10
6k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
390
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Optimizing for Happiness
mojombo
379
70k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Unsuck your backbone
ammeep
671
58k
KATA
mclloyd
30
14k
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.7k
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 が読みやすくなります
おしまい