Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSSの歩き方

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
69
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

See All by 嘉音とんと
推しの VTuber の公式 Web サイトを作った Part.2
Avatar for 嘉音とんと kanon_tonto
0
44
これまでに一番苦労したプロジェクト
Avatar for 嘉音とんと kanon_tonto
0
41
推しの VTuber の公式サイトを作った
Avatar for 嘉音とんと kanon_tonto
0
200
ぼっちがリモートワークやってみた
Avatar for 嘉音とんと kanon_tonto
0
100
Kanazawa.rbを振り返る
Avatar for 嘉音とんと kanon_tonto
0
120
もう僕は勤怠を入力しなくても良い
Avatar for 嘉音とんと kanon_tonto
0
63
Goで始めるWebsocketプログラミング
Avatar for 嘉音とんと kanon_tonto
0
180
AWS Lambdaでファイルをこねくり回す
Avatar for 嘉音とんと kanon_tonto
0
440
iOSアプリをリリースするまで
Avatar for 嘉音とんと kanon_tonto
2
440

Other Decks in Technology

See All in Technology
AIコーディングはじめました
Avatar for 田中みそ miso
0
130
Vue で書く 空間コンピューティング、TresJS と WebXR を使ったXR デバイスのフロントエンド開発
Avatar for Shingo Hiranuma hiranuma
0
150
AI秘書と毎日働くのはもう当たり前。開発以外の業務に足りない機能をどう埋める？
Avatar for みのるん minorun365
PRO
4
2.2k
AIテスト自動化と評価駆動開発EDD
Avatar for コロッケそば happysamurai294
0
130
AIエージェント時代、Kaggleにどう取り組むか
Avatar for Naoya Takashima takanao
2
470
Vibe-to-Spec開発_実践ガイド
Avatar for コロッケそば happysamurai294
0
140
あなたのDartコードは丸見えかもしれない ～reFlutterで暴くFlutterアプリの中身と多層防御～
Avatar for ZOZO Developers zozotech
PRO
0
740
Patterns in AI Driven Software Development
Avatar for Adrian Kosmaczewski akosma
PRO
0
440
複雑な業務システムを高速でつくるため、チーム全員をつくれる人へ
Avatar for AyaKurabuchi ayakurabuchi
0
120
AIに任せられるFlutterコードベースを作る 〜仕様をコードで表し、ハーネスで守る〜
Avatar for Yohei Maeda myohei
1
610
Oracle Database Security 詳細解説
Avatar for oracle4engineer oracle4engineer
PRO
1
210
AIで選択肢が広がった組織設計の理想と現実
Avatar for konifar konifar
16
7.5k

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.5k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
540
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
610
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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