WCAN2019春LT_ボツスライド1

WCAN2019春LT用に用意したけどボツになったスライドです。

Transcript

1. CSSでの中央寄せ 有限会社アップルップル 菅原彩 WCAN 2019 Spring
2. ⾃⼰紹介 w໊લɿੁݪ࠼
   wχοΫωʔϜɿγϡΨʔ
   w͓࢓ࣄɿϚʔΫΞοϓ
   wۈΊઌɿ༗ݶձࣾΞοϓϧοϓϧ
   w8FCྺɿ೥
   wझຯɿΞϘΧυΛछ͔ΒҭͯΔ͜ͱɺଽςϥϦ΢Ϝɺ ΤϏͷ͸͞ΈͰࢦΛπϚπϚ͞ΕΔ͜ͱ
3. 趣味
4. お話しすること CSSでの中央寄せを例に、 = CSSを効率的に書く上で必要なこと CSSに振り回されないためのスキル
5. 難易度 内容はあくまで基本的なこと
6. 話の流れ CSSでの中央寄せでハマりやすいところを紹介 • なぜ中央に寄らないのかを検証 • 解決⽅法 • そこから学べる「CSSに振り回されないためのスキル」
7. なぜ中央寄せなのか？ 私がマークアップを初めて⼀番はじめにつまずいたこと 中央寄せ
8. たかが中央寄せ？ 中央寄せは登⻯⾨       →リソースは私の体験 CSSを書く⼈なら必ず中央寄せに悩んだことがあるはず （中央寄せにハマった経験） 中央寄せにはCSSを書いていく上での基礎が詰まってる
9. ハマりやすいCSS中央寄せ 2選
10. ハマりやすいCSS中央寄せ その1 display:block; なのに margin: auto; が効かない <style> p { margin: auto; font-size: 80px; } </style> <div> <p>ΤϏ</p> </div> தԝʹدͬͯͳ͍ʜɻ
11. display:block; なのに margin: auto; が効かない 検証結果 ஬؟ڸ
12. display:block; なのに margin: auto; が効かない エビにwidthを指定 XJEUI
    QY
    Λࢦఆ → 中央寄せになった
13. CSSに振り回されないためのスキル その1 display: block; の性質 →初期値は親要素全体に広がる仕様 ʹɹϓϩύςΟͷ࢓༷ʢੑ࣭ʣΛཧղ͢Δ
14. CSSに振り回されないためのスキル その1 プロパティの仕様（性質）を理解していると？ • ⾏き当たりばったりなコード • 根拠を持ったコードを記述できる • 不要なコードがなくなる • CSSの記述ミスが減る ˠʮϓϩύςΟͷ࢓༷ʢੑ࣭ʣΛཧղʯ
15. ハマりやすい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>
16. ハマりやすいCSS中央寄せ その2 display: inline-block; に vertical-aline: middle; が効かない 理想の表⽰内容
17. ハマりやすいCSS中央寄せ その2 display: inline-block; に vertical-aline: middle; が効かない 実際のブラウザ表⽰内容 ‏ɹUFYUBMJHO
    DFOUFS
    ͸ޮ͍͍ͯΔ
    ‎ ‐
    WFSUJDBMBMJHO
    NJEEMF
    ͸ޮ͍͍ͯͳ͍
    ‑
18. display: inline-block; に vertical-aline: middle; が効かない 検証結果 ஬؟ڸ WFSUJDBMBMJHO
    NJEEMF
    Λ
    0'' →原因不明 ˠάάͬͯΈΔ
19. display: inline-block; に vertical-aline: middle; が効かない 検索キーワード：「inline-block vertical-align middle 中央寄せ」
20. display: inline-block; に vertical-aline: middle; が効かない 追加すべきスタイル ʻίέʼ
    MJOFIFJHIU
     ʻίέͷ਌ཁૉʼ
    MJOFIFJHIU
    QY
    GPOUTJ[F
    
21. vertical-alineは⾏間を基準にしたプロパティ vertical-aline: middle の特性 display: inline-block の特性 →vertical-aline: middle で 親要素のxの中央で揃える display: inline-blockは終了タグの後に改⾏を⼊れると余⽩が⼊る →親要素にfont:0;を指定して余⽩が⼊らないように ʹɹϓϩύςΟͷ࢓༷ʢੑ࣭ʣΛཧղ͢Δ
22. CSSに振り回されないためのスキル その2 CSSが効かないときは、検証ツールで確認してみる ˠ
    
    ݕূπʔϧͰͷσόοΫ
23. CSSに振り回されないためのスキル その3 疑問点はググる、些細な違和感もググる （インターネットで検索する） または、周りの有識者に質問をする
24. まとめ
25. CSSに振り回されないためのスキル 1. プロパティの仕様（性質）を理解する 2. 検証ツールでのデバック 3. 疑問点はググる、些細な違和感もググる →シンプルで綺麗なコードを素早くミスなく記述できるようになる →素早くミスの原因を突き⽌め解決できるようになる →1. につながる ˞άάͬͨΒཁݕূ
26. 時間があれば…
27. 中央寄せでハマりやすいことは他にもある 例） ・inline-blockにmargin: auto;が効かない！ ・inline-blockにvertical-alignが効かない！ ・flexboxで中央寄せしたら中のコンテンツがはみ出した！ （ブラウザによっては） …など
28. CSSはなんとなくでも書けるけど… ↓ CSSに振り回されて消費することはない ͪ͜Β͕ίϯτϩʔϧ͍ͯ͘͠ 1. プロパティの仕様（性質）を理解する 2. 検証ツールで検証できるようになる 3. 疑問点はググる（些細な違和感もググる） ⾏き当たりばったりでCSSを書いて、 CSSに振り回されて消耗するよりも
29. CSSでの中央寄せ ご清聴ありがとうございました https://www.facebook.com/rachicomsugar @rachicom_sugar https://rachicom.net