Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSの歩き方

嘉音とんと
February 12, 2025
Technology
0
40

 CSSの歩き方

嘉音とんと

February 12, 2025
Tweet

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
88
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
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
0
130
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か？ - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
380
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
1
120
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
730
食べログが挑む！飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
3
420
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
320
LangfuseでAIエージェントの 可観測性を高めよう！/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
230
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
310
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
【Λ（らむだ）】最近のアプデ情報 / RPALT20250422
lambda
0
110
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
240
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
40
7.2k
Into the Great Unknown - MozCon
thekraken
37
1.7k
The Cult of Friendly URLs
andyhume
78
6.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
We Have a Design System, Now What?
morganepeng
52
7.5k

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