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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
嘉音とんと
February 12, 2025
Technology
0
55
CSSの歩き方
嘉音とんと
February 12, 2025
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
28
これまでに一番苦労したプロジェクト
kanon_tonto
0
24
推しの VTuber の公式サイトを作った
kanon_tonto
0
170
ぼっちがリモートワークやってみた
kanon_tonto
0
91
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
Agent Skils
dip_tech
PRO
0
110
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
68k
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
abemii
0
140
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
200
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
190
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
460
Context Engineeringの取り組み
nutslove
0
360
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
180
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
570
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
160
Greatest Disaster Hits in Web Performance
guaca
0
260
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
460
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Speed Design
sergeychernyshev
33
1.5k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
320
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
66
Making Projects Easy
brettharned
120
6.6k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
Darren the Foodie - Storyboard
khoart
PRO
2
2.4k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
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 が読みやすくなります
おしまい