Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2022年のモダンCSS改

 2022年のモダンCSS改

7/27(水)開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です
https://techfeed.io/events/techfeed-experts-night-20220727

スライド内のリンクがクリックできるPDF版はこちら
https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing

各デモURL
■ 上下左右中央揃え
https://codepen.io/tonkotsuboy/pen/qBbpYzj

■ スムーススクロール
https://codepen.io/tonkotsuboy/pen/NWyNMOo

■ すりガラス
https://codepen.io/tonkotsuboy/pen/VwXMjBQ

■ 1行テキストの中央揃え
https://codepen.io/tonkotsuboy/pen/xxWXoEw

■ スクロールの連動を防ぐ
https://codepen.io/tonkotsuboy/pen/xxYRVzg

tonkotsuboy_com

July 27, 2022
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript


  1. ೥ͷϞμϯ$44վ

    View full-size slide

  2. ϚωʔϑΥϫʔυϏδωεΧϯύχʔ

    ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕

    ݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ
    ࣛ໺૖ʢ͔ͷ͚ͨ͠ʣ
    !UPOLPUTVCPZ@DPN
    ௒ՄѪ͍ೣͱ฻Β͍ͯ͠Δͷ͕ಛ௃

    View full-size slide

  3. w ٕज़ධ࿦ࣾ+BWB4DSJQUίʔυϨγϐू
    w ೔ܦιϑτ΢ΣΞ೥݄߸ʮ+BWB4DSJQU࠷৽࢓༷&4ʯ
    w ೔ܦιϑτ΢ΣΞ೥݄߸ʮ࠷৽$44ʯ
    w ೔ܦιϑτ΢ΣΞ೥݄߸ʮදݱྗΛΞοϓ͢Δ8FCίʔσΟϯάज़ʯ
    w DPNJOHTPPO
    ࣥච͠·ͨ͠

    View full-size slide

  4. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  5. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  6. ߦͰ
    ্Լࠨӈதԝἧ͑
    01
    $44(SJE

    View full-size slide

  7. ্Լࠨӈதԝἧ͑͸සग़͢Δ

    View full-size slide

  8. ੲɿ্Լࠨӈதԝἧ͑͸ߦҎ্ඞཁͩͬͨ
    .container {


    position: relative;


    }


    .container .box {


    position: absolute;


    top: 0;


    left: 0;


    right: 0;


    bottom: 0;


    margin: auto;


    }
    .container {


    position: relative;


    }


    .container .box {


    position: absolute;


    left: calc(50% - 100px);


    top: calc(50% - 100px);


    }
    .container {


    position: relative;


    }


    .container .box {


    position: absolute;


    top: 50%;


    left: 50%;


    margin-top: -100px;


    margin-left: -100px;


    }
    ߦ ߦ ߦ
    CSS CSS CSS

    View full-size slide

  9. 'MFYCPY͕ొ৔ͯ͠ߦʹͳͬͨ
    CSS
    .container {


    display: flex;


    justify-content: center;


    align-items: center;


    }
    ߦ

    View full-size slide

  10. $44(SJEΛ࢖͑͹ߦ
    CSS
    .container {


    display: grid;


    place-content: center;


    }
    ߦ

    View full-size slide

  11. IUUQTDPEFQFOJPUPOLPUTVCPZQFOR#CQ:[K
    Πϥετ͸ը૾͸͔ͽͷΜελδΦΑΓLBQJOPODPN

    View full-size slide

  12. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  13. ΞϯΧʔϦϯΫͰ
    εϜʔεεΫϩʔϧ
    02
    TDSPMMCFIBWJPSϓϩύςΟͷTNPPUI஋

    View full-size slide

  14. ͳΊΒ͔ʹεΫϩʔϧ͢Δ

    View full-size slide

  15. ੲɿ+BWB4DSJQUΛ࢖͏͔͠ͳ͔ͬͨ










    new SmoothScroll('a[href*="#"]');


    HTML
    JavaScript

    View full-size slide

  16. ݱ୅ɿTDSPMMCFIBWJPS
    html {


    scroll-behavior: smooth;


    }
    CSS

    View full-size slide

  17. εΫϩʔϧޙɺݻఆϔομʔͱ͔ͿΔ
    ʮΦΧϐʹ͍ͭͯʯͷݟग़͕͠ɺ
    ϔομʔͱ͔Ϳ͍ͬͯΔ
    ͔ͿΒͳ͍Α͏ʹ͍ͨ͠
    👎
    👍

    View full-size slide

  18. TDSPMMNBSHJOUPQͰεΫϩʔϧҐஔௐ੔
    header {


    height: 60px;


    }


    section {


    scroll-margin-top: 60px;


    }
    CSS

    View full-size slide

  19. IUUQTDPEFQFOJPUPOLPUTVCPZQFO/8Z/.0P
    ݻఆϔομʔͱ͔ͿΒͣɺϐλοͱ׈Β͔ʹεΫϩʔϧ͢Δ

    View full-size slide

  20. શϞμϯϒϥ΢βରԠࡁ
    IUUQTDBOJVTFDPNDTTTDSPMMCFIBWJPS
    TDSPMMCFIBWJPS
    4BGBSJ͕೥݄ʹొ৔͠ɺ
    શϞμϯϒϥ΢β͕ରԠͨ͠ɻ
    TDSPMMNBSHJOUPQ͸೥ʹ
    શϞμϯϒϥ΢βରԠࡁΈ

    View full-size slide

  21. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  22. ͢ΓΨϥεදݱ
    03
    CBDLESPQ
    fi
    MUFSϓϩύςΟ

    View full-size slide

  23. ͢ΓΨϥεදݱ
    ௨ৗ ͢ΓΨϥεදݱ

    View full-size slide

  24. ੲɿ1IPUPTIPQͳͲͰը૾Λ࡞Δඞཁ͕͋ͬͨ

    View full-size slide

  25. ݱ୅ɿCBDLESPQ
    fi
    MUFS
    .box {


    backdrop-filter: blur(8px);


    background-color: rgba(255, 255, 255, 0.5);


    }
    CSS
    ɾഎܠ৭͸ಁ໌͔൒ಁ໌ʹ͢Δ
    ɾ4BGBSJͷΈϕϯμʔϓϨϑΟοΫεXFCLMJU͕ඞཁ

    View full-size slide

  26. IUUQTDPEFQFOJPUPOLPUTVCPZQFO7X9.K#2

    View full-size slide

  27. ຊ೔ɺ'JSFGPYͰରԠͨ͠💐
    IUUQTDBOJVTFDPNDTTCBDLESPQ
    fi
    MUFS

    View full-size slide

  28. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  29. ೥݄͝Ζʹ4BGBSJ͕ग़Δ
    IUUQTDBOJVTFDPN DPNQBSFTBGBSJ TBGBSJDPNQBSF$BUTBMM
    4BGBSJͰ࢖͑Δ৽͍͠΢Σϒٕज़

    View full-size slide

  30. 4BGBSJͷొ৔ʹΑΓɺ
    શϞμϯϒϥ΢βͰ࢖͑Δ
    ศར$44͕͋Δ

    View full-size slide

  31. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  32. ߦςΩετͷ྆୺ἧ͑
    04
    UFYUBMJHOMBTUϓϩύςΟ

    View full-size slide

  33. ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠






    ⽇時


    2022年07⽉26⽇








    会場


    福岡PayPayドーム








    参加費


    9,800円






    HTML

    View full-size slide

  34. ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠
    ͜ͷՕॴΛ྆୺ἧ͍͑ͨ͠






    ⽇時


    2022年07⽉26⽇








    会場


    福岡PayPayドーム








    参加費


    9,800円






    HTML

    View full-size slide

  35. UFYUBMJHOKVTUJGZͰ͸ͩΊ👎
    th {


    text-align: justify;


    }
    CSS
    ࠷ऴߦ΍ߦͷͱ͖͸྆୺ἧ͑ʹͳΒͳ͍

    View full-size slide

  36. ैདྷɿ)5.-Ͱશ֯εϖʔεΛ͚͍ͭͯͨ
    ೔ɹ࣌

    ձɹ৔

    ࢀՃඅ
    ૷০ͷͨΊ͚ͩͷɺແବͳ)5.-👎
    HTML

    View full-size slide

  37. ϛϥΠɿUFYUBMJHOMBTUϓϩύςΟΛ࢖͏
    th {


    text-align-last: justify;


    }
    ࠷ऴߦͷͱ͖ͷ഑ஔΛࢦఆ͢Δ$44
    KVTUJGZΛࢦఆ͢Ε͹ɺߦͷͱ͖΋྆୺ἧ͑ʹͳΔ👍
    CSS
    IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY89P&X

    View full-size slide

  38. 4BGBSJͰશϞμϯϒϥ΢βରԠ΁
    IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@UFYUBMJHOMBTU

    View full-size slide

  39. w ೥Ҏલʙ
    w ߦͰ্Լࠨӈதԝἧ͑
    w ೥݄ʙ
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w ೥݄೔ʢຊ೔ʣʙ
    w ͢ΓΨϥεදݱ
    w ೥݄ʙ
    w ߦςΩετͷ྆୺ἧ͑
    w εΫϩʔϧͷ࿈ಈΛ๷͙

    View full-size slide

  40. εΫϩʔϧͷ࿈ಈΛ๷͙
    05
    PWFSTDSPMMCFIBWJPSϓϩύςΟ

    View full-size slide

  41. ࠨଆͷφϏήʔγϣϯ͸
    QPTJUJPO
    fi
    YFEͰ഑ஔ͞Ε͍ͯΔɻ
    ࠷Լ෦Ҏ্ʹεΫϩʔϧ͢Δͱ
    ϝΠϯཁૉ΋ҰॹʹεΫϩʔϧ͢Δ

    View full-size slide

  42. ࠨଆͷφϏήʔγϣϯ͸
    QPTJUJPO
    fi
    YFEͰ഑ஔ͞Ε͍ͯΔɻ
    ࠷Լ෦Ҏ্ʹεΫϩʔϧ͢Δͱ
    ϝΠϯཁૉ΋ҰॹʹεΫϩʔϧ͢Δ

    View full-size slide

  43. ैདྷɿφϏήʔγϣϯͷදࣔʹ͋Θͤͯ+4੍ޚ
    // ハンバーガーボタンのクリック時、


    // bodyのoverflowをhiddenにしてスクロールを禁⽌させる


    document.querySelector(".menu-button").addEventListener("click", () => {


    document.body.style.overflow = "hidden";


    });


    // メニューを閉じるとき、


    // bodyのoverflowを元通りにしてスクロールを復活させる


    document.querySelector(".close-button").addEventListener("click", () => {


    document.body.style.overflow = "auto";


    });
    JavaScript

    View full-size slide

  44. ϛϥΠɿPWFSTDSPMMCFIBWJPSZϓϩύςΟ
    .navigation {


    overscroll-behavior-y: contain;


    }
    CSS

    View full-size slide

  45. φϏήʔγϣϯΛ
    ࠷Լ෦Ҏ্ʹεΫϩʔϧͯ͠΋
    ϝΠϯཁૉ͸ͦͷ··
    .navigation {


    overscroll-behavior-y: contain;


    }
    CSS
    IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY:37[H

    View full-size slide

  46. 4BGBSJͰશϞμϯϒϥ΢βରԠ΁
    IUUQTDBOJVTFDPNDTTPWFSTDSPMMCFIBWJPS

    View full-size slide

  47. w ߦͰ্Լࠨӈதԝἧ͑
    w $44(SJE
    w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
    w TDSPMMCFIBWJPSTNPPUI
    w ͢ΓΨϥεදݱ
    w CBDLESPQ
    fi
    MUFS
    w ߦςΩετͷ྆୺ἧ͑
    w UFYUBMJHOMBTUKVTUJGZ
    w εΫϩʔϧͷ࿈ಈΛ๷͙
    w PWFSTDSPMMCFIBWJPSZDPOUBJO

    View full-size slide

  48. ศརͳ$44͕
    ͨ͘͞Μੜ·Ε͍ͯΔͷͰ
    ָ͘͠ΩϟονΞοϓ͠·͠ΐ͏

    View full-size slide

  49. Thank y !
    @tonkotsuboy_com
    @matsu_eri
    5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢

    View full-size slide