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

91505854a53b959ae0038887e1e7a657?s=47 Tetsuhiro Sato
June 25, 2014
Technology
4
1.5k

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

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

91505854a53b959ae0038887e1e7a657?s=128

Tetsuhiro Sato

June 25, 2014
Tweet

More Decks by Tetsuhiro Sato

See All by Tetsuhiro Sato
91505854a53b959ae0038887e1e7a657?s=48 oremega
1
620
91505854a53b959ae0038887e1e7a657?s=48 oremega
1
1.9k
91505854a53b959ae0038887e1e7a657?s=48 oremega
0
140

Other Decks in Technology

See All in Technology
4bbea750321e2a5f5611cca47b5a8788?s=48 sasaguchi
2
1.1k
C265a1a7dadb2713ff2262025e91d133?s=48 akabekobeko
0
440
2ec42cd8400b1e8e5ba125936c1d27e9?s=48 smiyaza
0
190
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
190
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
3
1.2k
Ae03eb47606f4e0125268d39f8aebfad?s=48 ymmt2005
2
840
1817c3d5995710d04506a17cc9b5c9ba?s=48 runrunsan
1
210
D5554c0703d71b3f813e658020267954?s=48 masudas75
1
310
98234c645fe8c935edc0fec0186d28b8?s=48 garethr
1
660
7f85cb378a925f12345bf23ebf29977d?s=48 misapipipink
0
110
Ea29e2b19d11b48f867ae71d6a6de5df?s=48 opelab
1
230
0102ef8594b9d3a74f45dfd5daa5ede4?s=48 yskmjp
0
200

Featured

See All Featured
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
260k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
11
3.9k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
283
18k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
27
890
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.6k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.4k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
297
31k

Transcript

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

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

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

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

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

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

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

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

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

  10. None
  11. None

  12. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>

  13. None
  14. None

  15. <div>! <h1>͜ͷจষͷλΠτϧ</h1>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>

  16. ߟ͑ͯΈ͍ͯͩ͘͞ɻ

  17. None
  18. None

  19. <div>! <div class=“wraper”>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>! <img src=“”>! </div>

  20. ߟ͑ͯΈ͍ͯͩ͘͞ɻ

  21. None
  22. None

  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* 8FC4UPSBHF 8FC4PDLFUFUDʜ

  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. IUNMIFBEUJUMFCBTFMJOLNFUBTUZMFTDSJQUOPTDSJQU CPEZTFDUJPOOBWBSUJDMFBTJEFIIIIII IFBEFSGPPUFSBEESFTTQISQSFCMPDLRVPUFPMVMMJ EMEUEEpHVSFpHDBQUJPOEJWBFNTUSPOHTNBMMT DJUFREGOBCCSUJNFDPEFWBSTBNQLCETVCTVQJC VNBSLSVCZSUSQCEJCEPTQBOCSXCSJOTEFMJNH JGSBNFFNCFEPCKFDUQBSBNWJEFPBVEJPTPVSDF USBDLDBOWBTNBQBSFBUBCMFDBQUJPODPMHSPVQDPM UCPEZUIFBEUGPPUUSUEUIGPSNpFMETFUMFHFOE MBCFMJOQVUCVUUPOTFMFDUEBUBMJTUPQUHSPVQPQUJPO

    UFYUBSFBLFZHFOPVUQVUQSPHSFTTNFUFSEFUBJMT TVNNBSZDPNNBOENFOV

  39. IUNMIFBEUJUMFCBTFMJOLNFUBTUZMFTDSJQUOPTDSJQU CPEZTFDUJPOOBWBSUJDMFBTJEFIIIIII IFBEFSGPPUFSBEESFTTQISQSFCMPDLRVPUFPMVMMJ EMEUEEpHVSFpHDBQUJPOEJWBFNTUSPOHTNBMMT DJUFREGOBCCSUJNFDPEFWBSTBNQLCETVCTVQJC VNBSLSVCZSUSQCEJCEPTQBOCSXCSJOTEFMJNH JGSBNFFNCFEPCKFDUQBSBNWJEFPBVEJPTPVSDF USBDLDBOWBTNBQBSFBUBCMFDBQUJPODPMHSPVQDPM UCPEZUIFBEUGPPUUSUEUIGPSNpFMETFUMFHFOE MBCFMJOQVUCVUUPOTFMFDUEBUBMJTUPQUHSPVQPQUJPO

    UFYUBSFBLFZHFOPVUQVUQSPHSFTTNFUFSEFUBJMT TVNNBSZDPNNBOENFOV

  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>

  44. None

  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. ࣮ફ