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

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

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

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

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

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

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

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

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

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

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

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

ߟ͑ͯΈ͍ͯͩ͘͞ɻ

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

ߟ͑ͯΈ͍ͯͩ͘͞ɻ

<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>

HTML5 CSS3 จॻߏ଄ ࣮ફ

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

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

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

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

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

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

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

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

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

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

ཁૉͷઆ໌ BTJEF ϝΠϯίϯςϯπ΄Ͳॏཁͳ΋ͷͰ͸ͳ͍͕ɺϖʔδ΍هࣄ ʹؔ࿈͍ͯ͠Δ಺༰Λ͜ΕͰғΉɻ΋͘͠͸ɺ༨ஊɾิ଍৘ ใͷηΫγϣϯͰ͋Δ͜ͱΛࣔ͢͜ͱ͕ग़དྷΔɻ αΠυόʔ΍ɺຊฤʹؔ܎ͷͳ͍આ໌Λͯ͠Δ෦෼ʹ͔ͭ͑ ·͢ɻ <p>Ξϯύϯʹ͍ͭͯͷ࿩͕͜͜Ͱ͍ͯ͠·͢ɻ</p>! <aside>! <h1>ΞϯύϯϚϯ஀ੜൿ࿩</h1>!
ɹ<p>࡞ऀͷ΍ͳ͔ͤͨ͠ઌੜ͸ɺਓؒ͸৯΂ΒΕͳ͍ͷ͕ Ұ൪ͭΒ͍ɺͦΕΛࣗ෼ͷ਎Λ…</p>! </aside>

ཁૉͷઆ໌ OBW φϏήʔγϣϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ ओཁͳφϏήʔγϣϯͱͳΔηΫγϣϯͷΈΛࣔ͠·͢ɻ <nav>! <ul>! <li><a href=“”>about</a></li>! <li><a href=“”>works</a></li>!
<li><a href=“”>contact/a></li>! </ul>! </nav>

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

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

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

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

ཁૉͷઆ໌ <figure id="kaeru">! ! <img src="" alt="༿ͬͺΛࡿ୅ΘΓʹ͢ΔΧΤϧ">! ! <figcaption>ΧΤϧͷੜଶ</figcaption>! </figure>

<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>

<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>

HTML5 CSS3 จॻߏ଄ ࣮ફ

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

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

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

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

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

&<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>

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

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

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

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

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

࣮ફ

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

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

Transcript

More Decks by Tetsuhiro Sato

Other Decks in Technology

Featured