Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
ϑϦʔϥϯε ϞϯΩʔϨϯν࡚
4OPX.POLFZͷ։ൃൢച
.881'PSNΞυΦϯͷൢച
ΩλδϚλΧγ
!JOD
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
৴भ8PSE1SFTT.FFUVQJOদຊ
ϞϯΩʔϨϯν
ΩλδϚλΧγ!JOD
4OPX.POLFZʹ͓͚Δ
ࢲͷٕज़తภѪ
Slide 6
Slide 6 text
w ϨΠΞτϏϡʔίϯτϩʔϥʔ
w ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
w ΧελϚΠβʔϑϨʔϜϫʔΫ
w ςʔϚΞοϓσʔτ"1*
ΞδΣϯμ
Slide 7
Slide 7 text
ϨΠΞτϏϡʔίϯτϩʔϥʔ
Slide 8
Slide 8 text
IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
Slide 9
Slide 9 text
IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
Slide 10
Slide 10 text
IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
Slide 11
Slide 11 text
IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
Slide 12
Slide 12 text
IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
Slide 13
Slide 13 text
$POUSPMMFSMBZPVU
ϨΠΞτϑΝΠϧͷࢦఆ ΧϥϜӈαΠυόʔFUD
$POUSPMMFSSFOEFS
ϏϡʔϑΝΠϧͷࢦఆ DPOUFOUQPTUDPOUFOUQBHF
Slide 14
Slide 14 text
ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
Slide 15
Slide 15 text
HFU@UFNQMBUF@QBSU TMVH
OBNF
Slide 16
Slide 16 text
VTF'SBNFXPSLa)FMQFS
)FMQFSHFU@UFNQMBUF@QBSU TMVH
OBNF
WBST
Slide 17
Slide 17 text
VTF'SBNFXPSLa)FMQFS
)FMQFSHFU@UFNQMBUF@QBSU TMVH
OBNF
WBST
σʔλΛͤΔ
Slide 18
Slide 18 text
BEE@pMUFS
TOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@BSHT
GVODUJPO BSHT
\
<
TMVH TMVH
OBNF OBNF
WBST WBST
>
SFUVSOBSHT
^
Slide 19
Slide 19 text
BEE@pMUFS
bTOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@ TMVH `
GVODUJPO OBNF
WBST
\
EJWDMBTT lGPPz
͍͋͏͓͑
EJW
QIQ
^
Slide 20
Slide 20 text
ΧελϚΠβʔϑϨʔϜϫʔΫ
Slide 21
Slide 21 text
GVODUJPONZUIFNF@DVTUPNJ[F@SFHJTUFS XQ@DVTUPNJ[F
\
XQ@DVTUPNJ[F BEE@TFUUJOH
IFBEFS@UFYUDPMPS
<
bEFGBVMU` b`
>
XQ@DVTUPNJ[F BEE@TFDUJPO
bNZUIFNF@OFX@TFDUJPO@OBNF`
<
bUJUMF` @@ b7JTJCMF4FDUJPO/BNF
bNZUIFNF`
>
XQ@DVTUPNJ[F BEE@DPOUSPM
OFX81@$VTUPNJ[F@$PMPS@$POUSPM
XQ@DVTUPNJ[F
bIFBEFS@UFYUDPMPS`
<
bMBCFM` @@ b)FBEFS$PMPS`
bNZUIFNF
bTFDUJPO` bNZUIFNF@OFX@TFDUJPO@OBNF`
bTFUUJOHT` bIFBEFS@UFYUDPMPS`
>
^
BEE@BDUJPO bDVTUPNJ[F@SFHJTUFS`
bNZUIFNF@DVTUPNJ[F@SFHJTUFS`
Slide 22
Slide 22 text
VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa'SBNFXPSL
DPOUSPM 'SBNFXPSLDPOUSPM
bDPMPS`
bIFBEFS@UFYUDPMPS`
<
bMBCFM` @@ b)FBEFS$PMPS`
bNZUIFNF`
>
JG JT@DVTUPNJ[F@QSFWJFX
\
TFDUJPO 'SBNFXPSLTFDUJPO
bNZUIFNF@OFX@TFDUJPO@OBNF`
<
bUJUMF` @@ b7JTJCMF4FDUJPO/BNF`
bNZUIFNF`
>
DPOUSPM KPJO TFDUJPO
^
Slide 23
Slide 23 text
GVODUJPONZUIFNF@DVTUPNJ[F@DTT
\
IFBEFS@DPMPS HFU@UIFNF@NPE bIFBEFS@UFYUDPMPS`
b`
TUZMF
I\
DPMPS QIQFDIPIFBEFS@DPMPS
^
TUZMF
QIQ
^
BEE@BDUJPO bXQ@IFBE`
bNZUIFNF@DVTUPNJ[F@DTT`
Slide 24
Slide 24 text
VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
4UZMFSFHJTUFS
bI`
bDPMPSbHFU@UIFNF@NPE bIFBEFS@UFYUDPMPS`
Slide 25
Slide 25 text
MJHIUFO\
DPMPSMJHIUFO
^
EBSLFO\
DPMPSEBSLFO
^
SHCB\
DPMPSSHCB
^
Slide 26
Slide 26 text
VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa$PMPS
4UZMFSFHJTUFS
bMJHIUFO`
bDPMPSb$PMPSMJHIUFO b`
4UZMFSFHJTUFS
bEBSLFO`
bDPMPSb$PMPSEBSLFO b`
4UZMFSFHJTUFS
bSHCB`
bDPMPSb$PMPSSHCB b`
Slide 27
Slide 27 text
CUO\
CPSEFSDPMPS
^
QSJNBSZCUO\
!FYUFOECUO
^
Slide 28
Slide 28 text
VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
BEE@BDUJPO
bJOD@XQ@DVTUPNJ[FS@GSBNFXPSL@BGUFS@MPBE@TUZMFT`
GVODUJPO
\
4UZMFQMBDFIPMEFS
bCUO`
GVODUJPO TFMFDUPST
\
4UZMFSFHJTUFS TFMFDUPST
bCPSEFSDPMPS`
^
^
4UZMFFYUFOE bCUO`
<bQSJNBSZCUO`>
Slide 29
Slide 29 text
ςʔϚΞοϓσʔτ"1*
Slide 30
Slide 30 text
8PSE1SFTTςʔϚ
XPSEQSFTTPSH
ߋ৽͕͋Γ·͢Α
ߋ৽͠·͢
Ͱ࠷৽൛ͷ[JQΛͲ͏ͧ
࠷৽൛ͷ[JQΛ
Ξοϓϩʔυ
Slide 31
Slide 31 text
8PSE1SFTTςʔϚ
ߋ৽͕͋Γ·͢Α
ߋ৽͠·͢
Ͱ࠷৽൛ͷ[JQΛͲ͏ͧ
λάίϛοτ
ίϛοτ͕͔͋ͬͨΒ
ςετϏϧυΛཔΉ
ͳ͍͔Β
[JQΛϦϦʔε
(JU)VC
5SBWJT$*
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
8PSE1SFTTςʔϚ
ߋ৽͕͋Γ·͢Α
ߋ৽͠·͢
Ͱ࠷৽൛ͷ[JQΛͲ͏ͧ
λάίϛοτ
ίϛοτ͕͔͋ͬͨΒ
ςετϏϧυΛཔΉ
ͳ͍͔Β
[JQΛϦϦʔε
(JU)VC
5SBWJT$*
ࣗαʔόʔ
"1*ͷϨεϙϯεͱ
[JQΛอଘ
(JU)VCͷ[JQফ͢
Slide 35
Slide 35 text
͓·͚
Slide 36
Slide 36 text
MJOFIFJHIU
Slide 37
Slide 37 text
MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH
IBMGMFBEJOH
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
@function _vertical-rhythm($font-size, $coefficient: 1) {
$between-lines : _strip-unit(_rem2px($_between-lines));
$base-line-height: _strip-unit(_rem2px($_base-line-height));
$base-font-size : _strip-unit(_rem2px($_base-font-size));
$font-size : _strip-unit($font-size);
$line-height: $font-size + ($between-lines * $coefficient);
@if ($line-height < $font-size + ($between-lines * 2)) {
@return _vertical-rhythm($font-size, ($coefficient + 1));
} @else {
@if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
@return $line-height - ($between-lines / 2);
}
@return $line-height;
}
}
Slide 40
Slide 40 text
/* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */
@include _font-size-line-height(16px);
/* margin */
@include _margin-bottom(1);
/* padding */
@include _padding(.5);
Slide 41
Slide 41 text
No content