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
WCAN2019春LT_ボツスライド1
Search
sugar
April 15, 2019
Programming
0
1.4k
WCAN2019春LT_ボツスライド1
WCAN2019春LT用に用意したけどボツになったスライドです。
sugar
April 15, 2019
Tweet
Share
More Decks by sugar
See All by sugar
a-blog cms Training Camp 2023 - a-blog cms での実装フローを紹介
sugawara
0
77
a-blog cms での簡単不正ログイン対策
sugawara
0
130
買切りとサブスクについて比較しながらライセンス適用方法とサブスクのいいところを伝える/ablogcms-zoomup202105
sugawara
0
24
a-blog cms を使ったサイト制作ガイドラインを作ってみた
sugawara
0
400
私の1年間とa-blog cmsだからできる簡単UI対応
sugawara
0
390
『CSSに不安を抱く私を W3C仕様が救ってくれた』WCAN 2019 Spring
sugawara
0
1.9k
WCAN2019春LT_ボツスライド2
sugawara
0
1.3k
工数表書き忘れ防止機能を作ってみた 〜 GASを使ったSlackへの自動通知 〜
sugawara
1
69
自己紹介LT
sugawara
0
77
Other Decks in Programming
See All in Programming
コーディングエージェント概観(2025/07)
itsuki_t88
0
450
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
390
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
slogパッケージの深掘り
integral0515
0
160
効率的な開発手段として VRTを活用する
ishkawa
1
180
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why Our Code Smells
bkeepers
PRO
337
57k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building an army of robots
kneath
306
45k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Site-Speed That Sticks
csswizardry
10
730
Fireside Chat
paigeccino
37
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
CSSでの中央寄せ 有限会社アップルップル 菅原彩 WCAN 2019 Spring
⾃⼰紹介 w໊લɿੁݪ࠼ wχοΫωʔϜɿγϡΨʔ w͓ࣄɿϚʔΫΞοϓ wۈΊઌɿ༗ݶձࣾΞοϓϧοϓϧ w8FCྺɿ wझຯɿΞϘΧυΛछ͔ΒҭͯΔ͜ͱɺଽςϥϦϜɺ ΤϏͷ͞ΈͰࢦΛπϚπϚ͞ΕΔ͜ͱ
趣味
お話しすること CSSでの中央寄せを例に、 = CSSを効率的に書く上で必要なこと CSSに振り回されないためのスキル
難易度 内容はあくまで基本的なこと
話の流れ CSSでの中央寄せでハマりやすいところを紹介 • なぜ中央に寄らないのかを検証 • 解決⽅法 • そこから学べる「CSSに振り回されないためのスキル」
なぜ中央寄せなのか? 私がマークアップを初めて⼀番はじめにつまずいたこと 中央寄せ
たかが中央寄せ? 中央寄せは登⻯⾨ →リソースは私の体験 CSSを書く⼈なら必ず中央寄せに悩んだことがあるはず (中央寄せにハマった経験) 中央寄せにはCSSを書いていく上での基礎が詰まってる
ハマりやすいCSS中央寄せ 2選
ハマりやすいCSS中央寄せ その1 display:block; なのに margin: auto; が効かない <style> p {
margin: auto; font-size: 80px; } </style> <div> <p>ΤϏ</p> </div> தԝʹدͬͯͳ͍ʜɻ
display:block; なのに margin: auto; が効かない 検証結果 ؟ڸ
display:block; なのに margin: auto; が効かない エビにwidthを指定 XJEUIQYΛࢦఆ → 中央寄せになった
CSSに振り回されないためのスキル その1 display: block; の性質 →初期値は親要素全体に広がる仕様 ʹɹϓϩύςΟͷ༷ʢੑ࣭ʣΛཧղ͢Δ
CSSに振り回されないためのスキル その1 プロパティの仕様(性質)を理解していると? • ⾏き当たりばったりなコード • 根拠を持ったコードを記述できる • 不要なコードがなくなる •
CSSの記述ミスが減る ˠʮϓϩύςΟͷ༷ʢੑ࣭ʣΛཧղʯ
ハマりやすいCSS中央寄せ その2 display: inline-block; に vertical-aline: middle; が効かない <style> div
{ height: 300px; text-align: center; background-color: lightblue; } p { display: inline-block; margin: 0; font-size: 80px; color: ghostwhite; vertical-align: middle; background-color: green; } </style> <div> <p>ίέ</p> <p>ίέ</p> </div>
ハマりやすいCSS中央寄せ その2 display: inline-block; に vertical-aline: middle; が効かない 理想の表⽰内容
ハマりやすいCSS中央寄せ その2 display: inline-block; に vertical-aline: middle; が効かない 実際のブラウザ表⽰内容 ɹUFYUBMJHODFOUFSޮ͍͍ͯΔ
‐ WFSUJDBMBMJHONJEEMFޮ͍͍ͯͳ͍ ‑
display: inline-block; に vertical-aline: middle; が効かない 検証結果 ؟ڸ WFSUJDBMBMJHONJEEMFΛ0'' →原因不明
ˠάάͬͯΈΔ
display: inline-block; に vertical-aline: middle; が効かない 検索キーワード:「inline-block vertical-align middle 中央寄せ」
display: inline-block; に vertical-aline: middle; が効かない 追加すべきスタイル ʻίέʼ MJOFIFJHIU ʻίέͷཁૉʼ
MJOFIFJHIUQY GPOUTJ[F
vertical-alineは⾏間を基準にしたプロパティ vertical-aline: middle の特性 display: inline-block の特性 →vertical-aline: middle で
親要素のxの中央で揃える display: inline-blockは終了タグの後に改⾏を⼊れると余⽩が⼊る →親要素にfont:0;を指定して余⽩が⼊らないように ʹɹϓϩύςΟͷ༷ʢੑ࣭ʣΛཧղ͢Δ
CSSに振り回されないためのスキル その2 CSSが効かないときは、検証ツールで確認してみる ˠݕূπʔϧͰͷσόοΫ
CSSに振り回されないためのスキル その3 疑問点はググる、些細な違和感もググる (インターネットで検索する) または、周りの有識者に質問をする
まとめ
CSSに振り回されないためのスキル 1. プロパティの仕様(性質)を理解する 2. 検証ツールでのデバック 3. 疑問点はググる、些細な違和感もググる →シンプルで綺麗なコードを素早くミスなく記述できるようになる →素早くミスの原因を突き⽌め解決できるようになる →1.
につながる ˞άάͬͨΒཁݕূ
時間があれば…
中央寄せでハマりやすいことは他にもある 例) ・inline-blockにmargin: auto;が効かない! ・inline-blockにvertical-alignが効かない! ・flexboxで中央寄せしたら中のコンテンツがはみ出した! (ブラウザによっては) …など
CSSはなんとなくでも書けるけど… ↓ CSSに振り回されて消費することはない ͪ͜Β͕ίϯτϩʔϧ͍ͯ͘͠ 1. プロパティの仕様(性質)を理解する 2. 検証ツールで検証できるようになる 3. 疑問点はググる(些細な違和感もググる)
⾏き当たりばったりでCSSを書いて、 CSSに振り回されて消耗するよりも
CSSでの中央寄せ ご清聴ありがとうございました https://www.facebook.com/rachicomsugar @rachicom_sugar https://rachicom.net