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.6k
出来ると嬉しいWebデザイナーのコーディング
oremega
0
200
Other Decks in Technology
See All in Technology
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
許しとアジャイル
jnuank
1
120
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
130
about #74462 go/token#FileSet
tomtwinkle
1
290
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
「Verify with Wallet API」を アプリに導入するために
hinakko
1
230
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
120
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
490
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
330
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Mobile First: as difficult as doing things right
swwweet
224
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
It's Worth the Effort
3n
187
28k
A Tale of Four Properties
chriscoyier
160
23k
Optimizing for Happiness
mojombo
379
70k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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 ͰίʔσΟϯάΛͯ͠Β͍·͢ɻ
࣮ફ