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
芸大 - 情報編集(Web) - HTML入門
Search
Atsushi Tadokoro
April 17, 2014
Technology
0
800
芸大 - 情報編集(Web) - HTML入門
Atsushi Tadokoro
April 17, 2014
Tweet
Share
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.6k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
400
Processing.jsによるデータの可視化と生成的表現
tado
1
1.6k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
330
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.2k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.4k
TumblrでWebサイトを作成
tado
0
680
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2k
Other Decks in Technology
See All in Technology
やっていきテスト
k6s4i53rx
0
160
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
1
120
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
生成AIサービスPanorama AIご説明資料
sdt
0
300
SREsのためのSRE定着ガイド
netmarkjp
10
1.5k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
220
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
11k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
AMLD 2024 - Build Your Own GPT
donlelef
1
260
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
1.6k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
A better future with KSS
kneath
230
16k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
The Mythical Team-Month
searls
214
42k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Atom: Resistance is Futile
akmur
258
25k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Transcript
ใฤू XFC ୈճɿ)5.-ೖ ݄ ౦ژज़େֶܳज़ใηϯλʔ ".$ ୲ɿాॴ३
888Λࢧ͑Δͭͷ͘͠Έ 63- )551 )5.-
888ͷ͘͠Έ ‣ ࣗͷ1$Ͱ8FCϖʔδΛݟ͍ͯΔͱ͖Կ͕ى͍ͬͯΔͷ͔ ! ‣ Ӿཡ͍ͨ͠8FCϖʔδͷΞυϨεΛೖྗ ‣ ྫɿIUUQBNDHFJEBJBDKQHVJEFBCPVU
888ͷ͘͠Έ ‣ 8FCϒϥβɺΞυϨε͔ΒαʔόͷॴΛ୳ͩ͢͠ ‣ lIUUQBNDHFJEBJBDKQzͷ෦͕͜Εʹ૬ IUUQBNDHFJEBJBDKQ
888ͷ͘͠Έ ‣ ΞυϨεͷΓͷ෦͔Βɺαʔόͷ֘σʔλΛಛఆ ‣ lHVJEFBCPVUzͷ෦͕͜Εʹ૬ /guide/about
888ͷ͘͠Έ ‣ ࣗͷPCͰWebϖʔδΛݟ͍ͯΔͱ͖ɺԿ͕ى͍ͬͯΔͷ͔ ‣ WebϖʔδͷσʔλΛαʔό͔ΒखݩͷPCʹૹ৴
888ͷ͘͠Έ ‣ ࣗͷPCͰWebϖʔδΛݟ͍ͯΔͱ͖ɺԿ͕ى͍ͬͯΔͷ͔ ‣ PCଆͰड৴ͨ͠ใ͔ΒɺWebϖʔδΛੜ͠දࣔ
888Λࢧ͑ΔͭͷΈ ‣ 63- ͘͠63* ‣ 6OJGPSN3FTPVSDF-PDBUPS ‣ ωοτϫʔΫ্ͷใΛҰҙʹಛఆ͢ΔΞυϨεࢦఆํ๏ !
‣ )551 ‣ )ZQFS5FYU5SBOTGFS1SPUPDPM ‣ ίϯϐϡʔλಉ͕࢜ใΛΓͱΓ͢Δϧʔϧ ! ‣ )5.- ‣ )ZQFS5FYU.BSLVQ-BOHVBHF ‣ ڥʹ͔͔ΘΓͳ͘888Λهड़͢ΔͨΊͷจॻهड़ݴޠ
888ͷ͘͠Έ ‣ ઌ΄ͲͷྫͰ͍͏ͱ ‣ ͭͷ͘͠Έ 63- )551 )5.- ʹ͍ͭͯཧղ͢Δ )551
)551 )5.- URL
)5.-ͱ
)5.-ͱ ‣ ࠓͭͷΈͷͻͱͭ)5.-Λ࣮ࡍʹॻ͍͍͖ͯ·͢ ! ‣ )5.- )ZQFSUFYU.BSLVQ-BOHVBHF ͱԿ͔ ‣
ͦΕͧΕͷύʔπ͝ͱʹҙຯΛཧղ͢Δ
)5.-ͱ ‣ )ZQFS5FYU ! ‣ ʮςΩετΛӽ͑Δʯ ‣ ෳͷจॻΛ૬ޓʹؔ࿈͚ɺ݁ͼ͚ΔΈ
)5.-ͱ ‣ .BSLVQ ϚʔΫΞοϓ ! ‣ จॻͷதʹҹ ϚʔΫ Λ͚͍ͯ͘͜ͱ
‣ )5.-ͰɺจॻͷߏΛϚʔΫΞοϓ͢Δ ‣ ࠓͷतۀ༰ͷϝΠϯ
)5.-ͱ ‣ -BOHVBHF ‣ ݴޠ
)5.-ͱ ‣ ͭ·Γ)5.-ͱ ‣ ʮจॻͷཁૉʹҹ͕͚ͭΒΕͨɺϋΠύʔςΩετΛهड़ ͢ΔͨΊͷݴޠʯ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ྫ͑ҎԼͷΑ͏ͳจॻ͕͋ͬͨͱ͢Δ ݄ ӡಈձ࣮ߦҕһձ ! ӡಈձ։࠵ͷ͓Βͤ ! དྷΔɺ݄ʹୈճӡಈձΛڍߦ͍ͨ͠·͢ɻօ༷ʹ͓͔Ε·ͯ͠ ɺ;Δͬͯ͝ࢀՃ͍ͩ͘͞·͢Α͏͓ئ͍͍ͨ͠·͢ɻ
! ͳ͓Ӎఱͷ߹ཌिʹԆظ͠·͢ɻதࢭͷࡍͷ࿈བྷɺϗʔϜϖʔδ ʹهࡌ͠·͢ͷͰɺͦͪΒΛ͝ࢀর͍ͩ͘͞ɻ ! ˓˓େֶººֶ෦ IUUQIPHFDPN UFM
݄ ӡಈձ࣮ߦҕһձ ! ӡಈձ։࠵ͷ͓Βͤ ! དྷΔɺ݄ʹୈճӡಈձΛڍߦ͍ͨ͠·͢ɻօ༷ʹ͓͔Ε·ͯ͠ ɺ;Δͬͯ͝ࢀՃ͍ͩ͘͞·͢Α͏͓ئ͍͍ͨ͠·͢ɻ ! ͳ͓Ӎఱͷ߹ཌिʹԆظ͠·͢ɻதࢭͷࡍͷ࿈བྷɺϗʔϜϖʔδ ʹهࡌ͠·͢ͷͰɺͦͪΒΛ͝ࢀর͍ͩ͘͞ɻ
! ˓˓େֶººֶ෦ IUUQIPHFDPN UFM ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ͜ͷจॻͷߏ ϔομʔ େݟग़͠ ஈམ ஈམ ϑολʔ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ )5.-Λॻ͘ͱ͍͏͜ͱɺจॻͷߏΛॻ͘ͱ͍͏͜ͱ ! ‣ จॻͷͲͷ෦͕Ͳͷཁૉͳͷ͔Λҹ ϚʔΫΞοϓ ʹ Αͬͯࣔ͢ ‣
λΠτϧ ‣ ݟग़͠ ‣ ஈམ ‣ Ҿ༻ ‣ ϦετFUD
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ Ͳ͔͜ΒͲ͜·Ͱ͕ͦͷཁૉͳͷ͔ΛʮλάʯͱݺΕΔ ҹͰهड़͍ͯ͘͠ ‣ จॻͷ෦͝ͱͷҙຯʹԠͯ͡ɺλάΛదʹ͍ͬͯ͘͜ ͱ͕ɺ)5.-࡞ͷओͳ࡞ۀͱͳΔ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ʮλάʯͱݺΕΔҹΛهड़͍ͯ͘͠ ! ‣ هड़͢Δ༰ͭ ‣ Ͳ͔͜Β։࢝λά ‣ Ͳ͜·Ͱऴྃλά
‣ ཁૉͷछྨཁૉλΠϓ ! ‣ จॻͷ෦͝ͱͷҙຯʹԠͯ͡ɺཁૉʹదͳλάΛద༻͢ Δ͜ͱ͕ɺ)5.-࡞ͷओͳ࡞ۀͱͳΔ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͡ΊʹI
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͡ΊʹI ։࢝λά
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͡ΊʹI ։࢝λά ऴྃλά
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͡ΊʹI ։࢝λά ऴྃλά ཁૉ༰
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͡ΊʹI ։࢝λά ऴྃλά ཁૉ༰ Iཁૉ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ։࢝λά ɺऴྃλάͷৄࡉ ‣ ։࢝λά ! ! ! !
! ‣ ऴྃλά I λάͷ࢝ λάͷऴ ཁૉλΠϓͷछྨ I λάͷ࢝ λάͷऴ
ϚʔΫΞοϓจॻͷߏͷهड़ ‣ ։࢝λάͰཁૉͷ࢝Λࢦఆͨ͠ΒɺඞͣऴྃλάͰด͡Δ ‣ Q͜ͷཁૉஈམΛҙຯ͍ͯ͠·͢ɻQ ! ‣ ։࢝λάͱऴྃλά͕ͻͱͭʹͳͬͨಛघͳλά͕ଘࡏ͢Δ ‣ CSվߦ
‣ JNHTSDzIPHFKQHzBMUzIPHFzը૾ ! ‣ λάɺඞͣ֯ӳจࣈͷখจࣈͰ
%SFBN8FBWFSͰ)5.-࡞ ‣ ૣɺ)5.-Λ࡞ͯ͠Έ·͠ΐ͏ ‣ ͜ͷतۀͰɺ"EPCF%SFBNXFBWFSΛ༻͠·͢
%SFBN8FBWFSͰ)5.-࡞ ‣ %SFBNXFBWFSΛىಈ ‣ ·ͣɺڥઃఆ ‣ %SFBNXFBWFSڥઃఆ৽نυΩϡϝϯτ ‣ ॳظઃఆυΩϡϝϯτλΠϓ %5%
Λʮ)5.-ʯʹ ‣ ΤϯίʔυॳظઃఆΛʮ6OJDPEF65'ʯʹ
%SFBN8FBWFSͰ)5.-࡞ ‣ ڥઃఆ
%SFBN8FBWFSͰ)5.-࡞ ‣ ৽ن࡞)5.-Λબ
%SFBN8FBWFSͰ)5.-࡞ ‣ ʮׂʯදࣔΛબ
%SFBN8FBWFSͰ)5.-࡞ ‣ πʔϧόʔͷٿͷϚʔΫΛԡ͢ͱɺ8FCϒϥβͰදࣔ
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無題ドキュメント</title> </head>
<body> </body> </html> %SFBN8FBWFSͰ)5.-࡞ ‣ ͳʹΒطʹهड़͕ʜ ‣ )5.-ͷجຊͷςϯϓϨʔτ͕ࣗಈ࡞͞Ε͍ͯΔ
)5.-ͷࠎΈ ‣ ࠎΈͱͳΔ)5.-จॻʹؚ·ΕΔͭͷཁૉ ‣ IUNMཁૉɺIFBEཁૉɺCPEZཁૉ IUNMཁૉ IFBEཁૉ CPEZཁૉ
)5.-ͷࠎΈ ‣ IUNMཁૉ ‣ )5.-จॻͷ࢝·ΓͱऴΘΓΛࢦఆ͍ͯ͠Δ ‣ શͯͷ)5.-จॻɺIUNMཁૉͰғ·Ε͍ͯΔ
)5.-ͷࠎΈ ‣ IFBEཁૉ ‣ จॻࣗͷใΛهड़͢Δཁૉ ‣ λΠτϧɺจࣈίʔυɺݴޠɺ$44ϑΝΠϧͷॴͳͲ ‣ IFBEཁૉʹهड़ͨ͠༰ɺ8FCϒϥβʹදࣔ͞ Εͳ͍
)5.-ͷࠎΈ ‣ CPEZཁૉ ‣ )5.-จॻͷ༰Λهड़͢Δ ‣ ͜͜ʹهड़ͨ͠෦͕8FCϒϥβʹදࣔ͞ΕΔ
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するWebページ</title> </head>
<body> </body> </html> ϖʔδʹλΠτϧΛ͚Δ ‣ IFBEཁૉʹUJUMFཁૉͱͯ͠هड़͢Δ ‣ ʮແυΩϡϝϯτʯΛॻ͖͑Δ ‣ ϒϥβͰ֬ೝͯ͠ΈΔ
ϖʔδʹλΠτϧΛ͚Δ ‣ ΟϯυͷλΠτϧ͕มԽͯ͠Δͣ
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するWebページ</title> </head>
<body> <h1>こんにちは、HTML</h1> </body> </html> େݟग़͠ ‣ CPEZཁૉʹɺIཁૉͱͯ͠هड़͢Δ ‣ ϒϥβͰ֬ೝͯ͠ΈΔ
େݟग़͠ ‣ ϒϥβͰ֬ೝͯ͠ΈΔ
... 前略 ... ! <body> <h1>これはh1</h1> <h2>これはh2</h2> <h3>これはh3</h3> <h4>これはh4</h4> <h5>これはh5</h5>
<h6>これはh6</h6> </body> </html> ݟग़͠ͷछྨ ‣ ݟग़͠ɺI͔ΒI·Ͱஈ֊͕͋Δ ‣ ࢼͯ͠ΈΔ
ݟग़͠ͷछྨ ‣ I͔ΒIΛϒϥβͰදࣔͯ͠ΈΔ
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head>
<body> <h1>こんにちは、HTML</h1> <p>このページは、はじめて作成したWebページです。きちんと表示されているでしょうか?</p> </body> </html> ஈམ ‣ CPEZཁૉʹɺQཁૉͱͯ͠هड़͢Δ ‣ QཁૉɺzQBSBHSBQIzͷུ
ஈམ ‣ ϒϥβͰ֬ೝͯ͠ΈΔ
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head>
<body> <h1>こんにちは、HTML</h1> <p>このページは、はじめて作成したWebページです。きちんと表示されて いるでしょうか?</p> </body> </html> ࢀߟɿࡉ͔ͳهड़ͷҙຯ ‣ ςϯϓϨʔτ͔Β࡞͞Εͨهड़ͷҙຯ
ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ %0$5:1&ňจॻܕͷఆٛʼnΛҙຯ͢Δ ‣ )5.-ʹ༷ʑͳόʔδϣϯ͕ଘࡏ͢Δ ‣ )5.-
9)5.- 9)5.- )5.-ͳͲ ‣ %0$5:1&)5.-)5.-ͷจॻͰ͋Δ͜ͱΛҙຯ ! ‣ ͪͳΈʹɺ9)5.-ͷ߹ʜ <!DOCTYPE HTML> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ ͜ͷ෦จࣈίʔυʮ65'ʯΛࢦఆ͍ͯ͠Δ ! ‣ จࣈίʔυͱ 1$ͰจࣈΛදݱ͢ΔͨΊͷମܥ
‣ ຊޠͷจࣈίʔυগ͠ෳࡶ ‣ *40+1ɺ&6$+1ɺ4IJGU@+*4ɺ65'ɺ65' ! ‣ 8FCͰͲͷจࣈίʔυΛ༻͍Δ͖͔ ‣ ͜Ε͔Βͷ8FCଟݴޠରԠͷ65'͕͓קΊ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
)5.-ߏͷهड़ʹప͢Δ ‣ )5.-จॻͷߏͷهड़ʹઐ೦͢Δ͜ͱ ‣ ݱঢ়ϑΥϯτͷେ͖͞ɺ৭ɺϑΥϯτϑΣΠεɺߦؒɺ จࣈִؒͳͲͷจॻͷମࡋɺσϑΥϧτͷ·· ‣ ͪΐͬͱؾͷ͖͍ͨσβΠϯʹͯ͠Έ͍ͨʜ ‣ ͔͠͠ɺࠓͷஈ֊Ͱ͙ͬͱת͑ͯͦͷ··Ͱ
‣ จॻͷମࡋ σβΠϯ ͷࢦఆʹɺ$44ͱ͍͏ผͷݴޠΛ ༻͠·͢
)5.-ߏͷهड़ʹప͢Δ ‣ ͳͥɺߏͱମࡋΛ͢Δ͖ͳͷ͔ ! ‣ จॻৗʹ1$ͷ8FCϒϥβͰӾཡ͞ΕΔΘ͚Ͱͳ͍ ‣ ܞଳɺεϚʔτϑΥϯɺΧʔφϏɺԻಡΈ্͛ ‣
ͲͷϝσΟΞͰਖ਼͘͠ҙຯߏ͕දݱ͞ΕΔ͖ ‣ ਖ਼͍͠ߏΛهड़͢Δඞཁੑ ! ‣ αʔνΤϯδϯͷ࠷దԽ 4&0 ‣ ϓϩάϥϜ͔ΒҙຯߏΛผͰ͖Δ ‣ αʔνΤϯδϯʹݕࡧ͞Εқ͍αΠτ ! ‣ ଞͷαΠτͷҾ༻సࡌ