Slide 1
Slide 1 text
ͷϞμϯ$44վ
Slide 2
Slide 2 text
ϚωʔϑΥϫʔυϏδωεΧϯύχʔ
ܦཧࡒϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦
݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ
ࣛʢ͔ͷ͚ͨ͠ʣ
!UPOLPUTVCPZ@DPN
ՄѪ͍ೣͱΒ͍ͯ͠Δͷ͕ಛ
Slide 3
Slide 3 text
w ٕज़ධࣾ+BWB4DSJQUίʔυϨγϐू
w ܦιϑτΣΞ݄߸ʮ+BWB4DSJQU࠷৽༷&4ʯ
w ܦιϑτΣΞ݄߸ʮ࠷৽$44ʯ
w ܦιϑτΣΞ݄߸ʮදݱྗΛΞοϓ͢Δ8FCίʔσΟϯάज़ʯ
w DPNJOHTPPO
ࣥච͠·ͨ͠
Slide 4
Slide 4 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 5
Slide 5 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 6
Slide 6 text
ߦͰ
্Լࠨӈதԝἧ͑
01
$44(SJE
Slide 7
Slide 7 text
্Լࠨӈதԝἧ͑සग़͢Δ
Slide 8
Slide 8 text
ੲɿ্Լࠨӈதԝἧ͑ߦҎ্ඞཁͩͬͨ
.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
Slide 9
Slide 9 text
'MFYCPY͕ొͯ͠ߦʹͳͬͨ
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
ߦ
Slide 10
Slide 10 text
$44(SJEΛ͑ߦ
CSS
.container {
display: grid;
place-content: center;
}
ߦ
Slide 11
Slide 11 text
IUUQTDPEFQFOJPUPOLPUTVCPZQFOR#CQ:[K
Πϥετը૾͔ͽͷΜελδΦΑΓLBQJOPODPN
Slide 12
Slide 12 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 13
Slide 13 text
ΞϯΧʔϦϯΫͰ
εϜʔεεΫϩʔϧ
02
TDSPMMCFIBWJPSϓϩύςΟͷTNPPUI
Slide 14
Slide 14 text
ͳΊΒ͔ʹεΫϩʔϧ͢Δ
Slide 15
Slide 15 text
ੲɿ+BWB4DSJQUΛ͏͔͠ͳ͔ͬͨ
new SmoothScroll('a[href*="#"]');
HTML
JavaScript
Slide 16
Slide 16 text
ݱɿTDSPMMCFIBWJPS
html {
scroll-behavior: smooth;
}
CSS
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
εΫϩʔϧޙɺݻఆϔομʔͱ͔ͿΔ
ʮΦΧϐʹ͍ͭͯʯͷݟग़͕͠ɺ
ϔομʔͱ͔Ϳ͍ͬͯΔ
͔ͿΒͳ͍Α͏ʹ͍ͨ͠
👎
👍
Slide 19
Slide 19 text
TDSPMMNBSHJOUPQͰεΫϩʔϧҐஔௐ
header {
height: 60px;
}
section {
scroll-margin-top: 60px;
}
CSS
Slide 20
Slide 20 text
IUUQTDPEFQFOJPUPOLPUTVCPZQFO/8Z/.0P
ݻఆϔομʔͱ͔ͿΒͣɺϐλοͱΒ͔ʹεΫϩʔϧ͢Δ
Slide 21
Slide 21 text
શϞμϯϒϥβରԠࡁ
IUUQTDBOJVTFDPNDTTTDSPMMCFIBWJPS
TDSPMMCFIBWJPS
4BGBSJ͕݄ʹొ͠ɺ
શϞμϯϒϥβ͕ରԠͨ͠ɻ
TDSPMMNBSHJOUPQʹ
શϞμϯϒϥβରԠࡁΈ
Slide 22
Slide 22 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 23
Slide 23 text
͢ΓΨϥεදݱ
03
CBDLESPQ
fi
MUFSϓϩύςΟ
Slide 24
Slide 24 text
͢ΓΨϥεදݱ
௨ৗ ͢ΓΨϥεදݱ
Slide 25
Slide 25 text
ੲɿ1IPUPTIPQͳͲͰը૾Λ࡞Δඞཁ͕͋ͬͨ
Slide 26
Slide 26 text
ݱɿCBDLESPQ
fi
MUFS
.box {
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.5);
}
CSS
ɾഎܠ৭ಁ໌͔ಁ໌ʹ͢Δ
ɾ4BGBSJͷΈϕϯμʔϓϨϑΟοΫεXFCLMJU͕ඞཁ
Slide 27
Slide 27 text
IUUQTDPEFQFOJPUPOLPUTVCPZQFO7X9.K#2
Slide 28
Slide 28 text
ຊɺ'JSFGPYͰରԠͨ͠💐
IUUQTDBOJVTFDPNDTTCBDLESPQ
fi
MUFS
Slide 29
Slide 29 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 30
Slide 30 text
݄͝Ζʹ4BGBSJ͕ग़Δ
IUUQTDBOJVTFDPN DPNQBSFTBGBSJ
TBGBSJDPNQBSF$BUTBMM
4BGBSJͰ͑Δ৽͍͠Σϒٕज़
Slide 31
Slide 31 text
4BGBSJͷొʹΑΓɺ
શϞμϯϒϥβͰ͑Δ
ศར$44͕͋Δ
Slide 32
Slide 32 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 33
Slide 33 text
ߦςΩετͷ྆ἧ͑
04
UFYUBMJHOMBTUϓϩύςΟ
Slide 34
Slide 34 text
ςʔϒϧϨΠΞτͰɺݟग़͠Λ྆ἧ͍͑ͨ͠
⽇時
2022年07⽉26⽇
会場
福岡PayPayドーム
参加費
9,800円
HTML
Slide 35
Slide 35 text
ςʔϒϧϨΠΞτͰɺݟग़͠Λ྆ἧ͍͑ͨ͠
͜ͷՕॴΛ྆ἧ͍͑ͨ͠
⽇時
2022年07⽉26⽇
会場
福岡PayPayドーム
参加費
9,800円
HTML
Slide 36
Slide 36 text
UFYUBMJHOKVTUJGZͰͩΊ👎
th {
text-align: justify;
}
CSS
࠷ऴߦߦͷͱ͖྆ἧ͑ʹͳΒͳ͍
Slide 37
Slide 37 text
ैདྷɿ)5.-Ͱશ֯εϖʔεΛ͚͍ͭͯͨ
ɹ࣌
ձɹ
ࢀՃඅ
০ͷͨΊ͚ͩͷɺແବͳ)5.-👎
HTML
Slide 38
Slide 38 text
ϛϥΠɿUFYUBMJHOMBTUϓϩύςΟΛ͏
th {
text-align-last: justify;
}
࠷ऴߦͷͱ͖ͷஔΛࢦఆ͢Δ$44
KVTUJGZΛࢦఆ͢Εɺߦͷͱ͖྆ἧ͑ʹͳΔ👍
CSS
IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY89P&X
Slide 39
Slide 39 text
4BGBSJͰશϞμϯϒϥβରԠ
IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@UFYUBMJHOMBTU
Slide 40
Slide 40 text
w Ҏલʙ
w ߦͰ্Լࠨӈதԝἧ͑
w ݄ʙ
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w ݄ʢຊʣʙ
w ͢ΓΨϥεදݱ
w ݄ʙ
w ߦςΩετͷ྆ἧ͑
w εΫϩʔϧͷ࿈ಈΛ͙
Slide 41
Slide 41 text
εΫϩʔϧͷ࿈ಈΛ͙
05
PWFSTDSPMMCFIBWJPSϓϩύςΟ
Slide 42
Slide 42 text
ࠨଆͷφϏήʔγϣϯ
QPTJUJPO
fi
YFEͰஔ͞Ε͍ͯΔɻ
࠷Լ෦Ҏ্ʹεΫϩʔϧ͢Δͱ
ϝΠϯཁૉҰॹʹεΫϩʔϧ͢Δ
Slide 43
Slide 43 text
ࠨଆͷφϏήʔγϣϯ
QPTJUJPO
fi
YFEͰஔ͞Ε͍ͯΔɻ
࠷Լ෦Ҏ্ʹεΫϩʔϧ͢Δͱ
ϝΠϯཁૉҰॹʹεΫϩʔϧ͢Δ
Slide 44
Slide 44 text
ैདྷɿφϏήʔγϣϯͷදࣔʹ͋Θͤͯ+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
Slide 45
Slide 45 text
ϛϥΠɿPWFSTDSPMMCFIBWJPSZϓϩύςΟ
.navigation {
overscroll-behavior-y: contain;
}
CSS
Slide 46
Slide 46 text
φϏήʔγϣϯΛ
࠷Լ෦Ҏ্ʹεΫϩʔϧͯ͠
ϝΠϯཁૉͦͷ··
.navigation {
overscroll-behavior-y: contain;
}
CSS
IUUQTDPEFQFOJPUPOLPUTVCPZQFOYY:37[H
Slide 47
Slide 47 text
4BGBSJͰશϞμϯϒϥβରԠ
IUUQTDBOJVTFDPNDTTPWFSTDSPMMCFIBWJPS
Slide 48
Slide 48 text
·ͱΊ
Slide 49
Slide 49 text
w ߦͰ্Լࠨӈதԝἧ͑
w $44(SJE
w ΞϯΧʔϦϯΫͰεϜʔεεΫϩʔϧ
w TDSPMMCFIBWJPSTNPPUI
w ͢ΓΨϥεදݱ
w CBDLESPQ
fi
MUFS
w ߦςΩετͷ྆ἧ͑
w UFYUBMJHOMBTUKVTUJGZ
w εΫϩʔϧͷ࿈ಈΛ͙
w PWFSTDSPMMCFIBWJPSZDPOUBJO
Slide 50
Slide 50 text
ศརͳ$44͕
ͨ͘͞Μੜ·Ε͍ͯΔͷͰ
ָ͘͠ΩϟονΞοϓ͠·͠ΐ͏
Slide 51
Slide 51 text
Thank y !
@tonkotsuboy_com
@matsu_eri
5XJUUFSͰ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