Slide 1

Slide 1 text

σβΠφʔ޲͚ ίʔσΟϯάߨ࠲

Slide 2

Slide 2 text

ΞδΣϯμ จॻߏ଄ HTML5 CSS3 ࣮ફ

Slide 3

Slide 3 text

ΞδΣϯμ HTML5 CSS3 จॻߏ଄ ࣮ફ

Slide 4

Slide 4 text

XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾

Slide 5

Slide 5 text

XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾ จॻߏ଄

Slide 6

Slide 6 text

XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾ จॻߏ଄ ίϯςΩετ

Slide 7

Slide 7 text

ίϯςΩετͬͯ จ຺ લޙؔ܎ എܠ

Slide 8

Slide 8 text

ίϯςΩετͬͯ ͜Ε͸ݟग़͠ʁ ஈམ͸Ͳ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ͹ ͹͍͍ͷ͔ͳʁ

Slide 9

Slide 9 text

ίϯςΩετͬͯ ͜Ε͸ݟग़͠ʁ ஈམ͸Ͳ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ͹ ͹͍͍ͷ͔ͳʁ ɾͦΕͧΕͷจষɾύʔπ͕ ɹαΠτͷͲ͏͍͏໾ׂΛ୲͍ͬͯΔ͔ Λཧղ͢Δɻ ɾ֤λάͷద੾ͳ࢖͍ํΛཧղ͢Δɻ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

͜ͷจষͷλΠτϧ

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

͜ͷจষͷλΠτϧ

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

Slide 16

Slide 16 text

ߟ͑ͯΈ͍ͯͩ͘͞ɻ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

͜ͷจষͷλΠτϧ

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

Slide 20

Slide 20 text

ߟ͑ͯΈ͍ͯͩ͘͞ɻ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

͜ͷจষͷλΠτϧ

! !

!
ಛ௃1
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!
!
ಛ௃2
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!
!
ಛ௃3
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!

Slide 24

Slide 24 text

HTML5 CSS3 จॻߏ଄ ࣮ફ

Slide 25

Slide 25 text

)5.-̑ͱ͸ʁ ϚʔΫΞοϓ͚ͩʹݶఆͯ͠ݴ͏ͱ )5.-Λࠓ·ͰΑΓ΋ ߏ଄తʹ໌ࣔͰ͖Δॻ͖ํʹͳͬͨɻ ΞϓϦέʔγϣϯΛ࡞Δͷʹඞཁͳ৽ٕज़΋ՃΘ͍ͬͯΔɻ 8FC(- ϑΝΠϧ"1* 8FC4UPSBHF 8FC4PDLFUFUDʜ

Slide 26

Slide 26 text

)5.-̑ͱ͸ʁ ۩ମతʹ͸ Ξ΢τϥΠϯ ίϯςϯπϞσϧ

Slide 27

Slide 27 text

)5.-̑ͱ͸ʁ Ξ΢τϥΠϯ ֊૚ߏ଄Λ໌ࣔతʹ͠Ί͍ͯͯ͠ɺࠓ·ͰͷΑ͏ʹ҉໧తʹ ஈམΛ͖Ί͍ͯͨͷΛɺຊͷ໨࣍Λ࡞ΔΑ͏ʹจষதʹͰͯ ͘ΔষɾઅʢηΫγϣϯʣΛݟग़͠ʹ͢ΔΑ͏ʹηΫγϣϯ ΛཱͯΔΑ͏ʹ͠·ͨ͠ɻ

Slide 28

Slide 28 text

)5.-̑ͱ͸ʁ ηΫγϣϯΛཧղ͢Δ ͳͷͰɺ·ͣ͸

Slide 29

Slide 29 text

)5.-̑ͱ͸ʁ ͬͱɺͦͷલʹ λάͷΧςΰϦʔΛཧղ͠ͳ͍ͱ ͍͚ͳ͍Ͱ͢ɻ

Slide 30

Slide 30 text

)5.-̑ͱ͸ʁ ίϯςϯπϞσϧ ࠓ·ͰͷΠϯϥΠϯཁૉɾϒϩοΫཁૉͷߟ͑ํΛഇࢭʢج ຊతͳߟ͑ํ͸ಉ͡ʣ͠ɺΑΓࡉ෼Խ͞ΕͨʮΧςΰϦʔʯ ͕ίϯςϯπϞσϧͱͳ͍ͬͯ·͢ɻ

Slide 31

Slide 31 text

)5.-̑ͱ͸ʁ ˙ϝλσʔλɾίϯςϯπ ˙ϑϩʔɾίϯςϯπ ˙ηΫγϣχϯάɾίϯςϯπ ˙ϔοσΟϯάɾίϯςϯπ ˙ϑϨʔδϯάɾίϯςϯπ ˙ΤϯϕοσΟουɾίϯςϯπ ˙ΠϯλϥΫςΟϒɾίϯςϯπ ˙ηΫγϣχϯάɾϧʔτ ίϯςϯπϞσϧ

Slide 32

Slide 32 text

Slide 33

