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

Ffb0af5bf5cb5a0b728ed94418a096f5?s=128

tonkotsuboy_com

July 27, 2022
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1.  ೥ͷϞμϯ$44վ

  2. ϚωʔϑΥϫʔυϏδωεΧϯύχʔ 
 ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕ 
 ݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ ࣛ໺૖ʢ͔ͷ͚ͨ͠ʣ !UPOLPUTVCPZ@DPN ௒ՄѪ͍ೣͱ฻Β͍ͯ͠Δͷ͕ಛ௃

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

    ࣥච͠·ͨ͠
  4. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

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

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  6. ߦͰ ্Լࠨӈதԝἧ͑ 01 $44(SJE

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

  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
  9. 'MFYCPY͕ొ৔ͯ͠ߦʹͳͬͨ CSS .container { display: flex; justify-content: center; align-items: center;

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

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

  12. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  13. ΞϯΧʔϦϯΫͰ εϜʔεεΫϩʔϧ 02 TDSPMMCFIBWJPSϓϩύςΟͷTNPPUI஋

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

  15. ੲɿ+BWB4DSJQUΛ࢖͏͔͠ͳ͔ͬͨ <head> <script src="jquery-3.6.0.js"></script> <script src="smooth-scroll.min.js"></script> </head> new SmoothScroll('a[href*="#"]'); HTML

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

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

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

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

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

  22. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  23. ͢ΓΨϥεදݱ 03 CBDLESPQ fi MUFSϓϩύςΟ

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

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

  26. ݱ୅ɿCBDLESPQ fi MUFS .box { backdrop-filter: blur(8px); background-color: rgba(255, 255,

    255, 0.5); } CSS ɾഎܠ৭͸ಁ໌͔൒ಁ໌ʹ͢Δ ɾ4BGBSJͷΈϕϯμʔϓϨϑΟοΫεXFCLMJU͕ඞཁ
  27. IUUQTDPEFQFOJPUPOLPUTVCPZQFO7X9.K#2

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

  29. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  30. ೥݄͝Ζʹ4BGBSJ͕ग़Δ IUUQTDBOJVTFDPN DPNQBSFTBGBSJ  TBGBSJ DPNQBSF$BUTBMM 4BGBSJͰ࢖͑Δ৽͍͠΢Σϒٕज़

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

  32. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  33. ߦςΩετͷ྆୺ἧ͑ 04 UFYUBMJHOMBTUϓϩύςΟ

  34. ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠ <table> <tr> <th>⽇時</th> <td>2022年07⽉26⽇</td> </tr> <tr> <th>会場</th> <td>福岡PayPayドーム</td> </tr>

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

    </tr> <tr> <th>参加費</th> <td>9,800円</td> </tr> </table> HTML
  36. UFYUBMJHOKVTUJGZͰ͸ͩΊ👎 th { text-align: justify; } CSS ࠷ऴߦ΍ߦͷͱ͖͸྆୺ἧ͑ʹͳΒͳ͍

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

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

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

  40. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  41. εΫϩʔϧͷ࿈ಈΛ๷͙ 05 PWFSTDSPMMCFIBWJPSϓϩύςΟ

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

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

  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
  45. ϛϥΠɿPWFSTDSPMMCFIBWJPSZϓϩύςΟ .navigation { overscroll-behavior-y: contain; } CSS

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

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

  48. ·ͱΊ

  49. w ߦͰ্Լࠨӈதԝἧ͑ w $44(SJE w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w TDSPMMCFIBWJPSTNPPUI w ͢ΓΨϥεදݱ

    w CBDLESPQ fi MUFS w ߦςΩετͷ྆୺ἧ͑ w UFYUBMJHOMBTUKVTUJGZ w εΫϩʔϧͷ࿈ಈΛ๷͙ w PWFSTDSPMMCFIBWJPSZDPOUBJO
  50. ศརͳ$44͕ ͨ͘͞Μੜ·Ε͍ͯΔͷͰ ָ͘͠ΩϟονΞοϓ͠·͠ΐ͏

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