Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナー向けコーディング講座
Search
Tetsuhiro Sato
June 25, 2014
Technology
4
1.8k
デザイナー向けコーディング講座
主に文書構造理解を進めるためのお話をしています。
そこからHTML5まで合わせてお話しています。
Tetsuhiro Sato
June 25, 2014
Tweet
Share
More Decks by Tetsuhiro Sato
See All by Tetsuhiro Sato
oremega
oremega
1
1.1k
初心者向けざっくりHTML/CSSコーディングハンズオン資料
oremega
2
2.4k
出来ると嬉しいWebデザイナーのコーディング
oremega
0
190
Other Decks in Technology
See All in Technology
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
10分でわかるfreeeのQA
freee
1
3.4k
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
490
物価高なラスベガスでの過ごし方
zakky
0
360
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
730
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.4k
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Docker and Python
trallard
40
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Visualization
eitanlees
144
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
How GitHub (no longer) Works
holman
311
140k
Why Our Code Smells
bkeepers
PRO
334
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
σβΠφʔ͚ ίʔσΟϯάߨ࠲
ΞδΣϯμ จॻߏ HTML5 CSS3 ࣮ફ
ΞδΣϯμ HTML5 CSS3 จॻߏ ࣮ફ
XFCϖʔδΛߏ͍ͯ͠Δͷ จॻ ը૾
XFCϖʔδΛߏ͍ͯ͠Δͷ จॻ ը૾ จॻߏ
XFCϖʔδΛߏ͍ͯ͠Δͷ จॻ ը૾ จॻߏ ίϯςΩετ
ίϯςΩετͬͯ จ຺ લޙؔ എܠ
ίϯςΩετͬͯ ͜Εݟग़͠ʁ ஈམͲ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ ͍͍ͷ͔ͳʁ
ίϯςΩετͬͯ ͜Εݟग़͠ʁ ஈམͲ͜·Ͱ ͩΖ͏͔ʁ ͲͷλάͰғΊ ͍͍ͷ͔ͳʁ ɾͦΕͧΕͷจষɾύʔπ͕ ɹαΠτͷͲ͏͍͏ׂΛ୲͍ͬͯΔ͔ Λཧղ͢Δɻ ɾ֤λάͷదͳ͍ํΛཧղ͢Δɻ
None
None
<div>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>
None
None
<div>! <h1>͜ͷจষͷλΠτϧ</h1>! <img src=“”>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>
ߟ͑ͯΈ͍ͯͩ͘͞ɻ
None
None
<div>! <div class=“wraper”>! <h1>͜ͷจষͷλΠτϧ</h1>! <p>ஈམ͕͜Μͳײ͡Ͱೖͬͯ͘Δɻ</p>! </div>! <img src=“”>! </div>
ߟ͑ͯΈ͍ͯͩ͘͞ɻ
None
None
<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.-̑ͱʁ ˙ϝλσʔλɾίϯςϯπ ˙ϑϩʔɾίϯςϯπ ˙ηΫγϣχϯάɾίϯςϯπ ˙ϔοσΟϯάɾίϯςϯπ ˙ϑϨʔδϯάɾίϯςϯπ ˙ΤϯϕοσΟουɾίϯςϯπ ˙ΠϯλϥΫςΟϒɾίϯςϯπ ˙ηΫγϣχϯάɾϧʔτ ίϯςϯπϞσϧ
)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
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>
None
<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/filters/ 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 ͰίʔσΟϯάΛͯ͠Β͍·͢ɻ
࣮ફ