デザイナー向けコーディング講座

主に文書構造理解を進めるためのお話をしています。
そこからHTML5まで合わせてお話しています。

Transcript

1. σβΠφʔ޲͚
   ίʔσΟϯάߨ࠲ 
2. ΞδΣϯμ จॻߏ଄ HTML5 CSS3 ࣮ફ
3. ΞδΣϯμ HTML5 CSS3 จॻߏ଄ ࣮ફ
4. XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾
5. XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾ จॻߏ଄
6. XFCϖʔδΛߏ੒͍ͯ͠Δ΋ͷ จॻ ը૾ จॻߏ଄ ίϯςΩετ
7. ίϯςΩετͬͯ จ຺ લޙؔ܎ എܠ
8. ίϯςΩετͬͯ ͜Ε͸ݟग़͠ʁ ஈམ͸Ͳ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ͹ ͹͍͍ͷ͔ͳʁ
9. ίϯςΩετͬͯ ͜Ε͸ݟग़͠ʁ ஈམ͸Ͳ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ͹ ͹͍͍ͷ͔ͳʁ ɾͦΕͧΕͷจষɾύʔπ͕
   ɹαΠτͷͲ͏͍͏໾ׂΛ୲͍ͬͯΔ͔
   
   
   
   Λཧղ͢Δɻ ɾ֤λάͷద੾ͳ࢖͍ํΛཧղ͢Δɻ
12. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>
15. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>
16. ߟ͑ͯΈ͍ͯͩ͘͞ɻ
19. <div>! <div class=“wraper”>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>! <img src=“”>! </div>
20. ߟ͑ͯΈ͍ͯͩ͘͞ɻ
23. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <div class=“wraper”>! ! <ul>! <li>! <h2>ಛ௃1</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! <li>! <h2>ಛ௃2</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! <li>! <h2>ಛ௃3</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! </ul>! </div>! </div>
24. HTML5 CSS3 จॻߏ଄ ࣮ફ
25. )5.-̑ͱ͸ʁ ϚʔΫΞοϓ͚ͩʹݶఆͯ͠ݴ͏ͱ )5.-Λࠓ·ͰΑΓ΋
    ߏ଄తʹ໌ࣔͰ͖Δॻ͖ํʹͳͬͨɻ ΞϓϦέʔγϣϯΛ࡞Δͷʹඞཁͳ৽ٕज़΋ՃΘ͍ͬͯΔɻ 8FC(- ϑΝΠϧ"1*
    8FC
    4UPSBHF 8FC4PDLFU
    FUDʜ
26. )5.-̑ͱ͸ʁ ۩ମతʹ͸ Ξ΢τϥΠϯ
    ίϯςϯπϞσϧ
27. )5.-̑ͱ͸ʁ Ξ΢τϥΠϯ ֊૚ߏ଄Λ໌ࣔతʹ͠Ί͍ͯͯ͠ɺࠓ·ͰͷΑ͏ʹ҉໧తʹ ஈམΛ͖Ί͍ͯͨͷΛɺຊͷ໨࣍Λ࡞ΔΑ͏ʹจষதʹͰͯ ͘ΔষɾઅʢηΫγϣϯʣΛݟग़͠ʹ͢ΔΑ͏ʹηΫγϣϯ ΛཱͯΔΑ͏ʹ͠·ͨ͠ɻ
28. )5.-̑ͱ͸ʁ ηΫγϣϯΛཧղ͢Δ ͳͷͰɺ·ͣ͸
29. )5.-̑ͱ͸ʁ ͬͱɺͦͷલʹ
    λάͷΧςΰϦʔΛཧղ͠ͳ͍ͱ
    ͍͚ͳ͍Ͱ͢ɻ
30. )5.-̑ͱ͸ʁ ίϯςϯπϞσϧ ࠓ·ͰͷΠϯϥΠϯཁૉɾϒϩοΫཁૉͷߟ͑ํΛഇࢭʢج ຊతͳߟ͑ํ͸ಉ͡ʣ͠ɺΑΓࡉ෼Խ͞ΕͨʮΧςΰϦʔʯ ͕ίϯςϯπϞσϧͱͳ͍ͬͯ·͢ɻ
31. )5.-̑ͱ͸ʁ ˙
    ϝλσʔλɾίϯςϯπ
    ˙
    ϑϩʔɾίϯςϯπ
    ˙
    ηΫγϣχϯάɾίϯςϯπ
    ˙
    ϔοσΟϯάɾίϯςϯπ
    ˙
    ϑϨʔδϯάɾίϯςϯπ
    ˙
    ΤϯϕοσΟουɾίϯςϯπ
    ˙
    ΠϯλϥΫςΟϒɾίϯςϯπ
    ˙
    ηΫγϣχϯάɾϧʔτ ίϯςϯπϞσϧ
