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

Transcript

1. 
   ೥ͷϞμϯ$44վ
   

   View Slide

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

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

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

9. 'MFYCPY͕ొ৔ͯ͠ߦʹͳͬͨ
   CSS
   .container {
   
   
   display: flex;
   
   
   justify-content: center;
   
   
   align-items: center;
   
   
   }
   ߦ
   

   View Slide

10. $44(SJEΛ࢖͑͹ߦ
    CSS
    .container {
    
    
    display: grid;
    
    
    place-content: center;
    
    
    }
    ߦ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. ੲɿ+BWB4DSJQUΛ࢖͏͔͠ͳ͔ͬͨ
    
    
    
    
    
    
    
    
    
    
    new SmoothScroll('a[href*="#"]');
    
    
    HTML
    JavaScript
    

    View Slide

16. ݱ୅ɿTDSPMMCFIBWJPS
    html {
    
    
    scroll-behavior: smooth;
    
    
    }
    CSS
    

    View Slide

17. View Slide

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

    View Slide

19. TDSPMMNBSHJOUPQͰεΫϩʔϧҐஔௐ੔
    header {
    
    
    height: 60px;
    
    
    }
    
    
    section {
    
    
    scroll-margin-top: 60px;
    
    
    }
    CSS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ݱ୅ɿCBDLESPQ
    fi
    MUFS
    .box {
    
    
    backdrop-filter: blur(8px);
    
    
    background-color: rgba(255, 255, 255, 0.5);
    
    
    }
    CSS
    ɾഎܠ৭͸ಁ໌͔൒ಁ໌ʹ͢Δ
    ɾ4BGBSJͷΈϕϯμʔϓϨϑΟοΫεXFCLMJU͕ඞཁ
    

    View Slide

27. IUUQTDPEFQFOJPUPOLPUTVCPZQFO7X9.K#2
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠
    
    
    
    
    
    
    ⽇時
    
    
    2022年07⽉26⽇
    
    
    
    
    
    
    
    
    会場
    
    
    福岡PayPayドーム
    
    
    
    
    
    
    
    
    参加費
    
    
    9,800円
    
    
    
    
    
    
    HTML
    

    View Slide

35. ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠
    ͜ͷՕॴΛ྆୺ἧ͍͑ͨ͠
    
    
    
    
    
    
    ⽇時
    
    
    2022年07⽉26⽇
    
    
    
    
    
    
    
    
    会場
    
    
    福岡PayPayドーム
    
    
    
    
    
    
    
    
    参加費
    
    
    9,800円
    
    
    
    
    
    
    HTML
    

    View Slide

36. UFYUBMJHOKVTUJGZͰ͸ͩΊ👎
    th {
    
    
    text-align: justify;
    
    
    }
    CSS
    ࠷ऴߦ΍ߦͷͱ͖͸྆୺ἧ͑ʹͳΒͳ͍
    

    View Slide

37. ैདྷɿ)5.-Ͱશ֯εϖʔεΛ͚͍ͭͯͨ
    ೔ɹ࣌
    
    ձɹ৔
    
    ࢀՃඅ
    ૷০ͷͨΊ͚ͩͷɺແବͳ)5.-👎
    HTML
    

    View Slide

38. ϛϥΠɿUFYUBMJHOMBTUϓϩύςΟΛ࢖͏
    th {
    
    
    text-align-last: justify;
    
    
    }
    ࠷ऴߦͷͱ͖ͷ഑ஔΛࢦఆ͢Δ$44
    KVTUJGZΛࢦఆ͢Ε͹ɺߦͷͱ͖΋྆୺ἧ͑ʹͳΔ👍
    CSS
    IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY89P&X
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. ैདྷɿφϏήʔγϣϯͷදࣔʹ͋Θͤͯ+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 Slide

45. ϛϥΠɿPWFSTDSPMMCFIBWJPSZϓϩύςΟ
    .navigation {
    
    
    overscroll-behavior-y: contain;
    
    
    }
    CSS
    

    View Slide

46. φϏήʔγϣϯΛ
    ࠷Լ෦Ҏ্ʹεΫϩʔϧͯ͠΋
    ϝΠϯཁૉ͸ͦͷ··
    .navigation {
    
    
    overscroll-behavior-y: contain;
    
    
    }
    CSS
    IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY:37[H
    

    View Slide

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

    View Slide

48. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide