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

CSSの歩き方

Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
0
51

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025
Tweet

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
850
「技術負債にならない・間違えない」 権限管理の設計と実装
Avatar for naro143 naro143
35
10k
Goのビルドシステムの変遷 / The history of Go's build system
Avatar for ymotongpoo ymotongpoo
12
3.8k
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
Avatar for Shohei Kobayashi srockstyle
3
1.6k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
0
820
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
Avatar for Hiroki Yamagishi roki18d
1
320
Pure Goで体験するWasmの未来
Avatar for asuka askua
1
170
Railsアプリケーション開発者のためのブックガイド
Avatar for Masayoshi Takahashi takahashim
14
5.9k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
6
2.8k
Trust as Infrastructure
Avatar for Bryan Cantrill bcantrill
0
280
Tomorrow graphlib, Let us use everybody
Avatar for HayaoSuzuki hayaosuzuki
0
160

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k

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