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.3k
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
21
a-blog cms での簡単不正ログイン対策
sugawara
0
86
買切りとサブスクについて比較しながらライセンス適用方法とサブスクのいいところを伝える/ablogcms-zoomup202105
sugawara
0
17
a-blog cms を使ったサイト制作ガイドラインを作ってみた
sugawara
0
260
私の1年間とa-blog cmsだからできる簡単UI対応
sugawara
0
270
『CSSに不安を抱く私を W3C仕様が救ってくれた』WCAN 2019 Spring
sugawara
0
1.8k
WCAN2019春LT_ボツスライド2
sugawara
0
1.3k
工数表書き忘れ防止機能を作ってみた 〜 GASを使ったSlackへの自動通知 〜
sugawara
1
49
自己紹介LT
sugawara
0
41
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
320
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Site Reliability Engineering for GMO
pyama86
7
1k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
エンターテイメント業界で利用されるAWS
demuyan
0
210
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
180
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
760
Elm 0.19.0 Changes
bkuhlmann
0
490
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
840
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
How to name files
jennybc
64
93k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
The Pragmatic Product Professional
lauravandoore
24
5.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
What's in a price? How to price your products and services
michaelherold
237
11k
Building Your Own Lightsaber
phodgson
98
5.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Faster Mobile Websites
deanohume
297
30k
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