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
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
The Rise of LLMOps
asei
7
1.6k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
150
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
Lambdaと地方とコミュニティ
miu_crescent
2
370
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
170
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
140
TypeScript、上達の瞬間
sadnessojisan
46
13k
強いチームと開発生産性
onk
PRO
34
11k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
GitHub's CSS Performance
jonrohan
1030
460k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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 ͰίʔσΟϯάΛͯ͠Β͍·͢ɻ
࣮ફ