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
49
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
Rubyの国のPerlMonger
anatofuz
3
730
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
350
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
290
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
2
230
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
870
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
690
Kiroから考える AIコーディングツールの潮流
s4yuba
4
670
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
740
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Unsuck your backbone
ammeep
671
58k
Navigating Team Friction
lara
188
15k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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 が読みやすくなります
おしまい