Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
脳内マークアップのススメ
kobatatakayuki
February 18, 2017
Technology
1
730
脳内マークアップのススメ
2017-02-18 名古屋マークアップ勉強会
@kobatatakayuki - Takayuki Kobata
kobatatakayuki
February 18, 2017
Tweet
Share
More Decks by kobatatakayuki
See All by kobatatakayuki
Webアクセシビリティ脳のつくりかた
kobatatakayuki
0
680
アクセシビリティのあれこれ 〜まずは、意識することから始めよう〜
kobatatakayuki
0
680
ディレクターは「準備」と「調整」がすべて! 〜制作現場の「もやもや」を吹き飛ばそう〜
kobatatakayuki
0
250
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
300
Other Decks in Technology
See All in Technology
トランザクションスクリプトはどこから来たのか トランザクションスクリプトは何者か トランザクションスクリプトはどこへ行くのか #sekkeinight
a_suenami
7
2.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
8.8k
2022年度新卒技術研修「 ソフトウェアテスト」講義
excitejp
PRO
0
320
要約 "Add Live Text interaction to your app"
ushisantoasobu
0
110
ソフトウェアライセンス 2022 / Software License 2022
cybozuinsideout
PRO
1
750
はてなブログとチーム構成とスクラムのこの1年 #dmm_hatena
polamjag
0
1.1k
sleepagotchi
fuwasegu
1
1.4k
GeoLocationAnchor and MKTileOverlay
toyship
0
100
インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033
sorami
2
210
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
kyonmm
PRO
2
390
アーキテクチャを明文化して開発に臨んだ話
akihiyo76
0
230
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます!〜
miu_crescent
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
How to Ace a Technical Interview
jacobian
265
21k
The Invisible Customer
myddelton
110
11k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Producing Creativity
orderedlist
PRO
333
37k
Done Done
chrislema
174
14k
Web Components: a chance to create the future
zenorocha
303
40k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Automating Front-end Workflow
addyosmani
1351
200k
Transcript
ϚʔΫΞοϓͷεεϝ 2017-02-18 ໊ݹϚʔΫΞοϓษڧձ @kobatatakayuki - Takayuki Kobata
10ؒ
ࣗݾհ
None
খാλΧϢΩ גࣜձࣾΞφάϥϜϫʔΫε CKO / γχΞςΫχΧϧσΟϨΫλʔ
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
ීஈίʔσΟϯάΛ͞ΕͯΔ ํ͍Βͬ͠Ό͍·͔͢ʁ
ϚʔΫΞοϓͬͯฉ͍ͨ ͜ͱ͋Γ·͔͢ʁ
಄ͷதͰ จॻΛߏԽ ͍ͯ͘͜͠ͱ
͍ΘΏΔ ໝͰ͢w
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
ϝϦοτ • ಄ͷதͰίʔσΟϯά͕Ͱ͖ΔΑ͏ʹͳΔ • ͦΖΜͰݴ͏ɺ҉ࢉͱಉ͡ • จॻߏͷߟ͑ํ͕ʹͭ͘ • ͍ͭͰͲ͜ͰͰ͖Δʂ •
Ҋ݅Ͱ͑ɺઃܭਤʹͳΔ • ίʔσΟϯά࣌ͷޮԽʹܨ͕Δ • ৽ਓڭҭʹ࠷దʂ • ฐࣾͷݚमϓϩάϥϜʹΈࠐΜͰ·͢
४උ 8ׂɺ࣮ 2ׂ
ࣄલ४උʹͲΕ͚ͩ࣌ؒΛ ͑Δ͔͕ɺίʔσΟϯάʹ͓ ͚ΔޮԽͷ伴ͱͳΔ
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
HTML4.01࣌ͷϒϩοΫཁ ૉͱΠϯϥΠϯཁૉͷ֓೦Λ ͓ͬͯ͘
ਆ࡚ઌੜͷ͘͝؆୯ͳHTML ͷઆ໌ඞಡ ࢀߟɿ͘͝؆୯ͳHTMLͷઆ໌ -- ཁૉλΠϓҰཡʢ֎෦ϦϯΫʣ
None
DTDΛಡΊΔਓಡΜͰΈͯ ͍ͩ͘͞ɻ ࢀߟɿHTML 4 Document Type Definitionʢ֎෦ϦϯΫʣ
None
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
·ͣ7ͭͷཁૉ͚ͩʂ
1. ݟग़͠ʢϒϩοΫཁૉʣ 2. ςΩετʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ 3. ϦετʢϒϩοΫཁૉʣ 4. දΈʢϒϩοΫཁૉʣ 5. ը૾ʢΠϯϥΠϯཁૉʣ
6. ϦϯΫʢΠϯϥΠϯཁૉʣ 7. άϧʔϓԽʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ
ϚʔΫΞοϓύζϧͷΑ͏ ͳͷ
7ͭͷجຊߏཁૉΛ͍͜ ͳͤɺίϯϙʔωϯτઃܭ ʹཱͭ
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
1. ͓ؾʹೖΓͷαΠτΛΩϟϓνϟ͠ɺϓϦϯτΞτ 2. ϨΠΞτߏΛܬޫϖϯͰғ͍ͬͯ͘ 3. ֤ཁૉΛݟ͚ͭͯߏԽ͍ͯ͘͠ 4. id໊ɺclass໊Λ༩͍ͯ͘͠ 5. ը૾͕͋Δ߹ɺϑΝΠϧ໊Λهࡌ͍ͯ͘͠
6. font-sizeɺcolorɺmarginɺpaddingɺbackground͜ͷ࣌ ʹݕ౼͓ͯ͘͠ 7. ࣮ɺ͜Ε͕࣮ࡍʹίʔσΟϯά͢ΔࡍͷઃܭॻͱͳΔ 8. αΠτશମͰͳͯ͘ɺύʔπ͝ͱʹϚʔΫΞοϓ͢Δͷ OK 9. ͱʹ͔͘ɺΛ͜ͳ͢͜ͱ 10. ͜Ε͕ܦݧͱͳΓɺ࣮ફʹ׆͖͖ͯ·͢
ΞδΣϯμ • ϚʔΫΞοϓͱ • ϝϦοτ • ཁૉͷࢠؔΛΔ • HTML7ͭͷجຊߏཁૉ •
࣮ફํ๏ • ·ͱΊ
1. ϚʔΫΞοϓͱɺ಄ͷதͰจॻΛߏԽ ͍ͯ͘͜͠ͱ 2. HTML4.01࣌ͷϒϩοΫཁૉͱΠϯϥΠϯཁ ૉͷ֓೦Λ͓ͬͯ͘ 3. ·ͣ7ͭͷཁૉ͚ͩʂ 4. ࣮ફ͋ΔͷΈʂ
PR
ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/
Thank you! http://www.kobatatakayuki.com @kobatatakayuki