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
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Practical Agentic AI in Software Engineering
uzyn
0
110
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
170
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
280
2025年夏 コーディングエージェントを統べる者
nwiizo
0
160
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
Language Update: Java
skrb
2
300
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
RailsConf 2023
tenderlove
30
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Visualization
eitanlees
148
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fireside Chat
paigeccino
39
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Thoughts on Productivity
jonyablonski
70
4.8k
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 ͰίʔσΟϯάΛͯ͠Β͍·͢ɻ
࣮ફ