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
72
a-blog cms での簡単不正ログイン対策
sugawara
0
130
買切りとサブスクについて比較しながらライセンス適用方法とサブスクのいいところを伝える/ablogcms-zoomup202105
sugawara
0
22
a-blog cms を使ったサイト制作ガイドラインを作ってみた
sugawara
0
400
私の1年間とa-blog cmsだからできる簡単UI対応
sugawara
0
370
『CSSに不安を抱く私を W3C仕様が救ってくれた』WCAN 2019 Spring
sugawara
0
1.9k
WCAN2019春LT_ボツスライド2
sugawara
0
1.3k
工数表書き忘れ防止機能を作ってみた 〜 GASを使ったSlackへの自動通知 〜
sugawara
1
69
自己紹介LT
sugawara
0
73
Other Decks in Programming
See All in Programming
SODA - FACT BOOK
sodainc
1
300
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
160
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
260
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.7k
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
150
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
650
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
110
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
400
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
440
「兵法」から見る質とスピード
ickx
0
240
TypeScript LSP の今までとこれから
quramy
1
270
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Speed Design
sergeychernyshev
30
980
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Raft: Consensus for Rubyists
vanstee
137
7k
Site-Speed That Sticks
csswizardry
9
610
GitHub's CSS Performance
jonrohan
1031
460k
Six Lessons from altMBA
skipperchong
28
3.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
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