Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
WCAN2019春LT_ボツスライド1
sugar
April 15, 2019
Programming
0
560
WCAN2019春LT_ボツスライド1
WCAN2019春LT用に用意したけどボツになったスライドです。
sugar
April 15, 2019
Tweet
Share
More Decks by sugar
See All by sugar
sugawara
0
120
sugawara
0
170
sugawara
0
980
sugawara
0
560
sugawara
1
24
sugawara
0
25
sugawara
1
170
Other Decks in Programming
See All in Programming
grapecity_dev
0
180
tooppoo
0
160
pirosikick
4
950
grapecity_dev
0
180
emmaglorypraise
0
130
line_developers_tw2
0
4.7k
rarous
0
170
grapecity_dev
0
180
xrdnk
0
120
christianliebel
PRO
0
140
ianaya89
1
220
joergneumann
0
130
Featured
See All Featured
kastner
54
1.9k
paulrobertlloyd
72
1.4k
yeseniaperezcruz
302
31k
morganepeng
18
1.2k
chriscoyier
498
130k
edds
56
9.4k
carmenhchung
31
1.5k
kneath
219
15k
trishagee
24
2.5k
jakevdp
775
200k
michaelherold
225
8.5k
pedronauck
652
110k
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