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
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
440
JEP 480: Structured Concurrency
aya_ebata
0
130
Technical Writing Meetup vol.35
soracom
PRO
2
110
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
170
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
100
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
180
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
330
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
190
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
How to name files
jennybc
75
98k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Adopting Sorbet at Scale
ufuk
73
8.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Cult of Friendly URLs
andyhume
76
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
A designer walks into a library…
pauljervisheath
201
24k
Embracing the Ebb and Flow
colly
83
4.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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 ͰίʔσΟϯάΛͯ͠Β͍·͢ɻ
࣮ફ