32. )5.-̑ͱ͸ʁ ˙
    ϝλσʔλɾίϯςϯπ
    ˙
    ϑϩʔɾίϯςϯπ
    ˙
    ηΫγϣχϯάɾίϯςϯπ
    ˙
    ϔοσΟϯάɾίϯςϯπ
    ˙
    ϑϨʔδϯάɾίϯςϯπ
    ˙
    ΤϯϕοσΟουɾίϯςϯπ
    ˙
    ΠϯλϥΫςΟϒɾίϯςϯπ
    ˙
    ηΫγϣχϯάɾϧʔτ ίϯςϯπϞσϧ
33. )5.-̑ͱ͸ʁ TFDUJPO
    BSUJDMF
    BTJEF
    OBW ηΫγϣχϯάɾίϯςϯπ
34. ཁૉͷઆ໌ TFDUJPO ηΫγϣϯͷҙຯ͸ɺ࢓੾Γɾ෦෼ɾઅɾ߲ͳͲͷҰͭͷմ ͱͳ͍ͬͯΔ΋ͷΛࢦ͠·͢ɻͦ͏͢Δ͜ͱͰɺΞ΢τϥΠ ϯΛ࡞Δ͜ͱ͕ग़དྷ·͢ɻߏ଄͕໌ࣔతʹͳΔͷͰɺݟग़͠ Λࣗ༝ʹ࡞ΕΔɻ <section>! <h1>section</h1>! <p>ηΫγϣϯͷҙຯ͸ɺ࢓੾Γɾ෦෼ɾઅɾ߲ͳͲͷҰ ͭͷմͱͳ͍ͬͯΔ΋ͷΛࢦ͠·͢ɻͦ͏͢Δ͜ͱͰɺΞ΢ τϥΠϯΛ࡞Δ͜ͱ͕ग़དྷ·͢ɻ</p>! </section>
35. ཁૉͷઆ໌ BSUJDMF BSUJDMFཁૉ͸ɺهࣄ΍ϖʔδͳͲࣗݾ׬݁ͨ͠΋ͷΛද͠ ·͢ɻͦͷ෦෼͚ͩΛऔΓग़ͯ͠ɺಠཱͨ͠ίϯςϯπͱ͠ ͯѻ͑Δ΋ʹ࢖͑·͢ɻΑ͘ݴΘΕΔͷ͸344ϑΟʔυͰಡ Έࠐ·ΕΔ̍ͭͷهࣄͰ͢ɻ <article>! <header>--</header>! <section><h1>---</h1><p>---</p></section>! <section><h1>—</h1><p>—</p></section>! <footer>--</footer>! </article>
36. ཁૉͷઆ໌ BTJEF ϝΠϯίϯςϯπ΄Ͳॏཁͳ΋ͷͰ͸ͳ͍͕ɺϖʔδ΍هࣄ ʹؔ࿈͍ͯ͠Δ಺༰Λ͜ΕͰғΉɻ΋͘͠͸ɺ༨ஊɾิ଍৘ ใͷηΫγϣϯͰ͋Δ͜ͱΛࣔ͢͜ͱ͕ग़དྷΔɻ
    αΠυόʔ΍ɺຊฤʹؔ܎ͷͳ͍આ໌Λͯ͠Δ෦෼ʹ͔ͭ͑ ·͢ɻ <p>Ξϯύϯʹ͍ͭͯͷ࿩͕͜͜Ͱ͍ͯ͠·͢ɻ</p>! <aside>! <h1>ΞϯύϯϚϯ஀ੜൿ࿩</h1>! ɹ<p>࡞ऀͷ΍ͳ͔ͤͨ͠ઌੜ͸ɺਓؒ͸৯΂ΒΕͳ͍ͷ͕ Ұ൪ͭΒ͍ɺͦΕΛࣗ෼ͷ਎Λ…</p>! </aside>
37. ཁૉͷઆ໌ OBW φϏήʔγϣϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ
    ओཁͳφϏήʔγϣϯͱͳΔηΫγϣϯͷΈΛࣔ͠·͢ɻ <nav>! <ul>! <li><a href=“”>about</a></li>! <li><a href=“”>works</a></li>! <li><a href=“”>contact/a></li>! </ul>! </nav>
