2022年のモダンCSS改

೥ͷϞμϯ$44վ

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

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

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

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

্Լࠨӈதԝἧ͑͸සग़͢Δ

ੲɿ্Լࠨӈதԝἧ͑͸ߦҎ্ඞཁͩͬͨ .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

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

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

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

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

ͳΊΒ͔ʹεΫϩʔϧ͢Δ

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

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

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

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

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

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

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

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

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

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

IUUQTDPEFQFOJPUPOLPUTVCPZQFO7X9.K#2

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

೥݄͝Ζʹ4BGBSJ͕ग़Δ IUUQTDBOJVTFDPN DPNQBSFTBGBSJ TBGBSJ DPNQBSF$BUTBMM 4BGBSJͰ࢖͑Δ৽͍͠΢Σϒٕज़

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

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

ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠ <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

ςʔϒϧϨΠΞ΢τͰɺݟग़͠Λ྆୺ἧ͍͑ͨ͠ ͜ͷՕॴΛ྆୺ἧ͍͑ͨ͠ <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

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

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

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

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

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

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

ैདྷɿφϏήʔγϣϯͷදࣔʹ͋Θͤͯ+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

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

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

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

·ͱΊ

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

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

Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢

2022年のモダンCSS改

2022年のモダンCSS改

More Decks by tonkotsuboy_com

Other Decks in Programming

Featured

Transcript