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. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

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

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  3. ੲɿ্Լࠨӈதԝἧ͑͸ߦҎ্ඞཁͩͬͨ .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
  4. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

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

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  6. ݱ୅ɿCBDLESPQ fi MUFS .box { backdrop-filter: blur(8px); background-color: rgba(255, 255,

    255, 0.5); } CSS ɾഎܠ৭͸ಁ໌͔൒ಁ໌ʹ͢Δ ɾ4BGBSJͷΈϕϯμʔϓϨϑΟοΫεXFCLMJU͕ඞཁ
  7. w ೥Ҏલʙ w ߦͰ্Լࠨӈதԝἧ͑ w ೥݄ʙ w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w ೥݄೔ʢຊ೔ʣʙ

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

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

    w ͢ΓΨϥεදݱ w ೥݄ʙ w ߦςΩετͷ྆୺ἧ͑ w εΫϩʔϧͷ࿈ಈΛ๷͙
  10. ैདྷɿφϏήʔγϣϯͷදࣔʹ͋Θͤͯ+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
  11. w ߦͰ্Լࠨӈதԝἧ͑ w $44(SJE w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ w TDSPMMCFIBWJPSTNPPUI w ͢ΓΨϥεදݱ

    w CBDLESPQ fi MUFS w ߦςΩετͷ྆୺ἧ͑ w UFYUBMJHOMBTUKVTUJGZ w εΫϩʔϧͷ࿈ಈΛ๷͙ w PWFSTDSPMMCFIBWJPSZDPOUBJO