WCAN2019春LT_ボツスライド1

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