38. IUNM
    IFBE
    UJUMF
    CBTF
    MJOL
    NFUB
    TUZMF
    TDSJQU
    OPTDSJQU
    CPEZ
    TFDUJPO
    OBW
    BSUJDMF
    BTJEF
    I
    I
    I
    I
    I
    I
    IFBEFS
    GPPUFS
    BEESFTT
    Q
    IS
    QSF
    CMPDLRVPUF
    PM
    VM
    MJ
    EM
    EU
    EE
    pHVSF
    pHDBQUJPO
    EJW
    B
    FN
    TUSPOH
    TNBMM
    T
    DJUF
    R
    EGO
    BCCS
    UJNF
    DPEF
    WBS
    TBNQ
    LCE
    TVC
    TVQ
    J
    C
    V
    NBSL
    SVCZ
    SU
    SQ
    CEJ
    CEP
    TQBO
    CS
    XCS
    JOT
    EFM
    JNH
    JGSBNF
    FNCFE
    PCKFDU
    QBSBN
    WJEFP
    BVEJP
    TPVSDF
    USBDL
    DBOWBT
    NBQ
    BSFB
    UBCMF
    DBQUJPO
    DPMHSPVQ
    DPM
    UCPEZ
    UIFBE
    UGPPU
    US
    UE
    UI
    GPSN
    pFMETFU
    MFHFOE
    MBCFM
    JOQVU
    CVUUPO
    TFMFDU
    EBUBMJTU
    PQUHSPVQ
    PQUJPO
    UFYUBSFB
    LFZHFO
    PVUQVU
    QSPHSFTT
    NFUFS
    EFUBJMT
    TVNNBSZ
    DPNNBOE
    NFOV
39. IUNM
    IFBE
    UJUMF
    CBTF
    MJOL
    NFUB
    TUZMF
    TDSJQU
    OPTDSJQU
    CPEZ
    TFDUJPO
    OBW
    BSUJDMF
    BTJEF
    I
    I
    I
    I
    I
    I
    IFBEFS
    GPPUFS
    BEESFTT
    Q
    IS
    QSF
    CMPDLRVPUF
    PM
    VM
    MJ
    EM
    EU
    EE
    pHVSF
    pHDBQUJPO
    EJW
    B
    FN
    TUSPOH
    TNBMM
    T
    DJUF
    R
    EGO
    BCCS
    UJNF
    DPEF
    WBS
    TBNQ
    LCE
    TVC
    TVQ
    J
    C
    V
    NBSL
    SVCZ
    SU
    SQ
    CEJ
    CEP
    TQBO
    CS
    XCS
    JOT
    EFM
    JNH
    JGSBNF
    FNCFE
    PCKFDU
    QBSBN
    WJEFP
    BVEJP
    TPVSDF
    USBDL
    DBOWBT
    NBQ
    BSFB
    UBCMF
    DBQUJPO
    DPMHSPVQ
    DPM
    UCPEZ
    UIFBE
    UGPPU
    US
    UE
    UI
    GPSN
    pFMETFU
    MFHFOE
    MBCFM
    JOQVU
    CVUUPO
    TFMFDU
    EBUBMJTU
    PQUHSPVQ
    PQUJPO
    UFYUBSFB
    LFZHFO
    PVUQVU
    QSPHSFTT
    NFUFS
    EFUBJMT
    TVNNBSZ
    DPNNBOE
    NFOV
