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

CSSの歩き方

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 嘉音とんと 嘉音とんと
February 12, 2025
Technology
66
0

 CSSの歩き方

Avatar for 嘉音とんと

嘉音とんと

February 12, 2025

More Decks by 嘉音とんと

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

Other Decks in Technology

See All in Technology
NetBoxを利用した作業効率化の試み_NetDevNight4
Avatar for Takumi Nohara tnoha
0
420
Amazon Bedrock Managed Knowledge Base Dive Deep
Avatar for Renya Kujirada ren8k
0
320
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
1
620
AI驚き屋発見器
Avatar for Yuuki Yamashita yama3133
2
390
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
200
PLaMo 3.0 Primeの事後学習
Avatar for Preferred Networks pfn
PRO
0
240
LLMリーダーボードアップデートに向けたAgentic Math_SWEのトレースについて
Avatar for YuyaYAMAMOTO nejumi
0
190
実践が先生だった— 新卒サーバーエンジニア1年目のリアル
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
220
AI研修(Day1)【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
3.2k
AIQAのナレッジ構築について
Avatar for tonchan qatonchan
1
140
検索技術知識0のエンジニアが広告検索システムを内製化して運用するまで
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
180
数値で見る Microsoft MVP 〜Spec Kit と GitHub Copilot Agent で作るデータ可視化ダッシュボード〜
Avatar for yutakaosada yutakaosada
0
180

Featured

See All Featured
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
650
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
400
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
550
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
450

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