Slide 33 text

)5.-̑ͱ͸ʁ TFDUJPO BSUJDMF BTJEF OBW ηΫγϣχϯάɾίϯςϯπ

Slide 34

Slide 34 text

ཁૉͷઆ໌ TFDUJPO ηΫγϣϯͷҙຯ͸ɺ࢓੾Γɾ෦෼ɾઅɾ߲ͳͲͷҰͭͷմ ͱͳ͍ͬͯΔ΋ͷΛࢦ͠·͢ɻͦ͏͢Δ͜ͱͰɺΞ΢τϥΠ ϯΛ࡞Δ͜ͱ͕ग़དྷ·͢ɻߏ଄͕໌ࣔతʹͳΔͷͰɺݟग़͠ Λࣗ༝ʹ࡞ΕΔɻ !

section

ηΫγϣϯͷҙຯ͸ɺ࢓੾Γɾ෦෼ɾઅɾ߲ͳͲͷҰ ͭͷմͱͳ͍ͬͯΔ΋ͷΛࢦ͠·͢ɻͦ͏͢Δ͜ͱͰɺΞ΢ τϥΠϯΛ࡞Δ͜ͱ͕ग़དྷ·͢ɻ

Slide 35

Slide 35 text

ཁૉͷઆ໌ BSUJDMF BSUJDMFཁૉ͸ɺهࣄ΍ϖʔδͳͲࣗݾ׬݁ͨ͠΋ͷΛද͠ ·͢ɻͦͷ෦෼͚ͩΛऔΓग़ͯ͠ɺಠཱͨ͠ίϯςϯπͱ͠ ͯѻ͑Δ΋ʹ࢖͑·͢ɻΑ͘ݴΘΕΔͷ͸344ϑΟʔυͰಡ Έࠐ·ΕΔ̍ͭͷهࣄͰ͢ɻ ! --!

---

—

! --!

Slide 36

Slide 36 text

ཁૉͷઆ໌ BTJEF ϝΠϯίϯςϯπ΄Ͳॏཁͳ΋ͷͰ͸ͳ͍͕ɺϖʔδ΍هࣄ ʹؔ࿈͍ͯ͠Δ಺༰Λ͜ΕͰғΉɻ΋͘͠͸ɺ༨ஊɾิ଍৘ ใͷηΫγϣϯͰ͋Δ͜ͱΛࣔ͢͜ͱ͕ग़དྷΔɻ αΠυόʔ΍ɺຊฤʹؔ܎ͷͳ͍આ໌Λͯ͠Δ෦෼ʹ͔ͭ͑ ·͢ɻ

Ξϯύϯʹ͍ͭͯͷ࿩͕͜͜Ͱ͍ͯ͠·͢ɻ

! !

ΞϯύϯϚϯ஀ੜൿ࿩

! ɹ

࡞ऀͷ΍ͳ͔ͤͨ͠ઌੜ͸ɺਓؒ͸৯΂ΒΕͳ͍ͷ͕ Ұ൪ͭΒ͍ɺͦΕΛࣗ෼ͷ਎Λ…

Slide 37

Slide 37 text

ཁૉͷઆ໌ OBW φϏήʔγϣϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ ओཁͳφϏήʔγϣϯͱͳΔηΫγϣϯͷΈΛࣔ͠·͢ɻ !

about
works
contact/a>

Slide 38

Slide 38 text

IUNMIFBEUJUMFCBTFMJOLNFUBTUZMFTDSJQUOPTDSJQU CPEZTFDUJPOOBWBSUJDMFBTJEFIIIIII IFBEFSGPPUFSBEESFTTQISQSFCMPDLRVPUFPMVMMJ EMEUEEpHVSFpHDBQUJPOEJWBFNTUSPOHTNBMMT DJUFREGOBCCSUJNFDPEFWBSTBNQLCETVCTVQJC VNBSLSVCZSUSQCEJCEPTQBOCSXCSJOTEFMJNH JGSBNFFNCFEPCKFDUQBSBNWJEFPBVEJPTPVSDF USBDLDBOWBTNBQBSFBUBCMFDBQUJPODPMHSPVQDPM UCPEZUIFBEUGPPUUSUEUIGPSNpFMETFUMFHFOE MBCFMJOQVUCVUUPOTFMFDUEBUBMJTUPQUHSPVQPQUJPO UFYUBSFBLFZHFOPVUQVUQSPHSFTTNFUFSEFUBJMT TVNNBSZDPNNBOENFOV

Slide 39

Slide 39 text

Slide 40

Slide 40 text

ཁૉͷઆ໌ IFBEFS ΠϯτϩμΫγϣϯ΍φϏήʔγϣϯͷࢧԉͱͳΔάϧʔϓ Λද͠·͢ɻ׳शతʹ͸DMBTTlIFBEFSzͱ͍ͯͨ͠෦෼Λ ͜ͷλάͰࠩ͠ସ͑Δͱ੒Γཱͪ·͢ɻ

Slide 41

Slide 41 text

