Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Tetsuhiro Sato Tetsuhiro Sato
June 25, 2014
Technology
4
1.9k

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

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

Avatar for Tetsuhiro Sato

Tetsuhiro Sato

June 25, 2014
Tweet

More Decks by Tetsuhiro Sato

See All by Tetsuhiro Sato
oremega
Avatar for Tetsuhiro Sato oremega
1
1.1k
初心者向けざっくりHTML/CSSコーディングハンズオン資料
Avatar for Tetsuhiro Sato oremega
2
2.6k
出来ると嬉しいWebデザイナーのコーディング
Avatar for Tetsuhiro Sato oremega
0
210

Other Decks in Technology

See All in Technology
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
480
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.5k
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
580
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.6k
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
190
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
470
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
280
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
360
SchooでVue.js/Nuxtを技術選定している理由
Avatar for Okuto Oyama yamanoku
3
140

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
1
190
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
180
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Done Done
Avatar for chrislema chrislema
186
16k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k

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>[email protected]</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. ࣮ફ