WCAN2019春LT_ボツスライド1

E64f3643aecc58df71d40b42947d1bf6?s=47 sugar
April 15, 2019

 WCAN2019春LT_ボツスライド1

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

E64f3643aecc58df71d40b42947d1bf6?s=128

sugar

April 15, 2019
Tweet

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を指定 XJEUIQYΛࢦఆ → 中央寄せになった

  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; が効かない 実際のブラウザ表⽰内容 ‏ɹUFYUBMJHODFOUFS͸ޮ͍͍ͯΔ‎

    ‐ WFSUJDBMBMJHONJEEMF͸ޮ͍͍ͯͳ͍ ‑
  18. display: inline-block; に vertical-aline: middle; が効かない 検証結果 ஬؟ڸ WFSUJDBMBMJHONJEEMFΛ0'' →原因不明

    ˠάάͬͯΈΔ
  19. display: inline-block; に vertical-aline: middle; が効かない 検索キーワード:「inline-block vertical-align middle 中央寄せ」

  20. display: inline-block; に vertical-aline: middle; が効かない 追加すべきスタイル ʻίέʼ MJOFIFJHIU ʻίέͷ਌ཁૉʼ

    MJOFIFJHIUQY 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