40. ཁૉͷઆ໌ IFBEFS ΠϯτϩμΫγϣϯ΍φϏήʔγϣϯͷࢧԉͱͳΔάϧʔϓ Λද͠·͢ɻ׳शతʹ͸DMBTTlIFBEFSzͱ͍ͯͨ͠෦෼Λ ͜ͷλάͰࠩ͠ସ͑Δͱ੒Γཱͪ·͢ɻ
41. ཁૉͷઆ໌ GPPUFS ௚ۙͷηΫγϣϯΛϑολʔͰ͋Δ͜ͱΛ͠Ί͠·͢ɻஶ࡞ ݖ৘ใ΍࡞ऀͷ࿈བྷઌͳͲΛࡌͤΒΕ·͢ɻ׳शతʹ͸ DMBTTlGPPUFSzͱ͍ͯͨ͠෦෼Λ͜ͷλάͰࠩ͠ସ͑Δͱ ੒Γཱͪ·͢ɻ <h1>••••••••••</h1>! <article>! <h1>•••••••••</h1>! <footer>! ! <p>by࡞ऀ</p>! ! <p>sato.tetsuhiro@aainc.co.jp</p>! </footer>! </article>
42. ཁૉͷઆ໌ pHVSF ૠֆɺਤදɺࣸਅɺίʔυͳͲʹ஫ऍΛ෇͚ΔͨΊʹ࢖ΘΕ ·͢ pHDBQUJPO pHVSFͷதͰΩϟϓγϣϯΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ
43. ཁૉͷઆ໌ <figure id="kaeru">! ! <img src="" alt="༿ͬͺΛࡿ୅ΘΓʹ͢ΔΧΤϧ">! ! <figcaption>ΧΤϧͷੜଶ</figcaption>! </figure>
45. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <div class=“wraper”>! ! <ul>! <li>! <h2>ಛ௃1</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! <li>! <h2>ಛ௃2</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! <li>! <h2>ಛ௃3</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </li>! </ul>! </div>! </div>
46. <article>! <h1>͜ͷจষͷλΠτϧ</h1>! <div class=“wraper”>! ! <section>! <h2>ಛ௃1</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </section>! <section>! <h2>ಛ௃2</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </section>! <section>! <h2>ಛ௃3</h2>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </section>! </div>! </article>
47. HTML5 CSS3 จॻߏ଄ ࣮ફ
48. $44 ɾinear-gradient() ɾtext-shadow ɾbox-shadow ɾbox-sizing ɾborder-radius ɾbackground ɾtransition ɾanimation
49. $44 http://html5-demos.appspot.com/static/css/filters/ index.html ɾfilter
50. $44ηϨΫλ ɾE:nth-child(n) ɾE:nth-of-type(n) ɾE[foo=“bar”] ɾE[foo$="bar"] http://www.htmq.com/css3/index.shtml#pres
51. &OUIDIJME O ͋Δཁૉͷྡ઀͍ͯ͠ΔࢠཁૉΛ࠷ॳ͔Β਺͑ͯɺO൪໨ʹ ͋ͨΔཁૉʹελΠϧΛద༻͠·͢ɻ ol li:nth-child(2n) {! color: green;! } ol li:nth-child(odd) {! color: green;! } ol li:nth-child(even) {! color: green;! } ح਺ ۮ਺
52. &OUIPGUZQF O ͋Δཁૉͷྡ઀͍ͯ͠ΔࢠཁૉΛ࠷ॳ͔Β਺͑ͯɺO൪໨ʹ ͋ͨΔཁૉʹελΠϧΛద༻͠·͢ɻͨͩ͠ɺؒ઀͍ͯͯ͠ ΋ద༻͞Ε·͢ɻ http://zero.css-happylife.com/selectors/nth-of-type.shtml
53. &<GPPlCBSz> ͋ΔཁૉͷதͰɺࢦఆͨ͠ଐੑͷ஋ͱ׬શҰகͨ͠৔߹ʹε λΠϧ͕ద༻͞Ε·͢ɻ a[href=“http://aainc.co.jp/“] {! font-size: 200%;! color: red;! } <ul>! <li><a href="http://aainc.co.jp/">ΞϥΠυΞʔΩςΫπ</a></li>! <li><a href=“http://aainc.co.jp/service/find”>FIND!ͷLP</a></li>! </ul>
54. &<GPPlCBSz>&<GPPlCBS> ͋ΔཁૉͷதͰɺࢦఆͨ͠ଐੑ ͷ஋ͱ׬શҰகͨ͠৔߹ʹελ Πϧ͕ద༻͞Ε·͢ɻ ଐੑηϨΫλ͸ɺࢦఆͨ͠ଐੑ ͷଐੑ஋͕ޙํҰகͨ͠৔߹ɺ ࢦఆͨ͠ཁૉʹελΠϧ͕ద༻ ͞Ε·͢ɻ a[href$=".pdf"] {! background-image: url(../img/item/ icon_pdf.gif);! }
55. &<GPPlCBS> ଐੑηϨΫλ͸ɺࢦఆͨ͠ଐੑͷଐੑ஋͕ޙํҰகͨ͠৔߹ɺ ࢦఆͨ͠ཁૉʹελΠϧ͕ద༻͞Ε·͢ɻ a[href$=".pdf"] {! background-image: url(../img/item/icon_pdf.gif);! } <ul>! <li><a href=“hoge.pdf">PDFϑΝΠϧ</a></li>! </ul>
56. ϒϥ΢β͕αϙʔτ͍ͯ͠Δ͔Ͳ͏͔ʁ http://fmbip.com/litmus/
57. $44 http://dev.w3.org/csswg/selectors4/ http://css4.biz/
58. ࣮ફ HTML5+css3 ͰίʔσΟϯάΛͯ͠΋Β͍·͢ɻ
59. ࣮ફ