ཁૉͷઆ໌ GPPUFS ௚ۙͷηΫγϣϯΛϑολʔͰ͋Δ͜ͱΛ͠Ί͠·͢ɻஶ࡞ ݖ৘ใ΍࡞ऀͷ࿈བྷઌͳͲΛࡌͤΒΕ·͢ɻ׳शతʹ͸ DMBTTlGPPUFSzͱ͍ͯͨ͠෦෼Λ͜ͷλάͰࠩ͠ସ͑Δͱ ੒Γཱͪ·͢ɻ

●●●●●●●●●●

! !

●●●●●●●●●

! ! !

by࡞ऀ

! !

sato.tetsuhiro@aainc.co.jp

! !

Slide 42

Slide 42 text

ཁૉͷઆ໌ pHVSF ૠֆɺਤදɺࣸਅɺίʔυͳͲʹ஫ऍΛ෇͚ΔͨΊʹ࢖ΘΕ ·͢ pHDBQUJPO pHVSFͷதͰΩϟϓγϣϯΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ

Slide 43

Slide 43 text

ཁૉͷઆ໌ ! !

! ! ΧΤϧͷੜଶ!

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

͜ͷจষͷλΠτϧ

! !

!
ಛ௃1
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!
!
ಛ௃2
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!
!
ಛ௃3
! !
ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ
!

Slide 46

Slide 46 text

͜ͷจষͷλΠτϧ

! ! !

ಛ௃1

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

! ! !

ಛ௃2

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

! ! !

ಛ௃3

ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ

! !

Slide 47

Slide 47 text

HTML5 CSS3 จॻߏ଄ ࣮ફ

Slide 48

Slide 48 text

$44 ɾinear-gradient() ɾtext-shadow ɾbox-shadow ɾbox-sizing ɾborder-radius ɾbackground ɾtransition ɾanimation

Slide 49

Slide 49 text

$44 http://html5-demos.appspot.com/static/css/ﬁlters/ index.html ɾfilter

Slide 50

Slide 50 text

$44ηϨΫλ ɾE:nth-child(n) ɾE:nth-of-type(n) ɾE[foo=“bar”] ɾE[foo$="bar"] http://www.htmq.com/css3/index.shtml#pres

Slide 51

Slide 51 text

&OUIDIJME O ͋Δཁૉͷྡ઀͍ͯ͠ΔࢠཁૉΛ࠷ॳ͔Β਺͑ͯɺO൪໨ʹ ͋ͨΔཁૉʹελΠϧΛద༻͠·͢ɻ ol li:nth-child(2n) {! color: green;! } ol li:nth-child(odd) {! color: green;! } ol li:nth-child(even) {! color: green;! } ح਺ ۮ਺

Slide 52

Slide 52 text

&OUIPGUZQF O ͋Δཁૉͷྡ઀͍ͯ͠ΔࢠཁૉΛ࠷ॳ͔Β਺͑ͯɺO൪໨ʹ ͋ͨΔཁૉʹελΠϧΛద༻͠·͢ɻͨͩ͠ɺؒ઀͍ͯͯ͠ ΋ద༻͞Ε·͢ɻ http://zero.css-happylife.com/selectors/nth-of-type.shtml

Slide 53

Slide 53 text

& ͋ΔཁૉͷதͰɺࢦఆͨ͠ଐੑͷ஋ͱ׬શҰகͨ͠৔߹ʹε λΠϧ͕ద༻͞Ε·͢ɻ a[href=“http://aainc.co.jp/“] {! font-size: 200%;! color: red;! }

ΞϥΠυΞʔΩςΫπ
FIND!ͷLP

Slide 54

Slide 54 text

&& ͋ΔཁૉͷதͰɺࢦఆͨ͠ଐੑ ͷ஋ͱ׬શҰகͨ͠৔߹ʹελ Πϧ͕ద༻͞Ε·͢ɻ ଐੑηϨΫλ͸ɺࢦఆͨ͠ଐੑ ͷଐੑ஋͕ޙํҰகͨ͠৔߹ɺ ࢦఆͨ͠ཁૉʹελΠϧ͕ద༻ ͞Ε·͢ɻ a[href$=".pdf"] {! background-image: url(../img/item/ icon_pdf.gif);! }

Slide 55

Slide 55 text

& ଐੑηϨΫλ͸ɺࢦఆͨ͠ଐੑͷଐੑ஋͕ޙํҰகͨ͠৔߹ɺ ࢦఆͨ͠ཁૉʹελΠϧ͕ద༻͞Ε·͢ɻ a[href$=".pdf"] {! background-image: url(../img/item/icon_pdf.gif);! }

PDFϑΝΠϧ

Slide 56

Slide 56 text

ϒϥ΢β͕αϙʔτ͍ͯ͠Δ͔Ͳ͏͔ʁ http://fmbip.com/litmus/

Slide 57

Slide 57 text

$44 http://dev.w3.org/csswg/selectors4/ http://css4.biz/

Slide 58

Slide 58 text

࣮ફ HTML5+css3 ͰίʔσΟϯάΛͯ͠΋Β͍·͢ɻ

Slide 59

Slide 59 text

࣮ફ