0序文‐1章.indd

関連図書案内

好評発売中 ! ＨＴＭＬ５で モバイルアプリ開発入門 ●B5変 カラー 257頁 ●定価（本体2,600円＋税） 2012年2月発売！ Javaバイブルシリーズ Ｊａｖａ入門 Ｊａｖａ７版 ●B5変 約360頁 ●定価（本体2,000円＋税） 2012年2月発売！ Javaバイブルシリーズ オブジェクト指向プログラミング Ｊａｖａ７版 ●B5変 約400頁 ●定価（本体2,000円＋税） 2012年2月発売！ Javaバイブルシリーズ Ｗｅｂアプリケーション構築 Ｊａｖａ７版 ●B5変 約350頁 ●定価（本体2,800円＋税） ISBN978-4-88647-989-1 C3055 ¥2000E 編者： SCCライブラリーズ制作グループ

・本書に記載されたURL等は執筆時点でのものであり、予告なく変更される場合があります。 ・本書の使用（本書のとおりに操作を行う場合を含む）により、万一、直接的・間接的に損害が発生し ても、出版社および著者は一切の責任を負いかねますので、あらかじめご了承下さい。 ・Microsoft、Windowsは米国MicrosoftCorporationの米国およびその他の国における登録商標です。 ・その他、本書に記載されている会社名、製品名などは、一般に各社の商号、登録商標または商標です。 ・本書ではTM_{および®の記載は省略しました。}

ࡣ

ࡣࡌࡵ࡟



 ࡘ࠸᭱㏆ࡲ࡛ࠊಶேࡀ࢖ࣥࢱ࣮ࢿࢵࢺࢆ฼⏝ࡍࡿ࡟ࡣࠊᚲࡎࣃࢯࢥࣥࡀᚲせ

࡛ࡋࡓࠋࡑࡢࡓࡵࠊࢿࢵࢺࢩࣙࢵࣆࣥࢢ࡞࡝ࡢࢧ࢖ࢺࢆゼၥࡋࡼ࠺࡜ᛮ࠼ࡤࠊ

఍♫ࡸ⮬Ꮿ࡟ᡠࡿ࠿࢖ࣥࢱ࣮ࢿࢵࢺ࢝ࣇ࢙ࡢࡼ࠺࡞ሙᡤࢆ฼⏝ࡍࡿࡋ࠿᪉ἲࡣ

࠶ࡾࡲࡏࢇ࡛ࡋࡓࠋ

 ࡋ࠿ࡋࠊࣀ࣮ࢺࣃࢯࢥࣥࡀᬑཬࡋ࡚ࡃࡿ࡜බ⾗↓⥺

LAN ࢆタ⨨ࡍࡿ࢝ࣇ࢙

ࡸ᪋タࡀቑ࠼ࠊࣀ࣮ࢺࣃࢯࢥࣥࢆᣢࡕ㎸ࢇ࡛࢖ࣥࢱ࣮ࢿࢵࢺࢆ฼⏝࡛ࡁࡿࡼ࠺

࡟࡞ࡾࡲࡋࡓࠋࡑࡢᚋࠊᦠᖏ㟁ヰ࠿ࡽࡶ࢖ࣥࢱ࣮ࢿࢵࢺ࣓࣮ࣝࡸ࣮࣒࣮࣍࣌ࢪ

ࢆ⾲♧࡛ࡁࡿࡼ࠺࡟࡞ࡾࠊ㏻ಙᩱ㔠ࡶᐃ㢠ไࡀᑟධࡉࢀ࡚ࠊ㏻ಙ㈝⏝ࢆẼ࡟ࡏ

ࡎ࡟࢖ࣥࢱ࣮ࢿࢵࢺ࡬࢔ࢡࢭࢫࡀ࡛ࡁࡿࡼ࠺࡟࡞ࡾࡲࡋࡓࠋ

 ࡑࡋ࡚⌧ᅾ࡛ࡣࠊ࢔ࢡࢭࢫ➃ᮎࡶᦠᖏ㟁ヰ࠿ࡽࢫ࣐࣮ࢺࣇ࢛ࣥ࡬࡜⛣⾜ࡀ㐍

ࡳࠊࣃࢯࢥࣥ࡜㐯Ⰽ࡞࠸࢖ࣥࢱ࣮ࢿࢵࢺࢧ࣮ࣅࢫࢆࠊ࠸ࡘ࡛ࡶ࡝ࡇ࡛ࡶ฼⏝࡛

ࡁࡿࡼ࠺࡟࡞ࡗ࡚࠸ࡲࡍࠋ

 ࡇࡢࡼ࠺࡟ࠊ࢖ࣥࢱ࣮ࢿࢵࢺ࡬ࡢ᥋⥆࡜฼⏝ࡀ≉ู࡞࣮ࣘࢨ࣮ࡢࡶࡢ࡛ࡣ࡞

ࡃ࡞ࡿ࡜ࠊࡑࢀ࡟ྜࢃࡏ࡚᪂ࡓ࡞ࢧ࣮ࣅࢫࡶᬑཬࡋ࡚ࡁࡲࡋࡓࠋ᭷ྡ࡞ࡶࡢ࡟

ࡣࠊTwitter ࡸ Facebook ࡜࠸ࡗࡓࢯ࣮ࢩࣕࣝࢿࢵࢺ࣮࣡࢟ࣥࢢࢧ࣮ࣅࢫ(௨㝆

SNS)ࡸࢿࢵࢺࢤ࣮࣒ࠊGPS ࢆ฼⏝ࡋࡓᆅᅗࢧ࣮ࣅࢫ࡞࡝ࡀ࠶ࡾࡲࡍࠋࡇࢀࡽ

ࡣࠊᖖ᫬ࢿࢵࢺ᥋⥆ࡉࢀ࡚࠸ࡿࡇ࡜ࢆ๓ᥦ࡜ࡋࡓࢧ࣮ࣅࢫ࡛ࡍࠋࡉࡽ࡟ࠊSNS

࡜఩⨨᝟ሗ࡞࡝ࢆ⤌ࡳྜࢃࡏ࡚ࢡ࣮࣏ࣥࢆ㓄ಙࡍࡿ࡞࡝ࠊᩘከࡃࡢ᪂ࡋ࠸ࢧ࣮

ࣅࢫࡀⓏሙࡋ࡚࠸ࡲࡍࠋ

 ࡜ࡇࢁ࡛ࠊࡇࡢࡼ࠺࡞࢖ࣥࢱ࣮ࢿࢵࢺࢧ࣮ࣅࢫࢆࠊ⮬ศ࡛ࡶᥦ౪ࡋ࡚ࡳࡓ࠸

࡜⪃࠼ࡓࡇ࡜ࡣ࡞࠸࡛ࡋࡻ࠺࠿ࠋࡶࡕࢁࢇࠊ࣮࣒࣮࣍࣌ࢪࡸࣈࣟࢢ࡞࡝ࡣࠊ⡆

༢࡟సᡂ࡛ࡁࡿࢶ࣮ࣝࡸ

Web ࢧ࢖ࢺࡀᏑᅾࡍࡿࡢ࡛ࠊᑓ㛛▱㆑ࡀ࡞ࡃ࡚ࡶసᡂ

ࡍࡿࡇ࡜ࡣྍ⬟࡛ࡍࠋ

ࡋ࠿ࡋࠊࡇࢀࡲ࡛࡟࡞࠸

Web ࢧ࣮ࣅࢫࢆᐇ⌧ࡋࡓࡾࠊ࢜ࣜࢪࢼࣝࡢ Web ࢧ

࢖ࢺࢆᵓ⠏ࡋࡓࡾࡋࡼ࠺࡜ᛮ࠼ࡤࠊࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺࡸ

Web ࢔ࣉࣜࢣ࣮

ࢩࣙࣥࡢ▱㆑ࡀ࡝࠺ࡋ࡚ࡶ୙ྍḞ࡟࡞ࡾࡲࡍࠋ

 ࡑࢀ࡛ࡣࠊ

Web ࢔ࣉࣜࢣ࣮ࢩࣙࣥ࡟࠾࠸࡚᭱ࡶᇶᮏⓗ࡞ᢏ⾡ࡣఱ࠿࡜࠸࠼ࡤࠊ

ࡑࢀࡣࡸࡣࡾࠕHTML࡛ࠖࡋࡻ࠺ࠋWeb ࡢṔྐࡣ HTML ࠿ࡽጞࡲࡾࡲࡋࡓࠋ

ࡋ࠿ࡋࠊ⌧ᅾࡢ

Web ࣮࣌ࢪࡣࠊHTML ࡔࡅ࡛ᵓᡂࡉࢀ࡚࠸ࡿࢃࡅ࡛ࡣ࠶ࡾࡲ

ࡏࢇࠋᐇ㝿࡟ࡣࠊぢࡓ┠ࢆỴࡵࡿࠕࢫࢱ࢖ࣝࢩ࣮ࢺ(CSS)ࠖࡸືࡁࢆ୚࠼ࡿ

ࠕJavaScriptࠖ࡞࡝ከࡃࡢᢏ⾡ࡢୖ࡟ᡂࡾ❧ࡗ࡚࠸ࡲࡍࠋ

ࡑࡇ࡛ࠊᮏ᭩࡛ࡣࠊWeb ࣮࣌ࢪࡢᇶ♏ᢏ⾡࡛࠶ࡿ HTML ࡢ᭱᪂ࣂ࣮ࢪࣙࣥ

ࠕHTML5ࠖࠊCSS ࡢ᭱᪂ࣂ࣮ࢪࣙࣥࠕCSS3ࠖࠊࡑࡋ࡚ࠕJavaScriptࠖ࡟ࡘ࠸࡚ࠊ

ᇶ♏࠿ࡽゎㄝࡍࡿࡇ࡜࡟ࡋࡲࡋࡓࠋ

ͤ࡞࠾ࠊᮏ᭩࡛ࡣࠊࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺࡸ

Web ࢔ࣉࣜࢣ࣮ࢩࣙࣥࡢసᡂ

ࡑࡢࡶࡢࠊ࠶ࡿ࠸ࡣࢧ࣮ࣂࡢసᡂ࡟ࡘ࠸࡚ࡣᢅࡗ࡚࠸ࡲࡏࢇࠋ

 ࡇࢀࡽࠊ᭱᪂ࡢᢏ⾡ࢆ⌮ゎࡍࡿ᪩㐨ࡣࠊᐇ㝿࡟ࢥ࣮ࢻࢆ࢚ࢹ࢕ࢱ࡛ධຊࡋࠊ

ࣈࣛ࢘ࢨ࡟⾲♧ࡋ࡚ࡳࡿࡇ࡜࡛ࡍࠋᮏ᭩࡛ࡶࠊㄝ᫂ࡢ୰࡛ᩘከࡃࡢࢯ࣮ࢫࢥ࣮

ࢻࡀⓏሙࡋࡲࡍࠋࡇࢀࡽࡢࢥ࣮ࢻࢆᐇ㝿࡟ධຊࡋ࡚⾲♧ࡉࡏ࡞ࡀࡽㄝ᫂ࢆㄞࡴ

ࡇ࡜࡛ࠊࡼࡾ⌮ゎࡀ῝ࡲࡿࡇ࡜࡛ࡋࡻ࠺ࠋ

 ᮏ᭩ࡢ┤᥋ࡢ┠ᶆࡣࠊ

ࠕHTML5 ࡢࢯ࣮ࢫࢥ࣮ࢻࢆぢ࡚ࠊグ㏙ࡉࢀ࡚࠸ࡿෆᐜ

ࡀ⌮ゎ࡛ࡁࡿࠖࡇ࡜࡛ࡍࠋ

HTML5 ࡀ⌮ゎ࡛ࡁࡿࡼ࠺࡟࡞ࢀࡤࠊ᭱᪂ࡢ Web ࣮࣌

ࢪࢆᛂ⏝ࡋ࡚⮬๓ࡢ࣮࣌ࢪࢆసᡂࡍࡿࡇ࡜ࡶክ࡛ࡣ࡞ࡃ࡞ࡾࡲࡍࠋ

ⴭ ⪅

ࢧ

ࢧ࣏࣮ࢺ

ᮏ᭩࡟グ㍕ࡉࢀࡓ㡯┠࡟㛵ࡍࡿ᭱᪂᝟ሗ࡞࡝ࢆබ㛤ࡋ࡚࠸ࡲࡍࠋ



URL http://www.scc-kk.co.jp/scc-books/support/B-360/support.html

ᶆ‽Ꮫ⩦᫬㛫

     ෆᐜ        Ꮫ⩦᫬㛫

㸦㸯᫬㝈㸻90 ศ㸧

➨

1 ❶ Web ࣮࣌ࢪࡢᇶᮏ㻌  㸰᫬㝈

➨

2 ❶ ⾲♧ 

    㸱᫬㝈

➨

3 ❶ ࣜࣥࢡ࡜ࢸ࣮ࣈࣝ  㸱᫬㝈

➨

4 ❶ ࣇ࢛࣮࣒  

㸲᫬㝈

➨

5 ❶ 㹁㹑㹑

㸲᫬㝈

➨

6 ❶ JavaScript     㸲᫬㝈

          



ྜィ 㸰㸮᫬㝈

 ͤୖグࡣ㞟ྜᩍ⫱࡛౑⏝ࡍࡿሙྜࡢ┠Ᏻ࡛ࡍࠋ

HTML ࡢࢯ࣮ࢫࢥ࣮ࢻ

ᮏ᭩࡛ࡣࢯ࣮ࢫࢥ࣮ࢻࡀ࡝ࡇ࡟࠶ࡿ࠿ࡀࡦ࡜┠࡛ࢃ࠿ࡿࡼ࠺࡟ࠊࢯ࣮ࢫࢥ࣮

ࢻࡢ⫼ᬒ࡟⥙᥃ࡅࢆࡋ࡚࠸ࡲࡍࠋࡲࡓࠊࢯ࣮ࢫࢥ࣮ࢻ࡛౑⏝ࡍࡿᩥᏐ࡛⣮ࡽ

ࢃࡋ࠸ࡶࡢ࡟㛵ࡋ࡚ࡣࠊ௨ୗࡢࡼ࠺࡟༊ูࡋࡸࡍ࠸ᙧ࡟ࡋ࡚࠶ࡾࡲࡍࠋ

⾲グព࿡

1  ᩘᏐࡢ 㸦࢖ࢳ㸧

l  ⱥᑠᩥᏐࡢ O 㸦࢚ࣝ㸧

I  ⱥ኱ᩥᏐࡢ ,㸦࢔࢖㸧

0  ᩘᏐࡢ 㸦ࢮࣟ㸧

o  ⱥᑠᩥᏐࡢ R㸦࣮࢜㸧

O  ⱥ኱ᩥᏐࡢ 2㸦࣮࢜㸧

┠ࠉḟ

ϸ

┠

┠ ḟ

ࡣࡌࡵ࡟

➨

1 ❶ Web ࣮࣌ࢪࡢᇶᮏ

··· 1

1.1 Web ࢧ࢖ࢺࡢ௙⤌ࡳ ··· 2



1.1.1 ࣮࣡ࣝࢻ࣭࣡࢖ࢻ࣭࢙࢘ࣈ ··· 2



1.1.2 ືⓗ࡞ Web ࣮࣌ࢪ ··· 5



1.1.3 Web ࢔ࣉࣜࢣ࣮ࢩࣙࣥ ··· 7

 ࠙☜ㄆၥ㢟ࠚ

··· 8

1.2 Web ࣮࣌ࢪࡢᢏ⾡ ··· 9



1.2.1 HTML ··· 9



1.2.2 ࢝ࢫࢣ࣮ࢹ࢕ࣥࢢ࣭ࢫࢱ࢖࣭ࣝࢩ࣮ࢺ ··· 13



1.2.3 ࢡࣛ࢖࢔ࣥࢺࢧ࢖ࢻࢫࢡࣜࣉࢺ ··· 15

 ࠙☜ㄆၥ㢟ࠚ ··· 16

1.3 HTML ࣇ࢓࢖ࣝࡢᇶᮏ ··· 18



1.3.1 HTML ࢆຮᙉࡍࡿࡓࡵࡢ‽ഛ ··· 18



1.3.2 DOCTYPE ᐉゝ ··· 21

1.3.3 HTML ࡢࢱࢢ ··· 22

1.3.4 HTML ࡢᒓᛶ ··· 24

࠙☜ㄆၥ㢟ࠚ ··· 26



1.4 ࢥࣥࢸࣥࢶ࣭ࣔࢹࣝ ··· 27



1.4.1 ࢥࣥࢸࣥࢶ࣭ࣔࢹࣝ࡜ࡣ ··· 27



1.4.2 ࢥࣥࢸࣥࢶ࣭ࣔࢹࣝࡢ࢝ࢸࢦࣜ ··· 28



1.4.3 ࢭࢡࢩࣙࣥ ··· 31



1.4.4 Web ࣮࣌ࢪࡢᵓ㐀໬ ··· 33

 ࠙☜ㄆၥ㢟ࠚ ··· 35

₇⩦ၥ㢟 ··· 36

➨

2 ❶ ⾲♧

··· 37

2.1 ࢸ࢟ࢫࢺࡢ⾲♧ ··· 38

2.1.1 㔜せᛶࠊᙉㄪ࡞࡝ࢆ⾲ࡍせ⣲ ··· 38

2.1.2 ᫬㛫ࡸὀ㔘ࠊࣝࣅ࡞࡝ࢆ⾲ࡍせ⣲ ··· 40

2.1.3 ࣜࣥࢡࡢᣦᐃ ··· 43

࠙☜ㄆၥ㢟ࠚ ··· 50

2.2 ⏬ീࡢ⾲♧ ··· 51



2.2.1 ⏬ീࣇ࢓࢖ࣝ ··· 51



2.2.2 img せ⣲ ··· 51

┠ࠉḟ

Ϲ



2.2.3 ⏬ീ࡟ࣜࣥࢡࢆᣦᐃࡍࡿ ··· 54

 ࠙☜ㄆၥ㢟ࠚ ··· 56

2.3 㡢ᴦࡸᫎീࢆ⾲♧ࡍࡿ ··· 57

2.3.1 ࢧ࢘ࣥࢻࣇ࢓࢖ࣝࡢ✀㢮 ··· 57

2.3.2 ࢧ࢘ࣥࢻࡢ෌⏕ ··· 58

 

2.3.3 ື⏬ࣇ࢓࢖ࣝࡢ✀㢮 ··· 60

 

2.3.4 ື⏬ࡢ෌⏕ ··· 61

 ࠙☜ㄆၥ㢟ࠚ ··· 64

2.4 ᅗᙧࡢ⾲♧ ··· 65

 2.4.1 ᅄゅᙧࡢᥥ⏬ ··· 65

2.4.2 ෇ࢆᥥࡃ ··· 68

  ࠙☜ㄆၥ㢟ࠚ ··· 71

₇⩦ၥ㢟 ··· 72

➨

3 ❶ ࣜࢫࢺ࡜ࢸ࣮ࣈࣝ

··· 73

3.1 ࣜࢫࢺ ··· 74

 

3.1.1 ࣜࢫࢺ࡜ࡣ ··· 74

3.1.2 ୪ิ㡰ᗎᆺࣜࢫࢺ ··· 75

3.1.3 㡰ᗎ௜ࡁࣜࢫࢺ ··· 77

3.1.4 ᐃ⩏ᆺࣜࢫࢺ ··· 79

3.1.5 ࣐࣮࣮࢝ࡸᩘᏐࡢኚ᭦ ··· 81

࠙☜ㄆၥ㢟ࠚ ··· 84

3.2 ࢸ࣮ࣈࣝ ··· 85



3.2.1 ࢸ࣮ࣈࣝ࡜ࡣ ··· 85

3.2.2 ࢸ࣮ࣈࣝࡢᇶᮏ ··· 86

3.2.3 ࢱ࢖ࢺࣝࠊぢฟࡋࡢ௜࠸ࡓࢸ࣮ࣈࣝ ··· 88

3.2.4 ࣊ࢵࢲ࣮ࠊࣇࢵࢱ࣮ࡢ௜࠸ࡓࢸ࣮ࣈࣝ ··· 90

3.2.5 ࢸ࣮ࣈࣝࡢࢭࣝࢆ⤖ྜࡍࡿ ··· 92

  ࠙☜ㄆၥ㢟ࠚ ··· 95

 ₇⩦ၥ㢟 ··· 96

➨

4 ❶ ࣇ࢛࣮࣒

··· 97

4.1 ࣇ࢛࣮࣒࡜ࡣ ··· 98

 

4.1.1 ࣇ࢛࣮࣒ࡢᙺ๭ ··· 98

 

4.1.2 ࣇ࢛࣮࣒ࡢࢥࣥࢺ࣮ࣟࣝ ··· 99

 

4.1.3 form ࡢᇶᮏᵓᩥ ··· 100

  ࠙☜ㄆၥ㢟ࠚ ··· 104



4.2 ࣇ࢛࣮࣒ࢆグ㏙ࡍࡿ ··· 105

4.2.1 ᵝࠎ࡞ࢸ࢟ࢫࢺࣇ࢕࣮ࣝࢻ ··· 105

┠ࠉḟ

Ϻ

 

4.2.2 ࣛࢪ࢜࣎ࢱࣥࠊࢳ࢙ࢵࢡ࣎ࢵࢡࢫ ··· 109

4.2.3 ࢭࣞࢡࢺࠊࢸ࢟ࢫࢺ࢚ࣜ࢔ ··· 112

࠙☜ㄆၥ㢟ࠚ ··· 115

4.3 Web ࢧ࣮ࣂ࡛ධຊࢆ☜ㄆࡍࡿ ··· 116

4.3.1 Web ࢧ࣮ࣂࡢ‽ഛ ··· 116

4.3.2 ࣇ࢛࣮࣒ࡢືస ··· 117

࠙☜ㄆၥ㢟ࠚ ··· 124

₇⩦ၥ㢟 ··· 125

➨

5 ❶ CSS3

··· 127

5.1 CSS ࡜ࡣ ··· 128



5.1.1 ᭱᪂ࡢ CSS ࡛࠶ࡿ CSS3 ··· 128

5.1.2 CSS3 ࡢᇶᮏ ··· 129

5.1.3 CSS ࡢཧ↷᪉ἲ ··· 132

5.1.4 CSS3 ࡢࢭࣞࢡࢱ ··· 135

࠙☜ㄆၥ㢟ࠚ ··· 143



5.2 ᵝࠎ࡞ࣉࣟࣃࢸ࢕ ··· 144

 

5.2.1 ࢸ࢟ࢫࢺࡢኚ᭦ ··· 144

 

5.2.2 CSS3 ࡢ᪂ࣉࣟࣃࢸ࢕ ··· 150

 

5.2.3 ࣎ࢵࢡࢫࣔࢹࣝ ··· 155

  ࠙☜ㄆၥ㢟ࠚ ··· 160



5.3 CSS3 ࡛ Web ࣮࣌ࢪࢆࣞ࢖࢔࢘ࢺ ··· 161

 

5.3.1 ᅇࡾ㎸ࡳ ··· 161

5.3.2 ⤯ᑐ఩⨨ࡢᣦᐃ ··· 164

 

5.3.3 ┦ᑐ఩⨨࡟ࡼࡿࣞ࢖࢔࢘ࢺ ··· 167

  ࠙☜ㄆၥ㢟ࠚ ··· 171

 ₇⩦ၥ㢟 ··· 172

➨

6 ❶ JavaScript

··· 173

6.1 JavaScript ࡜ࡣ ··· 174



6.1.1 ࢜ࣈࢪ࢙ࢡࢺᣦྥࣉࣟࢢ࣑ࣛࣥࢢ ··· 174

6.1.2 JavaScript ࡢᇶ♏ ··· 175

࠙☜ㄆၥ㢟ࠚ ··· 181



6.2 ไᚚᩥ ··· 182

 

6.2.1 if ᩥ ··· 182

6.2.2 for ᩥ࡟ࡼࡿ⧞ࡾ㏉ࡋฎ⌮··· 187

 ࠙☜ㄆၥ㢟ࠚ ··· 191

6.3 㛵ᩘ࡜ JavaScript ࡢ࢜ࣈࢪ࢙ࢡࢺ ··· 192



6.3.1 㛵ᩘ ··· 192

┠ࠉḟ

ϻ

6.3.2 JavaScript ࡢ࢜ࣈࢪ࢙ࢡࢺ··· 195

6.3.3 㓄ิ ··· 198

࠙☜ㄆၥ㢟ࠚ ··· 203

6.4 ࢖࣋ࣥࢺ ··· 204



6.4.1 ࢡࣜࢵࢡ࢖࣋ࣥࢺ ··· 204



6.4.2 ࢱ࢖࣐࣮ฎ⌮ ··· 206



6.4.3 ࣇ࢛࣮࣒ࡢධຊࢳ࢙ࢵࢡ ··· 208

 ࠙☜ㄆၥ㢟ࠚ ··· 216

₇⩦ၥ㢟 ··· 218

࠙

࠙☜ㄆၥ㢟ゎ⟅࣭₇⩦ၥ㢟ゎ⟅ࠚࢲ࣮࢘ࣥࣟࢻࡢࡈ᱌ෆ··· 220

௜㘓

··· 221

A. Web ࢧ࣮ࣂࡢ࢖ࣥࢫࢺ࣮ࣝ ··· 222

A.1 XAMPP ࡢ࢖ࣥࢫࢺ࣮ࣝ ··· 222

A.2 ࠺ࡲࡃ Apache ࡀືసࡋ࡞࠸࡜ࡁ ··· 229

B. ࣇ࢓ࣅࢥࣥࡢసᡂ ··· 231

B.1 Favicon ࡢ࢔࢖ࢥࣥࣇ࢓࢖ࣝ ··· 231

B.2 ࢔࢖ࢥࣥࣇ࢓࢖ࣝࡢసᡂ ··· 232

B.3 Favicon.ico ࡢタ⨨ ··· 232

C. HTML5 ࡢせ⣲ࠊᒓᛶࠊ್ࡢ୍ぴ ··· 234

D. CSS3 ࡢ୺࡞ࣉࣟࣃࢸ࢕ࠊ್ࡢ୍ぴ ··· 268

E. JavaScript ࡢ୺࡞࢜ࣈࢪ࢙ࢡࢺࠊ࣓ࢯࢵࢻࠊࣉࣟࣃࢸ࢕ࡢ୍ぴ ···· 288

F. Web ࣮࢝ࣛ ··· 298

F.1 Web ࢭ࣮ࣇ࣮࢝ࣛ ··· 298

F.2 ࣮࢝ࣛࢿ࣮࣒ ··· 300

⣴ᘬ

··· 303

第１

章

Web ページの基本

普段、何気なく利用している Web サイトのサービス。 では、どんな仕組みで Web サイトが動いているのかご 存じでしょうか？ この章では、インターネットや WWW の仕組み、Web ページの構造、HTML の基本を学びます。

第１章



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

‣†‣

⁉⁗⁔ ⇛⇊⇮↝ˁኵ↮‒

࢖ࣥࢱ࣮ࢿࢵࢺ࡟ࡣࠊ᳨⣴ࢧ࢖ࢺࡸࢩࣙࢵࣆࣥࢢࢧ࢖ࢺ࡞࡝ࠊᩘከࡃࡢࢧ࣮ࣅࢫࡀᏑᅾࡋ ࡲࡍࠋࡋ࠿ࡋࠊከࡃࡢ࣮ࣘࢨ࣮ࡀࡑࡢ௙⤌ࡳࡲ࡛⌮ゎࡣࡋ࡚࠸࡞࠸࡛ࡋࡻ࠺ࠋࡇࡇ࡛ࡣࠊWeb ࢧ࢖ࢺࡢ௙⤌ࡳ࡟ࡘ࠸࡚ゎㄝࡋࡲࡍࠋ

‣†‣†‣

∕∞∑⇯∝∕⇊⇯∝⇌⇍⇼‒

⌧ᅾࠊࠕ࢖ࣥࢱ࣮ࢿࢵࢺࠖ࡟㛵㐃ࡍࡿᢏ⾡ࡣ⏕ά࡟Ḟ࠿ࡏ࡞࠸ࡶࡢ࡜࡞ࡗ࡚࠸ࡲࡍࠋࡇࡢ ࢖ࣥࢱ࣮ࢿࢵࢺࢆࠊ኱ࡁࡃᬑཬࡉࡏࡿཎືຊ࡜࡞ࡗࡓࡢࡀࠕ࣮࣡ࣝࢻ࣭࣡࢖ࢻ࣭࢙࢘ࣈࠖ࡜ ࿧ࡤࢀࡿ௙⤌ࡳ࡛ࡍࠋ ࣮࣡ࣝࢻ࣭࣡࢖ࢻ࣭࢙࢘ࣈࡣࠊࢥࣥࣆ࣮ࣗࢱྠኈࡀ㏻ಙ⥙ࢆ฼⏝ࡋ࡚ࢹ࣮ࢱࢆ㏦ཷಙࡋࡲ ࡍࠋࡇࡢ㏻ಙ⥙࡟ࠕ࢖ࣥࢱ࣮ࢿࢵࢺࠖࢆ฼⏝ࡍࡿࡇ࡜࡛ࠊୡ⏺୰ࡢࢧ࣮ࣂ࡜㏻ಙࡍࡿࡇ࡜ࡀ ྍ⬟࡟࡞ࡾࡲࡍࠋࡑࡢᵝᏊࡀࠊࡲࡿ࡛ࠕ⻡⺸ࡢᕢWebࠖࡢࡼ࠺࡟ぢ࠼ࡿࡇ࡜࠿ࡽWorld࣡ ࣮ ࣝ ࢻ Wide ࣡ ࢖ ࢻ Web ࢙࢘ࣈ ࠊ㏻⛠ࠕWWWࠖ࡜࿧ࡤࢀࡿࡼ࠺࡟࡞ࡾࡲࡋࡓࠋ WWW ࡛ࡣࠊࢥࣥࣆ࣮ࣗࢱྠኈࡢ㏻ಙᡭ㡰࡟ࠊࠕHTTP(

HyperText

ࣁ ࢖ ࣃ ࣮ ࢸ ࢟ ࢫ ࢺ Transfer ࢺ ࣛ ࣥ ࢫ ࣇ ࢓ ࣮ Protocol ࣉ ࣟ ࢺ ࢥ ࣝ )ࠖ ࡜࿧ࡤࢀࡿ᪉ᘧࢆ᥇⏝ࡋ࡚࠸ࡲࡍࠋ  HTTP ㏻ಙࡣࠊࢥࣥࣆ࣮ࣗࢱࡀࢿࢵࢺ࣮࣡ࢡୖࡢูࡢࢥࣥࣆ࣮ࣗࢱ࡟ᑐࡋ࡚ࠊࢹ࣮ࢱࢆせồ ࡍࡿ࡜ࡇࢁ࠿ࡽࡀጞࡲࡾࡲࡍࠋࡇࡢせồࢆࠕࣜࢡ࢚ࢫࢺࠖ࡜࿧ࡧࡲࡍࠋࡍࡿ࡜ࠊせồࡉࢀࡓ ࢖ࣥࢱ࣮ࢿࢵࢺ࡜ࡣࠊୡ⏺୰࡟ᙇࡾᕠࡽࡉࢀࡓࢥࣥࣆ࣮ࣗࢱࡢ㏻ಙ⥙



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

ࢥࣥࣆ࣮ࣗࢱࡣࢹ࣮ࢱࢆ㏉ಙࡋࡲࡍࠋࡇࡢ㏉ಙࢆࠕࣞࢫ࣏ࣥࢫࠖ࡜࿧ࡧࡲࡍࠋ ࡲࡓࠊ㏦ཷಙࡉࢀࡿࢹ࣮ࢱࡢࡇ࡜ࢆWWW࡛ࡣࠕWeb࣮࣌ࢪࠖ࡜࿧ࡧࠊWeb࣮࣌ࢪࢆࣜࢡ࢚ࢫ ࢺࡍࡿࢯࣇࢺࢆࠕࣈࣛ࢘ࢨࠖࠊWeb࣮࣌ࢪࢆࣞࢫ࣏ࣥࢫࡍࡿࢯࣇࢺࢆࠕWebࢧ࣮ࣂࠖ࡜࿧ࡧࡲ ࡍࠋ  ࡇࡢࡼ࠺࡟ࠊHTTP㏻ಙࡣ㠀ᖖ࡟༢⣧࡞ᡭ㡰࡞ࡢ࡛ࡍࡀࠊWeb࣮࣌ࢪ࡟ࡣ࠶ࡿᕦጁ࡞௙᥃ࡅ ࡀ᪋ࡉࢀ࡚࠸ࡲࡍࠋࡑࢀࡣࠊࢻ࣓࢟ࣗࣥࢺࡢ୰࡟ูࡢࢻ࣓࢟ࣗࣥࢺࡢሙᡤࠕURLࠖࢆᇙࡵ㎸ ࡴࡇ࡜ࡀ࡛ࡁࡿࡢ࡛ࡍࠋ  URL࡜ࡣࠕUniformࣘ ࢽ ࣇ ࢛ ࣮ ࣒ Resource ࣜ ࢯ ࣮ ࢫ Locator ࣟ ࢣ ࣮ ࢱ ࠖࡢ␎࡛ࠊ࢖ࣥࢱ࣮ࢿࢵࢺୖ࡟࠶ࡿWebࢧ࣮ࣂࢆ≉ ᐃࡍࡿࡓࡵࡢࠕ࢔ࢻࣞࢫఫᡤࠖࡢࡼ࠺࡞ࡶࡢ࡛ࡍࠋWWW࡛ࡣࡇࡢURLࢆ౑ࡗ࡚Webࢧ࣮ࣂࢆ ≉ᐃࡋࠊWeb࣮࣌ࢪࢆࣜࢡ࢚ࢫࢺࡋࡲࡍࠋ  ࡇࡢࡼ࠺࡟ࢻ࣓࢟ࣗࣥࢺ࡟ᇙࡵ㎸ࡲࢀࡓURLࢆࠕࣜࣥࢡࠖ࡜࿧ࡧࠊࣜࣥࢡࢆᇙࡵ㎸ࡴࡇ࡜ ࡀ࡛ࡁࡿࢻ࣓࢟ࣗࣥࢺࡢࡇ࡜ࢆࠕࣁ࢖ࣃ࣮ࢸ࢟ࢫࢺࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ ࣜࢡ࢚ࢫࢺ ࣞࢫ࣏ࣥࢫ ࣈࣛ࢘ࢨ Web ࢧ࣮ࣂ Web ࣮࣌ࢪ



Web ࣮࣌ࢪ



B

Web ࣮࣌ࢪ A

Web ࣮࣌ࢪ B

㻌

Web ࣮࣌ࢪ㻌 C

㻌

Web ࣮࣌ࢪ B ࡬ࡢࣜࣥࢡ

㻌



C

Web ࣮࣌ࢪ C ࡬ࡢࣜࣥࢡ

㻌



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ࣁ࢖ࣃ࣮ࢸ࢟ࢫࢺ࡟ᇙࡵ㎸ࡴࡇ࡜ࡀ࡛ࡁࡿࡢࡣࠊูࡢWeb࣮࣌ࢪࡢURLࡔࡅ࡛ࡣ࠶ࡾࡲࡏࢇࠋ Webࢧ࣮ࣂෆࡢ⏬ീࢹ࣮ࢱ࡞࡝ࡶᩥ❶ࡢ୰࡟ᇙࡵ㎸ࡴࡇ࡜ࡀ࡛ࡁࡲࡍࠋࡲࡓࠊᩥ❶ࡢ≉ᐃ㒊 ศࡀࠕぢฟࡋ࡛ࠖ࠶ࡿࡇ࡜ࡸࠊࠕ⾲࡛ࠖ࠶ࡿࡇ࡜ࠊࠕᩥࡢព࿡ࡸᙺ๭ࠖ࡜࠸ࡗࡓ᝟ሗࡶᩥ❶ ෆ࡟ᇙࡵ㎸ࡴࡇ࡜ࡀ࡛ࡁࡲࡍࠋ ࡶࡕࢁࢇࠊࡇࡢࡼ࠺࡞᝟ሗࢆᩥ❶࡟ᇙࡵ㎸ࡴ࡟ࡣࠊࢥࣥࣆ࣮ࣗࢱࡀ⌮ゎ࡛ࡁࡿࡼ࠺࡟ࠊ࣮ࣝ ࣝ࡟๎ࡗ࡚Web࣮࣌ࢪࡀグ㏙ࡉࢀ࡚࠸࡞ࡅࢀࡤ࠸ࡅࡲࡏࢇࠋࡇࡢ࣮ࣝࣝࡢࡇ࡜ࢆࠕHyperText ࣁ ࢖ࣃ ࣮ࢸ࢟ ࢫࢺ Markup ࣐࣮ࢡ࢔ࢵࣉ Language ࣛ ࣥ ࢤ ࣮ ࢪ ࠖࠊ㏻⛠ࠕHTMLࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ ࡑࡋ࡚ࠊࣃࢯࢥࣥࡢࣈࣛ࢘ࢨࡣࠊࣞࢫ࣏ࣥࢫ࡜ࡋ࡚㏦ಙࡉࢀ࡚ࡁࡓWeb࣮࣌ࢪࡢHTMLࢆ⌮ ゎࡋ࡚⏬㠃ࢆྜᡂࡋࡲࡍࠋࡇࡢࠕHTMLࢆゎ㔘ࡋ࡚ࣈࣛ࢘ࢨ࡟⏬㠃ࢆྜᡂࡍࡿసᴗࠖࡢࡇ࡜ࢆ ࠕࣞࣥࢲࣜࣥࢢࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 ⌧ᅾࠊࣃࢯࢥ࡛ࣥ฼⏝࡛ࡁࡿࣈࣛ࢘ࢨ࡟ࡣࠊከࡃࡢ✀㢮ࡀ࠶ࡾࡲࡍࠋ᭷ྡ࡞ࡶࡢ࡜ࡋ

࡚ࡣࠊࠕInternet࢖ ࣥ ࢱ ࣮ ࢿ ࢵ ࢺ Explorer࢚ࢡ ࢫࣉ࣮ࣟ ࣮ࣛࠖࠊࠕSafariࢧ ࣇ ࢓ ࣜࠖࠊࠕGoogleࢢ ࣮ ࢢ ࣝ Chromeࢡ ࣟ ࣮ ࣒ࠖࠊࠕFirefoxࣇ࢓࢖ࣖࣇ࢛ࢵࢡࢫࠖࠕOpera࢜ ࣌ ࣛࠖ

࡞࡝ࡀ࠶ࡾࡲࡍࠋࡇࢀࡽ୺せ࡞ࣈࣛ࢘ࢨࡣࠊࣃࢯࢥࣥࡔࡅ࡛࡞ࡃࢫ࣐࣮ࢺࣇ࢛ࣥࡸࢱࣈ ࣞࢵࢺ➃ᮎ⏝ࡢࡶࡢࡶ࠶ࡾࠊ」ᩘࡢࣃࢯࢥࣥࡸࢫ࣐࣮ࢺࣇ࢛ࣥྠኈ࡛ࠊࣈࢵࢡ࣐࣮ࢡ࡞ ࡝ࡢࢹ࣮ࢱࢆඹ᭷࡛ࡁࡿࡶࡢࡶ࠶ࡾࡲࡍࠋ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">

Web ࣮࣌ࢪ

㻌

HTML ࢆࣞࣥࢲࣜࣥࢢࡋࡓ⤖ᯝ

㻌

HTML ࡛グ㏙ࡉࢀࡓᩥ❶

㻌



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†‣†․‒ ѣႎ↙ ⁉⁗⁔ ∀∞⇞‒

 HTTP ㏻ಙ࡛ࡣࠊࣈࣛ࢘ࢨࡀ Web ࢧ࣮ࣂ࡟ࣜࢡ࢚ࢫࢺࡍࡿ࡜ࠊࣜࢡ࢚ࢫࢺࡉࢀࡓ Web ࢧ࣮ ࣂࡣᣦᐃࡉࢀࡓ Web ࣮࣌ࢪࢆࣈࣛ࢘ࢨ࡟㏦ಙࡋࡲࡍࠋ  ࡘࡲࡾ Web ࢧ࣮ࣂഃ࡟ࡣࠊணࡵࣜࢡ࢚ࢫࢺ᫬࡟㏦ಙࡍࡿࡓࡵࡢ Web ࣮࣌ࢪࡀಖᏑࡉࢀ࡚࠸ ࡿᚲせࡀ࠶ࡾࡲࡍࠋWeb ࣮࣌ࢪࡣ HTML ࡛グ㏙ࡍࡿࡓࡵࠊWeb ࢧ࣮ࣂ࡟ࡣࠕHTML ࣇ࢓࢖ࣝࠖ ࡢᙧ࡛ಖᏑࡉࢀ࡚࠸ࡲࡍࠋ  ࡇࡢࡼ࠺࡟ HTML ࣇ࢓࢖ࣝ࡜ࡋ࡚ಖᏑࡉࢀ࡚࠸ࡿ Web ࣮࣌ࢪࡢࡇ࡜ࢆࠕ㟼ⓗ࡞ Web ࣮࣌ࢪࠖ ࡜࿧ࡧࡲࡍࠋ  ࡇࢀ࡟ᑐࡋ࡚ࠊ᳨⣴ࢧ࢖ࢺࡸࢩࣙࢵࣆࣥࢢࢧ࢖ࢺ࡞࡝࡛ࡣࠊࣈࣛ࢘ࢨ࠿ࡽධຊࡋࡓ᳨⣴ ࣮࣮࢟࣡ࢻࡸ࣮ࣘࢨ࣮ྡ࡟ࡼࡗ࡚ࠊࣞࢫ࣏ࣥࢫࡉࢀ࡚ࡃࡿ Web ࣮࣌ࢪࡣኚ໬ࡋࡲࡍࠋ  ࡇࡢࡼ࠺࡟ࠊ࡝ࡢࡼ࠺࡞ࢹ࣮ࢱࡀࣈࣛ࢘ࢨ࠿ࡽ㏦ಙࡉࢀ࡚ࡃࡿࡢ࠿ண ࡛ࡁ࡞࠸ࡼ࠺࡞ሙ ྜࠊணࡵ Web ࣮࣌ࢪࢆసᡂࡋ࡚ಖᏑࡋ࡚࠾ࡃࡇ࡜ࡣ࡛ࡁࡲࡏࢇࠋ  ࡑࡇ࡛ࠊࣈࣛ࢘ࢨ࠿ࡽ Web ࢧ࣮ࣂഃ࡟ࣜࢡ࢚ࢫࢺࡀᒆ࠸ࡓ᫬Ⅼ࡛ࠊࣜࢡ࢚ࢫࢺ࡟ῧ௜ࡉࢀ ࡓࢹ࣮ࢱࢆඖ࡟ࠕࣉࣟࢢ࣒ࣛࠖࡀ Web ࣮࣌ࢪࢆసᡂࡍࡿ௙⤌ࡳࡀ⪃࠼ฟࡉࢀࡲࡋࡓࠋ  ࡇࡢࡼ࠺࡞௙⤌ࡳࢆࠕCommonࢥ ࣔ ࣥ Gateway ࢤ ࣮ ࢺ ࢘ ࢚ ࢖ Interface ࢖ ࣥࢱ ࣮ࣇ࢙ ࢖ࢫ ࠖࠊ㏻⛠ࠕCGIࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ  CGI ࡛ࡣࠊࣜࢡ࢚ࢫࢺࡀ࠶ࡿ࡜ Web ࢧ࣮ࣂ࡜㐃ᦠࡋ࡚ࣉࣟࢢ࣒ࣛࡀ㉳ືࡋࡲࡍࠋࡇࡢࡼ࠺ ࡞ࠊWeb ࢧ࣮ࣂഃ࡛ືసࡍࡿࣉࣟࢢ࣒ࣛࢆࠕࢧ࣮ࣂࢧ࢖ࢻࣉࣟࢢ࣒ࣛࠖ࡜࿧ࡧࡲࡍࠋࡑࡋ࡚ ࣜࢡ࢚ࢫࢺ࡟ῧ௜ࡉࢀࡓࢹ࣮ࢱࢆ౑࠸ࠊࣉࣟࢢ࣒ࣛࡣࡑࡢሙ࡛ Web ࣮࣌ࢪࢆసᡂࡋࡲࡍࠋ 㟼ⓗ࡞ :HE ࣮࣌ࢪ㻌 ղࣜࢡ࢚ࢫࢺ࣮࣌ࢪ $ մࣞࢫ࣏ࣥࢫ

Web ࢧ࣮ࣂ



A

յ㻌 ཷಙࡋࡓ 㻴㼀㻹㻸

㻌

ձ ࣈࣛ࢘ࢨࡀ

࣮࣌ࢪ $ ࢆせồ

B

A

C

㻌

ճ:HE ࢧ࣮ࣂ࡟ಖᏑࡉࢀ࡚࠸ࡿ +70/

ࣇ࢓࢖ࣝࡢ୰࠿ࡽࠊ࣮࣌ࢪ $ ࢆぢ

ࡘࡅ࡚㏦ಙ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

 CGI ࡛ࡣࠊࣈࣛ࢘ࢨ࠿ࡽᒆ࠸ࡓࢹ࣮ࢱࢆ฼⏝ࡋ࡚⮬ືⓗ⬟ືⓗ࡟ HTML ࢹ࣮ࢱࢆసᡂࡍ ࡿࡓࡵࠊࡇࡢࡼ࠺࡞ Web ࣮࣌ࢪࢆࠕືⓗ࡞ Web ࣮࣌ࢪࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ



ືⓗ࡞ Web ࣮࣌ࢪࢆసᡂࡍࡿࡓࡵ࡟ࡣࠊWeb ࢧ࣮ࣂഃ࡛ Web ࢧ࣮ࣂ࡜㐃ືࡍࡿ CGI

ࣉࣟࢢ࣒ࣛࡀᚲせ࡛ࡍࠋࡇࡢࡼ࠺࡞ CGI ࣉࣟࢢ࣒ࣛࢆసᡂ࡛ࡁࡿࣉࣟࢢ࣑ࣛࣥࢢゝㄒ࡟

ࡣࠕPerlࣃ ࣮ ࣝࠖࠕPHPࠖࠕPythonࣃ ࢖ ࢯ ࣥࠖࠕRubyࣝ ࣅ ࣮ࠖ࡞࡝ࡀ࠶ࡾࡲࡍࠋ

 ࡲࡓࠊWeb ࢧ࣮ࣂ࡜㐃ືࡍࡿࣉࣟࢢ࣒ࣛࢆసᡂ࡛ࡁࡿࣉࣟࢢ࣑ࣛࣥࢢゝㄒࡢࡇ࡜ࢆࠊ ࠕࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺゝㄒࠖ࡜࿧ࡪሙྜࡶ࠶ࡾࡲࡍࠋ

 ㏆ᖺࠊWeb ࢧ࢖ࢺࡣ኱つᶍ໬ࡋ࡚࠾ࡾࠊ」ᩘྎࡢ Web ࢧ࣮ࣂࢆ᮰ࡡ࡚ྠ᫬㐠⏝ࡍࡿࡇ

࡜ࡶ⌋ࡋࡃ࠶ࡾࡲࡏࢇࠋࡇࡢࡼ࠺࡞ሙྜ࡟ࡣࠊOracle࢜ ࣛ ࢡ ࣝ♫ࡢࠕJavaࢪ ࣕ ࣂࠖࡸMicrosoft࣐ ࢖ ࢡ ࣟ ࢯ ࣇ ࢺ♫ࡢ

ࠕ.NETࢻࢵࢺࢿࢵࢺࠖ࡜࠸ࡗࡓࠊศᩓฎ⌮࡟ᑐᛂࡋࡓᢏ⾡ࢆ⏝࠸ࡿሙྜࡶ࠶ࡾࡲࡍࠋ ࣜࢡ࢚ࢫࢺ ࣮ࣘࢨ࣮ྡ㸸

୰ᓥ┬࿃

ࣞࢫ࣏ࣥࢫ

Web ࢧ࣮ࣂ



ࣈࣛ࢘ࢨ࡛ྡ๓ࢆධຊࡋ ࡚㏦ಙ࣎ࢱࣥࢆࢡࣜࢵࢡ ࠸ࡽࡗࡋࡷ࠸ ࠕ

୰ᓥ┬࿃

ࠖࡉࢇ

&*, ࣉࣟࢢ࣒ࣛ

࠸ࡽࡗࡋࡷ࠸ ࠕ

୰ᓥ┬࿃

ࠖࡉࢇ

ཷಙࡋࡓ 㻴㼀㻹㻸

_{&*, ࡟ࡼࡗ࡚సᡂࡉࢀࡓ +70/ ࢹ࣮ࢱ}

_

ືⓗ࡞ :HE ࣮࣌ࢪ㻌



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†‣†‥ ⁉⁗⁔ ⇈⇽∐⇗∞⇝∍∙‒

 CGI ࡢࡼ࠺࡞ࢧ࣮ࣂࢧ࢖ࢻࣉࣟࢢ࣒ࣛࢆ฼⏝ࡍࢀࡤࠊࣈࣛ࢘ࢨ࠿ࡽࡢධຊࢆࡁࡗ࠿ࡅ࡟ࡋ ࡚ᵝࠎ࡞ࣉࣟࢢ࣒ࣛࢆ㉮ࡽࡏࠊࡑࡢฎ⌮⤖ᯝࢆࣈࣛ࢘ࢨ࡟㏉ಙࡍࡿࡇ࡜ࡀ࡛ࡁࡲࡍࠋࡘࡲࡾࠊ ືⓗ࡞ Web ࣮࣌ࢪࢆ౑࠼ࡤ࣮࣡ࢻࣉࣟࢭࢵࢧࡸィ⟬⾲ࢯࣇࢺ࡜࠸ࡗࡓࠕ࢔ࣉࣜࢣ࣮ࢩࣙࣥࠖ ࡶసᡂ࡛ࡁࡿ࡜࠸࠺ࡇ࡜࡛ࡍࠋ  ࡇࡢࡼ࠺࡟ࠊࣈࣛ࢘ࢨ⏬㠃ࢆฟຊඛ࡜ࡍࡿ࢔ࣉࣜࢣ࣮ࢩࣙࣥࡢࡇ࡜ࢆࠕWeb ࢔ࣉࣜࢣ࣮ࢩࣙ ࣥࠖ࡜࿧ࡧࡲࡍࠋ  ࡲࡓࠊࢧ࣮ࣂࢧ࢖ࢻࣉࣟࢢ࣒ࣛࡣࠊ௚ࡢࢧ࣮ࣂ࡜㐃ᦠࡍࡿࡇ࡜ࡶ࡛ࡁࡲࡍࠋࡓ࡜࠼ࡤࠊ᳨ ⣴ࢧ࢖ࢺࡸࢩࣙࢵࣆࣥࢢࢧ࢖ࢺ࡞࡝኱つᶍ࡞ Web ࢔ࣉࣜࢣ࣮ࢩ࡛ࣙࣥࡣࠊࢹ࣮ࢱ࣮࣋ࢫࢧ࣮ ࣂ࡜㐃ᦠࡍࡿࡇ࡜࡛⭾኱࡞ࢹ࣮ࢱࢆฎ⌮ࡋ࡚࠸ࡲࡍࠋ



ղࣜࢡ࢚ࢫࢺ 㸦ධຊࢹ࣮ࢱ㸧 նࣞࢫ࣏ࣥࢫ 㸦+70/ ࢹ࣮ࢱ㸧

Web ࢧ࣮ࣂ

ձࣈࣛ࢘ࢨ࡛ධຊ



ฎ⌮⤖ᯝ

շཷಙࡋࡓ㻴㼀㻹㻸ࢹ࣮ࢱࢆࣞࣥࢲࣜࣥࢢ

յࣉࣟࢢ࣒ࣛࡀసᡂࡋࡓ +70/ ࢹ࣮ࢱ

ࣉࣟࢢ࣒ࣛ

ࢹ࣮ࢱ࣮࣋ࢫࢧ࣮ࣂ



ࢹ࣮ࢱ࣮࣋ࢫ



㻌

㻌

ճ᳨⣴ մ᳨⣴⤖ᯝ

㻌

:HE ࢔ࣉࣜࢣ࣮ࢩࣙࣥ㻌

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ



ࢹ࣮ࢱ࣮࣋ࢫࢧ࣮ࣂ࡟ࡶࠊከࡃࡢ✀㢮ࡀ࠶ࡾࡲࡍࠋWeb ࢔ࣉࣜࢣ࣮ࢩ࡛ࣙࣥ฼⏝ࡉࢀ

ࡿࢹ࣮ࢱ࣮࣋ࢫࢧ࣮ࣂ࡟ࡣࠊOracle ♫ࡢ OracleࠊMicrosoft ♫ࡢ SQL ServerࠊIBM ♫ࡢ DB2ࠊ࣮࢜ࣉࣥࢯ࣮ࢫࡢ MySQL࣐࢖࢚ࢫ࣮࢚࢟ࣗࣝࠊPostgreSQL࣏ࢫࢺࢢࣞࢫ ࣮࢚࢟ࣗࣝ࡞࡝ࡀ࠶ࡾࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ᄩᛐբ᫆‒



ڦ☜ㄆၥ㢟 

HTTP ࡟ࡼࡿ㏻ಙ࡛ࠊࣈࣛ࢘ࢨ࠿ࡽ Web ࢧ࣮ࣂ࡟ᑐࡋ࡚ Web ࣮࣌ࢪࢆせồࡍࡿࡇ࡜ࢆఱ࡜࿧ ࡧࡲࡍ࠿ࠋḟࡢ୰࠿ࡽ␒ྕ࡛⟅࠼࡞ࡉ࠸ࠋ ձ࢙࢘ࣈ ղࣜࢡ࢚ࢫࢺ ճࣞࢫ࣏ࣥࢫ մࣉࣟࢺࢥࣝ

ڦ☜ㄆၥ㢟 

Web ࢧ࣮ࣂ࠿ࡽ㏦ಙࡉࢀ࡚ࡁࡓ HTML ࢆゎ㔘ࡋ࡚⏬㠃ࢆྜᡂࡍࡿࡇ࡜ࢆఱ࡜࿧ࡧࡲࡍ࠿ࠋḟ ࡢ୰࠿ࡽ␒ྕ࡛⟅࠼࡞ࡉ࠸ࠋ ձࣁ࢖ࣃ࣮ࢸ࢟ࢫࢺ ղࣜࣥࢡ ճࣞࣥࢲࣜࣥࢢ մURL 

ڦ☜ㄆၥ㢟 

Web ࢔ࣉࣜࢣ࣮ࢩ࡛ࣙࣥࡣࠊࣈࣛ࢘ࢨ࠿ࡽධຊࡉࢀࡓࢹ࣮ࢱࢆ฼⏝ࡋ࡚ࢧ࣮ࣂࢧ࢖ࢻࣉࣟࢢ ࣒ࣛࡀ HTML ࢹ࣮ࢱࢆ⏕ᡂࡋࡲࡍࠋࡇࡢࡼ࠺࡞ Web ࣮࣌ࢪࢆఱ࡜࿧ࡧࡲࡍ࠿ࠋḟࡢ୰࠿ࡽ␒ ྕ࡛⟅࠼࡞ࡉ࠸ࠋ ձ࣮࣡ࢻࣉࣟࢭࢵࢧ ղィ⟬⾲ࢯࣇࢺ ճ㟼ⓗ Web ࣮࣌ࢪ մືⓗ Web ࣮࣌ࢪ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†․‒ ⁉⁗⁔ ∀∞⇞↝২ᘐ‒

 Web ࣮࣌ࢪࡢᇶᮏࡣࠊWeb ࢧ࣮ࣂ࠿ࡽ㏦ಙࡉࢀ࡚ࡁࡓ Web ࣮࣌ࢪࢆࣈࣛ࢘ࢨࡀࣞࣥࢲࣜࣥ ࢢࡋ࡚⾲♧ࡍࡿࡇ࡜࡛ࡍࡀࠊࡑࡢࡓࡵ࡟ࡣ HTML ௨እ࡟ࡶᵝࠎ࡞ᢏ⾡ࡀ౑ࢃࢀࡲࡍࠋ  ࡇࡇ࡛ࡣࠊWeb ࣮࣌ࢪ࡟㛵㐃ࡍࡿᢏ⾡ࡢ୰࠿ࡽ HTMLࠊCSSࠊJavaScriptࢪ ࣕ ࣂ ࢫ ࢡ ࣜ ࣉ ࢺࡢᴫせࢆゎㄝࡋ ࡲࡍࠋ

‣†․†‣ ›⁆‿‾‒

 WWW ࡛ࡣࠊࣈࣛ࢘ࢨࡀ Web ࢧ࣮ࣂ࡟ Web ࣮࣌ࢪࢆࣜࢡ࢚ࢫࢺࡍࡿ࡜ࠊヱᙜࡍࡿ HTML ࣇ࢓ ࢖ࣝࡢࢹ࣮ࢱࡀࣈࣛ࢘ࢨ࡟㏉ಙࡉࢀࡲࡍࠋࡇࡢࡼ࠺࡞ࠕ㟼ⓗ࡞ Web ࣮࣌ࢪࠖࡢሙྜࠊWeb ࢧ࣮ ࣂࡀ࡞ࡃ࡚ࡶ HTML ࣇ࢓࢖ࣝࢆ┤᥋ࣈࣛ࢘ࢨ࡛㛤࠸࡚☜ㄆࡍࡿࡇ࡜ࡀ࡛ࡁࡲࡍࠋ  ࡓ࡜࠼ࡤࠊḟࡢࡼ࠺࡞ࢸ࢟ࢫࢺࣇ࢓࢖ࣝࢆ⏝ពࡋࡓ࡜ࡋࡲࡍࠋ ࣇ࢓࢖ࣝྡ㸸sample10.html ึࡵ࡚ࡢHTML ࡼ࠺ࡇࡑࠊHTML5ࡢୡ⏺࡬  ࣇ࢓࢖ࣝᣑᙇᏊࢆࠕ.htmlࠖ࡟ࡋ࡚࠸ࡿࡢࡣࠊWindows ࡛ࡣ HTML ࣇ࢓࢖ࣝ࡜ࡋ࡚㛵㐃௜ ࡅࡀ⾜ࢃࢀࠊࢲࣈࣝࢡࣜࢵࢡ࡛ࣈࣛ࢘ࢨ࡟ࣇ࢓࢖ࣝࢆ⾲♧ࡉࡏࡿࡇ࡜ࡀ࡛ࡁࡿࡓࡵ࡛ࡍࠋ  ࡇࡢࣇ࢓࢖ࣝࢆࣈࣛ࢘ࢨ࡛㛤ࡃ࡜ࠊ௨ୗࡢࡼ࠺࡟ࣇ࢓࢖ࣝࡢෆᐜࢆ⾲♧ࡍࡿࡇ࡜ࡀ࡛ࡁࡲ ࡍࠋ  Internet Explorer 9 ࡛⾲♧ࡋࡓ౛  ࡇ࠺ࡋ࡚ࠊࣇ࢓࢖ࣝෆࡢࢸ࢟ࢫࢺࢆࣈࣛ࢘ࢨ࡟⾲♧ࡍࡿࡇ࡜ࡣ࡛ࡁࡲࡋࡓࡀࠊࡇࡢ ࠕsample10.htmlࠖࡣࠊᣑᙇᏊࡇࡑࠕhtml࡛ࠖࡍࡀṇᘧ࡞ HTML ࣇ࢓࢖ࣝ࡜ࡋ࡚ࡣ୙༑ศ࡛ࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

 ࡞ࡐ࡞ࡽࠊHTML ࡟ࡣࠕࢱ࢖ࢺࣝࡣ<title>ࢱࢢ࡛ᣓࡿࠖࠊࠕᮏᩥࡢጞࡲࡾ࠿ࡽ⤊ࢃࡾࢆ <body>ࢱࢢ࡛ᣓࡿࠖ࡜࠸ࡗࡓከࡃࡢ࣮ࣝࣝࡀỴࡲࡗ࡚࠸࡚ࠊࡑࡢ࣮ࣝࣝ࡟ᚑࡗ࡚ᩥ❶ࡢᙺ๭ ࢆ᫂☜࡟ࡋ࡞ࡃ࡚ࡣ࡞ࡽ࡞࠸࠿ࡽ࡛ࡍࠋ  ࡛ࡣࠊHTML ࡢ࣮ࣝࣝࢆᙜ࡚ࡣࡵ࡚ࠊᩥ❶ࢆ᭩ࡁ┤ࡋ࡚ࡳࡲࡋࡻ࠺ࠋ ࣇ࢓࢖ࣝྡ㸸sample11.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ึࡵ࡚ࡢHTML</title> </head> <body> ࡼ࠺ࡇࡑࠊHTML5ࡢୡ⏺࡬ </body> </html>  ࡇࡢࡼ࠺࡟ࠊHTML ࡛ࡣࠕ<ࢱࢢྡ> 㹼 </ࢱࢢྡ>࡛ࠖᩥ❶ࢆᅖ࠸ࠊᩥ❶࡟ព࿡ࡸᙺ๭ࢆタ ᐃࡋࡲࡍࠋࡓ࡜࠼ࡤࠊ<title> 㹼 </title>࡛ᅖࡲࢀࡓࠕึࡵ࡚ࡢ HTMLࠖ㒊ศࡣࠊ࣮࣌ࢪ ࢱ࢖ࢺࣝ࡜ࡋ࡚ࣈࣛ࢘ࢨࡀゎ㔘ࡋࡲࡍࠋࡑࡢࡓࡵࠊࠕsample11.htmlࠖࢆ IE9 ࡛⾲♧ࡍࡿ࡜ࠊ ࢘࢕ࣥࢻ࢘࡟࡛ࡣ࡞ࡃࠊࢱࣈ࡟࣮࣌ࢪࢱ࢖ࢺࣝ࡜ࡋ࡚⾲♧ࡉࢀࡲࡍࠋ Internet Explorer 9 ࡛⾲♧ࡋࡓ౛  ࡲࡓࠊࢱࢢ⮬యࡣᩥ❶࡟ព࿡ࡸᙺ๭ࢆ୚࠼ࡿࡶࡢ࡞ࡢ࡛ࠊࣈࣛ࢘ࢨ࡟ࡣ⾲♧ࡉࢀࡲࡏࢇࠋ  ࡇࡢࡼ࠺࡞ࠕࢱࢢ࡟ࡣ࡝ࢇ࡞✀㢮ࡀ࠶ࡾࠊព࿡ࡣఱ࠿ࠖ࡜࠸ࡗࡓ࣮ࣝࣝసࡾࢆࠕᶆ‽໬ࠖ ࡜࿧ࡧࠊHTML ࡣࠕWorld ࣡ ࣮ ࣝ ࢻ Wide ࣡ ࢖ ࢻ Web ࢙࢘ࣈ Consortium ࢥ ࣥ ࢯ ࣮ ࢩ ࢔ ࣒ ࠖࠊ㏻⛠ࠕW3Cࠖ࡜࿧ࡤࢀࡿᅋయࡀ HTML ࡢ ᶆ‽໬ࢆ㐍ࡵ࡚࠸ࡲࡍࠋ ࢱࣈ࡟⾲♧ࡉࢀ࡚࠸ࡿ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

 ⌧ᅾ2012 ᖺࡢ HTML ࡢ᭱᪂ࣂ࣮ࢪࣙࣥࡣࠊW3C ࡀ 1999 ᖺ࡟ࠕ່࿌ࣂ࣮ࢪࣙࣥࡀ☜ᐃࡍ ࡿࡇ࡜ࠖࡋࡓ 4.01 ࡛ࡍࠋ  4.01 ࡢ່࿌ᚋࠊHTML ࡣࠕExtensible࢚ ࢡ ࢫ ࢸ ࣥ ࢩ ࣈ ࣝ HyperText ࣁ ࢖ࣃ ࣮ࢸ࢟ ࢫࢺ Markup ࣐࣮ࢡ࢔ࢵࣉ Language ࣛ ࣥ ࢤ ࣮ ࢪ ࠖࠊ㏻⛠ࠕXHTMLࠖ ࡬⛣⾜ࡍࡿணᐃ࡛ࡋࡓࡀࠊXHTML ࡣ Web 㛤Ⓨ⪅ࡢ㈶ྠࢆᚓࡿࡇ࡜ࡀ࡛ࡁࡎࠊࡋࡧࢀࢆษࡽࡋ ࡓࣈࣛ࢘ࢨ࣓࣮࣮࢝ࡸ㛤Ⓨ⪅ࡀࠊ᪂ࡓ࡞ࢥ࣑ࣗࢽࢸ࢕࣮ࢆⓎ㊊ࡋࠕWeb࢙࢘ ࣈ Applications࢔ ࣉ ࣜ ࢣ ࣮ ࢩ ࣙ ࣥ ࢬ 1.0ࠖ ࡸࠕWeb࢙࢘ ࣈ Formsࣇ࢛ ࣮࣒ࢬ 2.0ࠖ࡜࠸ࡗࡓ᪂ᶵ⬟ࢆᥦၐࡍࡿࡼ࠺࡟࡞ࡾࡲࡋࡓࠋࡑࡢ⤖ᯝࠊXHTML ࡢᶆ

‽໬సᴗࡣᡴࡕษࡽࢀࠊ⌧ᅾࡣࠕWeb Applications 1.0ࠖࠕWeb Forms 2.0ࠖࢆ྾཰ࡋࡓ ᙧ࡛ࠕHTML5ࠖࡢᶆ‽໬ࡀ㐍ࡵࡽࢀ࡚࠸ࡲࡍࠋ  ᮏ᭩ࡢࢧࣥࣉࣝࣇ࢓࢖ࣝࡶࠊࠕHTML5ࠖࡢ௙ᵝ࡛グ㏙ࡋ࡚࠸ࡲࡍࠋ  HTML5 ࡢ᭱኱ࡢ≉ᚩࡣࠊࠕCSS3ࠖࡸࠕJavaScript ࡢ APIࠖ࡜࠸ࡗࡓࠊࠕᮏ᮶ࡣ HTML ࡜ࡣ ูࡢᢏ⾡ࠖࢆࠊHTML5 ࡢ௙ᵝࡢ୰࡟ྵࡵ࡚ࡋࡲࡗࡓⅬ࡟࠶ࡾࡲࡍࠋ  ࡇࢀ࡟ࡼࡾࠊࡇࢀࡲ࡛ࣈࣛ࢘ࢨࡈ࡜࡟௙ᵝࡀࣂࣛࣂࣛࡔࡗࡓࡾࠊࠕFlashࣇࣛ ࢵࢩࣗࠖࡢࡼ࠺࡞ࣈࣛ࢘ ࢨ࡜ࡣูࡢࣉࣟࢢ࣒ࣛࣉࣛࢢ࢖ࣥࡀᚲせࡔࡗࡓࡾࡋࡓ௨ୗࡢᶵ⬟࡟ࡘ࠸࡚ࠊࣈࣛ࢘ࢨ༢య ࡛ࠊ࠿ࡘ⤫୍ࡋࡓ௙ᵝ࡛ฎ⌮ࡀᐇ⾜࡛ࡁࡿࡼ࠺࡟࡞ࡾࡲࡋࡓࠋ ە ࣐ࣝࢳ࣓ࢹ࢕࢔෌⏕ࠊࢢࣛࣇ࢕ࢵࢡࢫฎ⌮ ە ࣇ࢛࣮࣒ᶵ⬟ࡢᙉ໬ ە ࢜ࣇࣛ࢖࡛ࣥࡢືసࡸࠊ࣮ࣟ࢝ࣝࣇ࢓࢖ࣝ࡬ࡢ࢔ࢡࢭࢫ ە ࢻࣛࢵࢢ࢔ࣥࢻࢻࣟࢵࣉࡢᐇ⌧ ە ྠࡌ࣮࣌ࢪࡢࡲࡲ Web ࢧ࣮ࣂ࡜ࡢ㏻ಙ ە ࣂࢵࢡࢢࣛ࢘ࣥࢻ࡛ࡢฎ⌮ ە Cookie ࢡ ࢵ ࢟ ࣮ ࡼࡾࡶ኱ࡁ࡞ࢹ࣮ࢱࢆࣈࣛ࢘ࢨഃ࡟ಖᣢ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 ࠕW3Cࠖࡀ⾜ࡗ࡚࠸ࡿࠕHTML ࡢᶆ‽໬ࠖ࡜ࡣࠊHTML ࡟᪂ࡓ࡟㏣ຍࡍࡿࢱࢢࡸᶵ⬟ࢆࠊ 」ᩘࡢேࡸ௻ᴗࡀ᳨ウࡍࡿసᴗࢆ࠸࠸ࡲࡍࠋࡑࡋ࡚ࠊ࠶ࡿ⛬ᗘỴࡲࡗࡓ≧ែࢆࠕࢻࣛࣇ ࢺࠖ࡜࿧ࡧࠊᐇ㝿࡟ヨࡍࡇ࡜ࡀ࡛ࡁࡿࡼ࠺࡟࡞ࡾࡲࡍࠋḟ࡟ࠊࢻࣛࣇࢺ࡛Ⓨ⏕ࡋࡓၥ㢟 ࢆಟṇࡋࡓࠕ່࿌ࠖࡢ≧ែ࡟࡞ࡾࡲࡍࠋࡇࡢࠕ່࿌ࠖࢆࡶࡗ࡚ࠊࣂ࣮ࢪࣙࣥࡀ☜ᐃࡋࡲ ࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

Ӌᎋᴾ

 Windows ࡣࠊࡼࡃ౑࠺ᣑᙇᏊࡀࢹࣇ࢛ࣝࢺ࡛㠀⾲♧࡟࡞ࡗ࡚࠸ࡲࡍࠋࡑࡢሙྜࠊࠕࣇ࢛ ࣝࢲ࣮࢜ࣉࢩࣙࣥࠖࢆ౑࠸ࠊᣑᙇᏊࢆ⾲♧ࡍࡿࡼ࠺࡟ኚ᭦ࡋ࡚࠾ࡁࡲࡋࡻ࠺ࠋ  Windows Vista/7 ࡢࠕࣇ࢛ࣝࢲ࣮࢜ࣉࢩࣙࣥࠖࢆ౑࠺ᡭ㡰ࡣࠊḟࡢࡼ࠺࡟࡞ࡾࡲࡍࠋ  ࢚ࢡࢫࣉ࣮࣮ࣟࣛࢆ㉳ືࡋ࡚ࠊ[ᩚ⌮]࣓ࢽ࣮ࣗ࡟࠶ࡿࠕࣇ࢛ࣝࢲ࣮࡜᳨⣴ࡢ࢜ࣉࢩࣙ ࣥࠖࢆࢡࣜࢵࢡࡋࠕࣇ࢛ࣝࢲ࣮࢜ࣉࢩࣙࣥࠖࢲ࢖࢔ࣟࢢࢆ⾲♧ࡋࡲࡍࠋ[⾲♧]ࢱࣈࢆࢡ ࣜࢵࢡࡋࠊࠕⓏ㘓ࡉࢀ࡚࠸ࡿᣑᙇᏊࡣ⾲♧ࡋ࡞࠸ࠖࡢࢳ࢙ࢵࢡࢆࢡࣜࢵࢡࡋ࡚እࡋࡲࡍࠋ [㐺⏝]࣎ࢱࣥࢆࢡࣜࢵࢡࡋ࡚㐺⏝ᚋࠊ[×]࣎ࢱ࡛ࣥࢲ࢖࢔ࣟࢢࢆ㛢ࡌࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†․†․ ⇑⇟⇗∞⇭⇉∙⇖∝⇟⇥⇊∑∝⇝∞⇮‒

 ࠕCascading࢝ ࢫࢣ ࣮ࢹ࢕ ࣥࢢ Style ࢫ ࢱ ࢖ ࣝ Sheets ࢩ ࣮ ࢺ ࠖࠊ㏻⛠ࠕCSSࠖ࡜ࡣࠊWeb ࣮࣌ࢪࢆ࡝ࡢࡼ࠺࡟ಟ㣭ࢹࢨ࢖ ࣥࡍࡿ࠿ࢆᣦ♧ࡍࡿ௙ᵝ࡛ࡍࠋ  ࡓ࡜࠼ࡤࠊᩥ❶ࡢ୍㒊ศࡢࣇ࢛ࣥࢺࢧ࢖ࢬࢆ 40 ࣆࢡࢭ࡛ࣝ⾲♧ࡋࡓ࠸ሙྜࠊḟࡢࡼ࠺࡟ࠊ <style type="text/css"> 㹼 </style>ࢱࢢ࡛ CSS ࢆタᐃࡋࡲࡍࠋ

ࣇ࢓࢖ࣝྡ㸸sample12.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ึࡵ࡚ࡢHTML</title> <style type="text/css"> span{ font-size: 40px } </style> </head> <body> <p>ࡼ࠺ࡇࡑࠊ<span>HTML5</span>ࡢୡ⏺࡬</p> </body> </html>  ୖグࡢ CSS ࢆ౑࠺࡜ࠊᩥ❶ࡢ≉ᐃࡢ㒊ศࡢࣇ࢛ࣥࢺࢧ࢖ࢬࢆኚ᭦࡛ࡁࡲࡍࠋ Internet Explorer 9 ࡛⾲♧ࡋࡓ౛  HTML4.01 ࡲ࡛ࡣࠊࢱࢢ⮬య࡟ぢࡓ┠ࢆኚ᭦࡛ࡁࡿᶵ⬟ࡀከࡃ⏝ពࡉࢀ࡚࠸ࡲࡋࡓࠋඛ࡯ ࡝ࡢࣇ࢛ࣥࢺࡶࠊCSS ࢆ౑ࢃࡎ࡟ኚ᭦ࡍࡿࡇ࡜ࡀ࡛ࡁࡲࡋࡓࠋࡋ࠿ࡋࠊHTML5 ࡛ࡣࠊᵝࠎ࡞ ၥ㢟࠿ࡽࠊぢࡓ┠ࢆኚ᭦ࡍࡿᶵ⬟ࡣ࡯࡜ࢇ࡝ CSS ࡬⛣⾜ࡍࡿࡇ࡜࡟ࡋ࡚ࠊぢࡓ┠ࢆࢱࢢ࡛ኚ ᭦ࡍࡿࡇ࡜ࡣ⚗Ṇࡉࢀࡲࡋࡓࠋ  ࡇࢀ࡟ࡣࠊḟࡢࡼ࠺࡞⌮⏤ࡀ࠶ࡗࡓ࠿ࡽ࡛ࡍࠋ ࡇࡇࡢࣇ࢛ࣥࢺࡔࡅ኱ࡁࡃ࡞ࡗࡓ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

 ࡓ࡜࠼ࡤࠊᩘ༑࣮࣌ࢪ௨ୖ࠶ࡿ Web ࢧ࢖ࢺࢆసᡂࡋ࡚࠸ࡓ࡜ࡁࠊ㏵୰࡛ぢฟࡋࡢࢹࢨ࢖ࣥ ࢆᑡࡋࡔࡅኚ᭦ࡋࡓ࠸࡜ᛮࡗࡓ࡜ࡋࡲࡍࠋHTML ࡔࡅ࡛ Web ࣮࣌ࢪࢆグ㏙ࡋ࡚࠸ࡿ࡜ࠊࡍ࡭ ࡚ࡢ࣮࣌ࢪࡢぢฟࡋࢆ୹ᛕ࡟᳨⣴ࡋ࡚ኚ᭦ࡋ࡚࠸ࡃᚲせࡀ࠶ࡾࡲࡍࠋ  ࡋ࠿ࡋࠊᩥ᭩ࡢᵓ㐀࡜ぢࡓ┠ࢆศ㞳ࡍࡿ CSS ࢆ౑ࡗࡓሙྜࡣࠊ࡝࠺࡛ࡋࡻ࠺࠿ࠋ  CSS ࡛ぢฟࡋࡢࢹࢨ࢖ࣥࢆᐃ⩏ࡋ࡚࠾ࡅࡤࠊCSS ࡢぢฟࡋࢆኚ᭦ࡍࡿࡔࡅ࡛ࠊࡍ࡭࡚ࡢᩥ ᭩ࡢぢฟࡋࡀኚࢃࡾࡲࡍࠋ  ࡲࡓࠊCSS ࡢ㒊ศࡣࠊูࡢࣇ࢓࢖ࣝ࡟ศ㞳ࡍࡿࡇ࡜ࡶ࡛ࡁࡿࡢ࡛ࠊࡇࡢࣇ࢓࢖ࣝࢆணࡵࣈ ࣛ࢘ࢨࡀㄞࡳ㎸ࢇ࡛࠾ࡅࡤࠊ฼⏝ࡋ࡚࠸ࡿ࣮࣌ࢪࡢࣞࣥࢲࣜࣥࢢࡀ㏿ࡃ࡞ࡿ࡜࠸ࡗࡓ࣓ࣜࢵ ࢺࡶ࠶ࡾࡲࡍࠋ  ᐇࡣࠊWeb ࣮࣌ࢪࡢࣞ࢖࢔࢘ࢺ࡟ࡘ࠸࡚ࡶࠊHTML5 ࡛ࡣ኱ࡁ࡞ኚ᭦ࡀ࠶ࡾࡲࡍࠋ  HTML4.01 ௨๓ࡢ Web ࣮࣌ࢪ࡛ࡣࠊtable ࢱࢢࢆ౑ࡗ࡚ Web ࣮࣌ࢪࡢࣞ࢖࢔࢘ࢺࢆᩚ࠼ࡿ ࡶࡢࡀከࡃ࠶ࡾࡲࡍࡀࠊᮏ᮶ table ࢱࢢࡣࠕ⾲ࠖࢆ⾲⌧ࡍࡿࡓࡵࡢࢱࢢ࡛࠶ࡾࠊࣞ࢖࢔࢘ࢺ ࡢࡓࡵࡢࢱࢢ࡛ࡣ࠶ࡾࡲࡏࢇࠋ  ࡲࡓࠊ┠ࡢ୙⮬⏤࡞࣮ࣘࢨ࣮ࡀ㡢ኌㄞࡳୖࡆࢯࣇࢺࢆ౑ࡗ࡚ Web ࣮࣌ࢪࢆ㜀ぴࡋ࡚࠸ࡿሙ ྜࡶࠊධࡾ⤌ࢇࡔ table ࢱࢢ࡛ࡣࠊṇࡋ࠸㡰␒࡛෌⏕ࡍࡿࡇ࡜ࡀ࡛ࡁࡲࡏࢇࠋ  ࡇࡢࡼ࠺࡞࣮ࣘࢨ࣮ࣅࣜࢸ࢕ࡢほⅬ࠿ࡽࡶࠊHTML5 ࡛ࡣᩥ❶࡜ぢࡓ┠ࢆ᏶඲࡟ศ㞳ࡋ࡚ࠊ ぢࡓ┠ࡣ CSS ࡟グ㏙ࡍࡿࡼ࠺࡟࡞ࡗࡓࡢ࡛ࡍࠋ  CSS ࡟ࡶ HTML ྠᵝ࡟ࣂ࣮ࢪࣙࣥࡀ࠶ࡾࡲࡍࠋ᭱᪂ࡢࣂ࣮ࢪࣙࣥࡣࠊ2011 ᖺ 6 ᭶࡟່࿌ࡉ ࢀࡓ CSS2.1 ࡛ࡍࠋࡓࡔࡋࠊHTML5 ࡀ฼⏝ࡍࡿ CSS ࡣࠊ୍㒊່࿌ࡢ῭ࢇࡔ CSS3 ࡟࡞ࡾࡲࡍࠋ  CSS3 ࡟ࡣࠊࣈࣟࢵࢡࡢゅࢆ୸ࡃࢹࢨ࢖ࣥࡍࡿࠊᩥᏐ࡟ᙳࢆ௜ࡅࡿࠊࢢࣛࢹ࣮ࢩࣙࣥࢆ⾲⌧ ࡛ࡁࡿ࡞࡝ࠊከࡃࡢ᪂ᶵ⬟ࡀ㏣ຍࡉࢀ࡚࠸ࡲࡍࠋ  ᮏ᭩࡛ࡣࠊࡇࡢ CSS3 ࢆ➨ 5 ❶࠿ࡽᏛ⩦ࡋࡲࡍࠋ

+70/



&66

 ఍♫ᴫせ  ᥇⏝᝟ሗ  ࠾ၥ࠸ྜࢃࡏ  ஦ᴗ⤂௓

:HE ࣮࣌ࢪ

㻌



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†․†‥ ⇕∏⇊⇈∙⇮⇛⇊⇯⇟⇕∐⇽⇮‒

 ືⓗ࡞ Web ࣮࣌ࢪࢆసࡿ࡟ࡣࠊWeb ࢧ࣮ࣂഃ࡛ HTML ࢆ⏕ᡂࡍࡿࣉࣟࢢ࣒ࣛࡀᚲせ࡟࡞ࡾ ࡲࡍࠋࡇࡢࢧ࣮ࣂഃ࡛ືసࡍࡿࣉࣟࢢ࣒ࣛࢆసᡂࡍࡿゝㄒࢆࠊࠕࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺࠖ ࡜࿧ࡪࡇ࡜ࡣࡍ࡛࡟ㄝ᫂ࡋࡲࡋࡓࠋ  ࡇࡢࠕࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺࠖ࡜ࡣู࡟ࠊHTML ࡜୍⥴࡟グ㏙ࡋ࡚ Web ࣮࣌ࢪ࡟ືࡁࡸ ฎ⌮ࢆ㏣ຍࡍࡿࠕࢡࣛ࢖࢔ࣥࢺࢧ࢖ࢻࢫࢡࣜࣉࢺࠖ࡜࿧ࡤࢀࡿゝㄒࡀ࠶ࡾࡲࡍࠋ  ࠕࢡࣛ࢖࢔ࣥࢺࠖ࡜ࡣࠊࢧ࣮ࣂ࡟ᑐࡋ࡚࿨௧ࢆ୚࠼ࡿഃࡢࢥࣥࣆ࣮ࣗࢱࡸࢯࣇࢺ࢚࢘࢔ࡢ ࡇ࡜࡛ࠊWWW ࡛ࡣࠕࣈࣛ࢘ࢨࠖࡀࢡࣛ࢖࢔ࣥࢺࢯࣇࢺࡢ௰㛫࡟࡞ࡾࡲࡍࠋ  ࡘࡲࡾࠊࠕࢡࣛ࢖࢔ࣥࢺࢧ࢖ࢻࠖ࡜ࡣࠊࢡࣛ࢖࢔ࣥࢺ࡛࠶ࡿࠕࣈࣛ࢘ࢨഃ࡛ࠖືసࡍࡿࣉ ࣟࢢ࣑ࣛࣥࢢゝㄒ࡜࠸࠺ព࿡࡟࡞ࡾࡲࡍࠋ  ࢡࣛ࢖࢔ࣥࢺࢧ࢖ࢻࢫࢡࣜࣉࢺ࡟ࡣࠊ࠸ࡃࡘ࠿ࡢ✀㢮ࡀ࠶ࡾࡲࡍࡀࠊ㏻ᖖࠊHTML5 ࡜⤌ࡳ ྜࢃࡏࡿࡢࡣࠊࠕJavaScriptࢪ ࣕ ࣂ ࢫ ࢡ ࣜ ࣉ ࢺࠖ࡜࿧ࡤࢀࡿゝㄒ࡛ࡍࠋ  JavaScript ࡣࠊࠕ࢜ࣈࢪ࢙ࢡࢺᣦྥࠖ࡜࠸࠺⪃࠼᪉ࢆ᥇⏝ࡋ࡚࠸ࡿࡓࡵࠊఱ࠿࿨௧ࢆᐇ⾜ ࡍࡿ࡜ࡁࡣࠊ⏝ពࡉࢀ࡚࠸ࡿࠕ࢜ࣈࢪ࢙ࢡࢺࡢᶵ⬟࣓ࢯࢵࢻࢆ࿧ࡧฟࡍࠖᚲせࡀ࠶ࡾࡲࡍࠋ

 ࡇࡢ JavaScript ࡢ௙ᵝࢆỴᐃࡋ࡚࠸ࡿࡢࡣࠊࠕEuropeanࣚ ࣮ ࣟ ࣆ ࢔ ࣥ Computer

ࢥ ࣥ ࣆ ࣗ ࣮ ࢱ Manufacturer ࣐ ࢽ ࣗ ࣇ ࢓ ࢡ ࢳ ࣕ ࣮ Association ࢔ ࢯ ࢩ ࢚ ࣮ ࢩ ࣙ ࣥ ࠖࠊ㏻⛠ࠕECMA࢚ ࢡ ࣐ࠖ࡜࿧ࡤࢀࡿᶆ‽໬ᅋయ࡛ࡍࠋࡑࡋ࡚ࠊ⌧ᅾከࡃࡢࣈࣛ࢘ࢨࡀ ᥇⏝ࡋ࡚࠸ࡿ JavaScript ࡣࠊࠕECMA-262 3rd ࢚ࢹ࢕ࢩࣙࣥࠖ࡜࿧ࡤࢀࡿࠊ1999 ᖺ࡟సᡂ ࡉࢀࡓゝㄒ௙ᵝ࡟ᇶ࡙࠸࡚࠸ࡲࡍࠋ  ࡲࡓࠊᐇ㝿࡟ JavaScript ࡛฼⏝࡛ࡁࡿ࢜ࣈࢪ࢙ࢡࢺࡸᶵ⬟ࡢ㞟ྜࢆࠊJavaScript ࡢ ࠕApplication࢔ ࣉ ࣜ ࢣ ࣮ ࢩ ࣙ ࣥ Program ࣉࣟ ࢢ࣑ࣛࣥ ࢢ Interface ࢖ ࣥ ࢱ ࣮ ࣇ ࢙ ࢖ ࢫ ࠖࠊ㏻⛠ࠕAPIࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋHTML5 ࡛ࡣࠊᑓ⏝ࡢ API ࡀከᩘᥦ౪ࡉࢀ࡚࠸ࡲࡍࠋ  ᮏ᭩࡛ࡣࠊࡇࡢ JavaScript ࢆ➨ 6 ❶࠿ࡽᏛ⩦ࡋࡲࡍࠋ -DYD6FULSW ࡛࡛ࡁࡿࡇ࡜㻌 Ja ᳨⣴࣎ࢱࣥࢆᢲࡍ๓࡟ࠊධ ຊ㏵୰࠿ࡽ᳨⣴⤖ᯝࢆ⾲ ♧ࡍࡿࠋ -D -DYD -DYD6FULSW ࣐࢘ࢫࡢືసࢆ᳨▱ࡋ࡚ࠊ ⏬ീࢆษࡾ᥮࠼ࡓࡾ⛣ື ࡉࡏࡓࡾࡍࡿࠋ㻌 ᆅᅗ ࢱ࢖࣐࣮㻦㻜㻜㻦㻜㻜㻦㻡㻥

㻌

ࢱ࢖࣐࣮ࡸ࢖ࣥࢱ࣮ࣂࣝ ࢆ฼⏝ࡋ࡚⮬ືⓗ࡟ฎ⌮ ࢆ࿧ࡧฟࡍࠋ㻌 ࢔ࢽ࣓࣮ࢩࣙࣥ

㻌

㻌

㻌

᳨⣴



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ᄩᛐբ᫆‒

ڦ☜ㄆၥ㢟 

HTML ࡣࠊఱ࡟ࡼࡗ࡚ᩥ❶࡟ព࿡ࡸᙺ๭࡜࠸ࡗࡓ᝟ሗࢆᇙࡵ㎸ࡳࡲࡍ࠿ࠋḟࡢ୰࠿ࡽ␒ྕ࡛⟅ ࠼࡞ࡉ࠸ࠋ ձࢱࢢ ղෆᐜ ճCSS մJavaScript

ڦ☜ㄆၥ㢟 

HTML5 ࡢ≉ᚩ࡜ࡋ࡚ࠊṇࡋ࠸ࡶࡢࢆࡍ࡭࡚ḟࡢ୰࠿ࡽ␒ྕ࡛⟅࠼࡞ࡉ࠸ࠋ ձࠕCSS3ࠖࡸࠕJavaScript ࡢ APIࠖࢆࠊ௙ᵝ࠿ࡽศ㞳ࡍࡿࡇ࡜࡟ᡂຌࡋࡓࠋ ղྠࡌ࣮࣌ࢪࡢࡲࡲ Web ࢧ࣮ࣂ࡜㏻ಙ࡛ࡁࡿࠋ ճࣂࢵࢡࢢࣛ࢘ࣥࢻฎ⌮ࡀ࡛ࡁ࡞࠸ࠋ մ࣐ࣝࢳ࣓ࢹ࢕࢔෌⏕ࡀ࡛ࡁࡿࠋ

ڦ☜ㄆၥ㢟 

CSS ࡢ≉ᚩ࡜ࡋ࡚ࠊṇࡋ࠸ࡶࡢࢆࡍ࡭࡚ḟࡢ୰࠿ࡽ␒ྕ࡛⟅࠼࡞ࡉ࠸ࠋ ձCSS ࡣࠊWeb ࣮࣌ࢪࡢᩥ❶࡜ࢹࢨ࢖ࣥࢆศ㞳ࡍࡿࠋ ղCSS ࡣࠊHTML ࣇ࢓࢖ࣝ࡟ෆ࡟グ㏙ࡍࡿࡇ࡜ࡣ࡛ࡁ࡞࠸ࠋ ճCSS ࡣࠊูࡢࣇ࢓࢖ࣝ࡟ศ㞳ࡍࡿࡇ࡜ࡣ࡛ࡁ࡞࠸ࠋ մCSS ࡛ࡣࠊtable ࢲࢢࢆ౑ࡗ࡚ Web ࣮࣌ࢪࡢࣞ࢖࢔࢘ࢺࢆᩚ࠼ࡲࡍࠋ







➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

ڦ☜ㄆၥ㢟 

ࣈࣛ࢘ࢨഃ࡛ືసࡍࡿࣉࣟࢢ࣑ࣛࣥࢢゝㄒࢆఱ࡜࿧ࡧࡲࡍ࠿ࠋṇࡋ࠸ࡶࡢࢆ␒ྕ࡛⟅࠼࡞ࡉ ࠸ࠋ ձJava ゝㄒ ղAPI ճࢧ࣮ࣂࢧ࢖ࢻࢫࢡࣜࣉࢺゝㄒ մࢡࣛ࢖࢔ࣥࢺࢧ࢖ࢻࢫࢡࣜࣉࢺゝㄒ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ᵏᵌᵑ

ᴾ ᵦᵲᵫᵪ ἧỳỶἽỉؕஜᴾ

 Web ࢧ࢖ࢺࡸ Web ࣮࣌ࢪࡢ௙⤌ࡳࢆ⌮ゎࡍࡿ࡟ࡣࠊ᭱ึ࡟ HTML ࡢᵓ㐀ࢆ⌮ゎࡍࡿࡢࡀ᪩ 㐨࡛ࡍࠋࡇࡇ࡛ࡣࠊHTML ࡢᇶᮏᵓ㐀ࢆᏛ⩦ࡋࡲࡍࠋ

‣†‥†‣

›⁆‿‾ ⇁Ѡࢍↈ↺↎↰↝แͳ‒

 HTML ࢆຮᙉࡍࡿࡢ࡟≉ู࡞ࢶ࣮ࣝࡣᚲせ࠶ࡾࡲࡏࢇࠋ⏝ពࡍࡿࡢࡣࠕࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱࠖ ࡜ࠕࣈࣛ࢘ࢨ࡛ࠖࡍࠋ  ࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱ࡜ࡣࠊࢥࣥࣆ࣮ࣗࢱ࡛ᩥᏐࢆධຊࡋ࡚ࣇ࢓࢖ࣝ࡟ಖᏑ࡛ࡁࡿࢯࣇࢺ࢙࢘ ࢔ࡢࡇ࡜࡛ࠊWindows ࡞ࡽᶆ‽࡛ῧ௜ࡉࢀ࡚࠸ࡿࠕ࣓ࣔᖒࠖࡀࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱ࡛ࡍࠋ  ࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱࡣࠊ౑࠸័ࢀࡓࡶࡢࡀ࠶ࢀࡤࡑࢀ࡛࠿ࡲ࠸ࡲࡏࢇࠋࡲࡓࠊࣇ࣮ࣜࢯࣇࢺ ࡜ࡋ࡚ࢲ࣮࢘ࣥࣟࢻ࡛ࡁࡿࡶࡢࡶࡓࡃࡉࢇ࠶ࡾࡲࡍࠋࡓࡔࠊ࡝ࡕࡽࡢሙྜࡶࠊࢸ࢟ࢫࢺࢆࣇ࢓ ࢖ࣝ࡟ಖᏑࡍࡿ㝿࡟ࠊᩥᏐࢥ࣮ࢻࡀᣦᐃ࡛ࡁࡿࢱ࢖ࣉ࡛࡞ࡅࢀࡤ࠸ࡅࡲࡏࢇࠋ  ࣈࣛ࢘ࢨ࡟ࡘ࠸࡚ࡣࠊࠕHTML5 ᑐᛂࣈࣛ࢘ࢨࠖࢆ⏝ពࡋࡲࡍࠋHTML5 ࡣࡲࡔࠕ່࿌ࠖ๓࡜ ࠸࠺ࡇ࡜ࡶ࠶ࡾࠊࣈࣛ࢘ࢨ࡟ࡼࡗ࡚ࡣ⣽࠿࠸௙ᵝࡀᐇ⿦࡛ࡁ࡚࠸ࡲࡏࢇࠋ࡛ࡁࡿࡔࡅ᭱᪂ࡢ

ࣈࣛ࢘ࢨࢆ⏝ពࡋࡲࡋࡻ࠺ࠋInternet࢖ ࣥ ࢱ ࣮ ࢿ ࢵ ࢺ Explorer࢚ ࢡ ࢫ ࣉ ࣟ ࣮ ࣛࣂ࣮ࢪࣙࣥ 9 ௨ୖࡸࠊGoogleࢢ ࣮ ࢢ ࣝ Chromeࢡ ࣟ ࣮ ࣒ࠊ

Firefo x ࣇ࢓࢖࢔ࣇ࢛ࢵࢡࢫ ࠊSafariࢧ ࣇ ࢓ ࣜࡢ᭱᪂ࣂ࣮ࢪ࡛ࣙࣥ࠶ࢀࡤࠊᇶᮏⓗ࡞ HTML5 ࡢ௙ᵝ࡟ᑐᛂࡋ࡚࠸ࡲࡍࠋ  ࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱࡢ‽ഛࡀ࡛ࡁࡓࡽࠊ௨ୗࡢࡼ࠺࡟ධຊࡋ࡚ࡳࡲࡋࡻ࠺ࠋ ࣇ࢓࢖ࣝྡ㸸sample13.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5₇⩦</title> </head> <body> <h1>ึࡵ࡚ࡢHTML5</h1> <p>HTML5ࡣࠊ᭱᪂ࡢHTML࡛ࡍࠋ<br> ௒ᚋࠊWeb࣮࣌ࢪࡢ୺ὶ࡟࡞ࡿࡇ࡜ࡣ㛫㐪࠸࡞࠸࡛ࡋࡻ࠺ࠋ</p> </body> </html>



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

 ධຊࡀ᏶஢ࡋࡓࡽࠊࣇ࢓࢖ࣝྡࢆࠕsample13.htmlࠖ࡟ࡋ࡚ಖᏑࡋࡲࡍࠋ  ಖᏑࡍࡿሙᡤࢹ࢕ࣞࢡࢺࣜࡸࣇ࢛ࣝࢲࡣࠊ⮬ศࡀศ࠿ࡾࡸࡍ࠸ሙᡤ࡛࠶ࢀࡤ࡝ࡇ࡛ࡶ࠿ ࡲ࠸ࡲࡏࢇࠋᮏ᭩࡛ࡣ Windows 7 ࢆ౑⏝ࡋ࡚࠸ࡿࡢ࡛ࠊC ࢻࣛ࢖ࣈࡢ࣮ࣝࢺ࡟ Sample ࣇ࢛ ࣝࢲࢆసࡾࠊಖᏑࡋ࡚࠸ࡲࡍࠋಖᏑࡢ㝿࡟ὀពࡍࡿⅬ࡜ࡋ࡚ࡣࠊᩥᏐࢥ࣮ࢻࢆࠕUTF-8ࠖ࡟ ࡍࡿࡇ࡜ࠊᣑᙇᏊࢆࠕ.htmlࠖ࡟ࡍࡿࡇ࡜࡛ࡍࠋ  ಖᏑ࡛ࡁࡓࡽࠊࣈࣛ࢘ࢨ࡛⾲♧ࡋࡲࡍࠋ  ࣈࣛ࢘ࢨࢆ㉳ືࡋࡓࡽ࢔ࢻࣞࢫḍ࡟ࠊಖᏑࡋࡓሙᡤ࡜ࣇ࢓࢖ࣝྡࣃࢫࢆධຊࡋࡲࡍࠋ Windows ࡞ࡽ࢚ࢡࢫࣉ࣮࣮ࣟࣛ࡞࡝࡛ࠊࣇ࢓࢖ࣝࢆ┤᥋ࢲࣈࣝࢡࣜࢵࢡࡋ࡚㛤ࡃࡇ࡜ࡶ࡛ࡁ ࡲࡍࠋ Internet Explorer 9 ࡛⾲♧ࡋࡓ౛  ୖࡢᅗࡢࡼ࠺࡟⾲♧࡛ࡁࢀࡤࠊHTML ࢆຮᙉࡍࡿ‽ഛࡣ᏶஢࡛ࡍࠋ௒ᚋࠊᮏ᭩࡛᪂ࡓ࡞ᶵ⬟ ࢆ⤂௓ࡋࡓ࡜ࡁࡣࠊୖグࡢᡭ㡰࡛ධຊࡋ࡚ࣈࣛ࢘ࢨ࡛☜ㄆࡍࡿࡇ࡜ࡀ࡛ࡁࡲࡍࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 ᩥᏐࢥ࣮ࢻ࡜ࡣࠊࢥࣥࣆ࣮ࣗࢱࡀᩥᏐࢆ㆑ูࡍࡿࡓࡵ࡟ྛᩥᏐ࡟๭ࡾᙜ࡚ࡽࢀࡿ␒ྕ ࡸࡑࡢᑐᛂ㛵ಀࡢࡇ࡜࡛ࡍࠋ  ᪥ᮏࡢᩥᏐࢥ࣮ࢻ࡟ࡣࠊISO-2022-JPࠊEUC-JPࠊShift_JISࠊUTF-8 ࡞࡝ࡀ࠶ࡾࠊ Windows ࡛ࡣ Windows-31J ࡢࡼ࠺࡟ Shift_JIS ࢆᨵⰋࡋࡓࡶࡢࡶ౑ࢃࢀࡲࡍࠋ  ࡓ࡜࠼ࡤࠊࣈࣛ࢘ࢨࡀ Shift_JIS ࡔ࡜ุ᩿ࡋ࡚⾲♧ࡋࡓ Web ࣮࣌ࢪࡢᩥᏐࢥ࣮ࢻࡀࠊ ᐇࡣ UTF-8 ࡔࡗࡓሙྜࠊᩥᏐ࡜ࡑࡢ␒ྕࡀ␗࡞ࡿࡓࡵࠕᩥᏐ໬ࡅࠖࡢ≧ែ࡟࡞ࡾࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

Ӌᎋᴾ

 HTML ࣇ࢓࢖ࣝࢆ࣓ࣔᖒ࡛సᡂࡍࡿ࡜ࡁࡣࠊᣑᙇᏊ࡜ᩥᏐࢥ࣮ࢻ࡟ὀពࡋ࡚ࡃࡔࡉ࠸ࠋ ࣓ࣔᖒࡣࠊࢹࣇ࢛ࣝࢺ࡛ᣑᙇᏊࠕ.txtࠖࢆ㏣ຍࡋࡲࡍࠋࡑࡢࡓࡵࠕsample01.html.txtࠖ ࡢࡼ࠺࡟࡞ࡗ࡚ࡋࡲ࠺ሙྜࡀ࠶ࡿࡢ࡛ࠊಖᏑࢲ࢖࢔ࣟࢢࡢࠕࣇ࢓࢖ࣝࡢ✀㢮ࠖࢆࠕࡍ࡭ ࡚ࡢࣇ࢓࢖ࣝࠖ࡟ኚ᭦ࡋࡲࡍࠋ  ࡲࡓࠊᩥᏐࢥ࣮ࢻࡶࠕUTF-8ࠖ࡟ኚ᭦ࡋ࡚࠿ࡽಖᏑࡋ࡚ࡃࡔࡉ࠸ࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

‣†‥†․ ‶⁁‵⁆⁋⁂‷ ܳᚕ‒

 ࠕHTML ࢆຮᙉࡍࡿࡓࡵࡢ‽ഛ࡛ࠖධຊࡋࡓ HTML ࣇ࢓࢖ࣝࢆぢࡿ࡜ࠊඛ㢌⾜࡟ḟࡢࡼ࠺࡞ グ㏙ࡀ࠶ࡾࡲࡍࠋ <!DOCTYPE html>  ࡇࢀࢆࠕDOCTYPEࢻ ࢡ ࢱ ࢖ ࣉᐉゝࠖ࡜࿧ࡧࠊࡇࡢᩥ᭩ࡀ HTML5 ࡛సᡂࡉࢀ࡚࠸ࡿࡇ࡜ࢆ⾲ࡋࡲࡍࠋ  HTML5 ௨๓ࡢ HTMLࠊࡓ࡜࠼ࡤ HTML 4.01 ࡢ DOCTYPE ᐉゝࡣࠊ௨ୗࡢࡼ࠺࡞グ㏙࡛ࡋࡓࠋ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  ୖグࡢᐉゝ࡟ࡣࠊHTML ࡢࣂ࣮ࢪࣙࣥࡸࢱࢢᐃ⩏ࡀグ㏙ࡉࢀࡓᩥ᭩ࢆཧ↷ࡍࡿࡓࡵࡢ URL ࡜࠸ࡗࡓ᝟ሗࡀグ㍕ࡉࢀ࡚࠸ࡲࡍࡀࠊHTML5 ࡢ DOCTYPE ᐉゝ࡟ࡣᚲせ࠶ࡾࡲࡏࢇࠋ  ㏻ᖖࠊDOCTYPE ᐉゝࡣグ㏙ࡋ࡞ࡃ࡚ࡶ Web ࣮࣌ࢪࡣ⾲♧ࡉࢀࡲࡍࠋࡋ࠿ࡋࠊᐉゝࡀ࡞࠸ሙ ྜࠊࣈࣛ࢘ࢨࡀࠕ஫᥮࣮ࣔࢻࠖ࡜࿧ࡤࢀࡿ࣮ࣔࢻ࡛ HTML ࢆゎ㔘ࡋ࡚ࠊCSS ࡸ JavaScript ࡢ⾲♧ࡸᣲືࡀ␗࡞ࡿሙྜࡀ࠶ࡾࡲࡍࠋ࡛ࡍ࠿ࡽࠊDOCTYPE ᐉゝࡣᚲࡎ௜ࡅࡓ࡯࠺ࡀࡼ࠸࡜ ࠸࠼ࡲࡍࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 ࣈࣛ࢘ࢨࡀ Web ࣮࣌ࢪࡢ HTML ࢆࣞࣥࢲࣜࣥࢢࡍࡿ࡜ࡁࠊࠕᶆ‽࣮ࣔࢻࠖ࡜ࠕ஫᥮࣮ࣔ ࢻࠖࡢ࡝ࡕࡽ࠿ࢆ౑࠸ࡲࡍࠋ  ࠕᶆ‽࣮ࣔࢻ࡛ࠖࡣබᘧࡢ CSS ᶆ‽࡟‽ᣐࡋࡓᙧ࡛ HTML ࡜ CSS ࡀゎ㔘ࡉࢀࡲࡍࡀࠊ ࠕ஫᥮࣮ࣔࢻ࡛ࠖࡣࡑࡢࣈࣛ࢘ࢨࡀ㐣ཤ࡟ᐃࡵ࡚࠸ࡓ⊂⮬ࡢ࣮࡛ࣝࣝ HTML ࢆゎ㔘ࡋࡲ ࡍࠋ  ஫᥮࣮ࣔࢻࡀࣈࣛ࢘ࢨ࡟⏝ពࡉࢀ࡚࠸ࡿ⌮⏤ࡣࠊCSS ࡀᶆ‽໬ࡉࢀࡿ௨๓ࡢ Web ࣮࣌ ࢪࡀࠊ⌧ᅾ࡛ࡶ฼⏝ࡉࢀ࡚࠸ࡿሙྜࡀ࠶ࡿࡓࡵ࡛ࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

‣†‥†‥ ›⁆‿‾ ↝⇥⇖‒

 HTML ࡢࢱࢢ࡟ࡣࠕ㛤ጞࢱࢢࠖ࡜ࠕ⤊஢ࢱࢢࠖࡀ࠶ࡾࠊព࿡ࡸᙺ๭࡜࠸ࡗࡓ᝟ሗࢆ㏣ຍࡋ ࡓ࠸ᩥ❶ࢆࠊࡇࡢ 2 ࡘࡢࢱࢢ࡛ᣳࡳࡲࡍࠋࡇࡢࠕ㛤ጞࢱࢢࠖ࠿ࡽࠕ⤊஢ࢱࢢࠖࡲ࡛ࡢ㒊ศࢆ ࠕせ⣲ࠖࠊࢱࢢ࡟ᣳࡲࢀ࡚࠸ࡿ㒊ศࢆࠕෆᐜࠖ࡜࿧ࡧࡲࡍࠋ <㛤ጞࢱࢢ> ᝟ሗࢆ㏣ຍࡍࡿᩥ❶ </⤊஢ࢱࢢ>  㛤ጞࢱࢢࡢ᭩ࡁ᪉ࡣࠊࡲࡎ༙ゅグྕࠕ<ࠖࢆ᭩ࡁࠊࢱࢢࡢྡ๓ࢱࢢྡࢆ᭩ࡁࡲࡍࠋࢱࢢ ྡࡶ༙ゅ࡛グ㏙ࡋࡲࡍࠋᩥᏐࡣ኱ᩥᏐᑠᩥᏐ࡝ࡕࡽ࡛ࡶ࠿ࡲ࠸ࡲࡏࢇࡀࠊ㏻ᖖᑠᩥᏐ࡛グ㏙ ࡋࡲࡍࠋ㛤ጞࢱࢢࡣࠕ>࡛ࠖ⤊஢ࡋࡲࡍࠋ⤊஢ࢱࢢࡣࠕ</ࠖࢆグ㏙ࡋ࡚ࢱࢢྡࢆ᭩ࡁࠕ>࡛ࠖ ⤊஢ࡋࡲࡍࠋ ࡑࢀ࡛ࡣࠊࡶ࠺୍ᗘࠊࢧࣥࣉࣝࡢࠕsample13.htmlࠖࢆぢ࡚ࡳࡲࡋࡻ࠺ࠋ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5₇⩦</title> </head> <body> <h1>ึࡵ࡚ࡢHTML5</h1> <p>HTML5ࡣࠊ᭱᪂ࡢHTML࡛ࡍࠋ<br> ௒ᚋࠊWeb࣮࣌ࢪࡢ୺ὶ࡟࡞ࡿࡇ࡜ࡣ㛫㐪࠸࡞࠸࡛ࡋࡻ࠺ࠋ</p> </body> </html> ࡇࡢ HTML ࡟Ⓩሙࡍࡿせ⣲ࡢព࿡ࡣࠊḟࡢࡼ࠺࡟࡞ࡾࡲࡍࠋ ەKWPO せ⣲  html せ⣲ࡣࠊࡇࡢࢻ࣓࢟ࣗࣥࢺࡀ HTML ᩥ᭩࡛࠶ࡿࡇ࡜ࢆ⾲ࡋࡲࡍࠋ<html> 㹼 </html> ࡣᩥ᭩ࡢࠕ࣮ࣝࢺࠖ࡟࡞ࡾࡲࡍࠋࠕ࣮ࣝࢺࠖ࡜ࡣࠊࠕ኱ඖࠖ࡜࠿ࠕ㉳※ࠖࠕฟ㌟ࠖ࡜࠸ࡗࡓព ࿡࡛ࠊࡇࡇ࠿ࡽ HTML ᩥ᭩ࡢෆᐜࡀጞࡲࡾࡲࡍࠋhtml せ⣲ࡢෆᐜ࡟ࡣࠊ head せ⣲࡜ body せ⣲ࡀྛ 1 ࡘᚲせ࡛ࡍࠋ せ⣲ ෆᐜ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

ەKHDG せ⣲  head࣊ ࢵ ࢻせ⣲ࡣࠊ࣊ࢵࢲ࣮᝟ሗࡇࡢ࣮࣌ࢪࡢᇶᮏ᝟ሗࢆ⾲ࡋࡲࡍࠋ࣊ࢵࢲ࣮᝟ሗ࡟ࡣࠊࠕmeta せ⣲ࠖࡸࠕtitle せ⣲ࠖ࡞࡝ࢆྵࡳࡲࡍࠋ ەPHWD せ⣲  meta࣓ ࢱせ⣲ࡣࠊࡑࡢ࣮࣌ࢪࡀ࡝ࢇ࡞ᛶ㉁࡛࡝ࡢࡼ࠺࡞್࠿࡜࠸࠺᝟ሗࢆタᐃࡋࡲࡍࠋᩥ❶࡟ ఱ࠿ព࿡ࡸᙺ๭ࢆ୚࠼ࡿࡶࡢ࡛ࡣ࡞࠸ࡢ࡛ࠊせ⣲ࡣࢱࢢࡔࡅࢆグ㏙ࡋࡲࡍࠋ  ࡇࡢࡼ࠺࡟ࠊ㛤ጞࢱࢢࠊ⤊஢ࢱࢢࡢ༊ูࡢ࡞࠸せ⣲ࢆࠕ✵せ⣲ࠖ࡜࿧ࡧࠊࠕ>ࠖࡢ๓࡟/ࢫ ࣛࢵࢩࣗࢆグ㏙ࡋࡲࡍࠋࡓࡔࡋࠊHTML5 ࡛ࡣ / ࢆグ㏙ࡋ࡞ࡃ࡚ࡶ㛫㐪࠸࡛ࡣ࡞࠸ࡓࡵࠊᮏ ᭩࡛ࡣ✵せ⣲࡟ / ࡣグ㏙ࡋ࡚࠸ࡲࡏࢇࠋ ەWLWOH せ⣲  titleࢱ ࢖ ࢺ ࣝせ⣲ࡣࠊᩥ❶ࡢࢱ࢖ࢺࣝࢆ⾲ࡋࡲࡍࠋ㏻ᖖࠊtitle せ⣲ࡢෆᐜࡣࠊࣈࣛ࢘ࢨࡢࢱࣈ ࡸࢱ࢖ࢺࣝࣂ࣮࡟⾲♧ࡉࢀࡲࡍࠋ ەERG\ せ⣲  body࣎ ࢹ ࢕せ⣲ࡣࠊࣈࣛ࢘ࢨࡢ࢘࢕ࣥࢻ࢘ෆ࡟⾲♧ࡉࢀࡿࢥࣥࢸࣥࢶࢆ⾲ࡋࡲࡍࠋbody せ⣲ࡢ ෆᐜ࡟ࡣࠊぢฟࡋࠊẁⴠࠊ⾲ࠊࣇ࢛࣮࣒࡞࡝ࠊࢥࣥࢸࣥࢶࢆᙧసࡿせ⣲ࢆグ㏙ࡋࡲࡍࠋ ەK せ⣲  ぢฟࡋࢆ௜ࡅࡿせ⣲࡛ࡍࠋせ⣲ࡣࠊࣞ࣋ࣝ࡟ࡼࡗ࡚<h1>࠿ࡽ<h6>ࡲ࡛࠶ࡾࡲࡍࠋh1 せ⣲ ࡣࠊ୍␒ୖ఩ࡢࣞ࣋ࣝ࡟࡞ࡾࡲࡍࠋ ەS せ⣲  p せ⣲ࡣࠊࠕẁⴠࠖࢆ⾲ࡍࡓࡵ࡟౑⏝ࡋࡲࡍࠋࡋࡓࡀࡗ࡚ࠊẁⴠ௨እࡢ⾲⌧࡟౑⏝ࡍ࡭ࡁ࡛ ࡣ࠶ࡾࡲࡏࢇࠋࡓ࡜࠼ࡤࠊp せ⣲ࡢ⤊஢ࢱࢢࡢᚋࢁ࡟ࡣࢫ࣮࣌ࢫࡀ⏕ࡌࡲࡍࡀࠊᨵ⾜ࡋࡓ࠸ ሙྜࡣࠊ<br>ࢱࢢࢆ౑࠺࡭ࡁ࡛ࡍࠋࡲࡓࠊᩥ❶ࡀẁⴠ࡛ࡣ࡞ࡃࠕࢭࢡࢩࣙࣥࠗ1.4 ࢥࣥࢸ ࣥࢶ࣭ࣔࢹ࡛ࣝ࠘ㄝ᫂ࡋࡲࡍࠖ࡜ࡋ࡚༊ษࡽࢀࡿ࡜⪃࠼ࡿሙྜࡣࠊࢭࢡࢩࣙࣥ㛵㐃ࡢࢱࢢ ࢆ౑࠸ࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ەEU せ⣲  br せ⣲ࡣࠊᨵ⾜ࢆ⾲ࡋࡲࡍࠋࡋࡓࡀࡗ࡚ࠊࣞ࢖࢔࢘ࢺ࡞࡝ᨵ⾜௨እࡢ⾲⌧࡟౑⏝ࡍ࡭ࡁ࡛ࡣ࠶ ࡾࡲࡏࢇࠋࡶࡋ P せ⣲࡟ࡼࡾẁⴠࡢ⤊➃ࢆ⾲ࡋࡓࡢ࡛࠶ࢀࡤࠊbr せ⣲ࢆධࢀ࡞ࡃ࡚ࡶᨵ⾜ࡣࡋࡲ ࡍࠋࡋ࠿ࡋࠊࡇࡢሙྜࡶࣞ࢖࢔࢘ࢺ࡟౑⏝ࡋ࡚ࡣ࠸ࡅࡲࡏࢇࠋࣞ࢖࢔࢘ࢺ࡟ࡣࠊCSS ࢆ౑࠸ࡲࡍࠋ

‣†‥†… ›⁆‿‾ ↝ޓࣱ‒

 HTML ࡢࢱࢢ࡟ࡣࠊࠕᒓᛶࠖࡢ࠶ࡿࡶࡢࡀ࠶ࡾࡲࡍࠋᒓᛶ࡜ࡣࠊࢱࢢ࡟㏣ຍࡍࡿ⿵㊊᝟ሗࡢ ࡇ࡜࡛ࡍࠋᒓᛶࡣࠕᒓᛶྡࠖ࡜ࠕᒓᛶ್࡛ࠖᵓᡂࡉࢀࡲࡍࠋ  ᒓᛶࡢ᭩ࡁ᪉ࡣࠊᒓᛶྡࢆグ㏙ࡋࠊࠕ=࢖ࢥ࣮ࣝࠖ࡜ᒓᛶ್ࢆグ㏙ࡋࡲࡍࠋᒓᛶ್ࡣࠕ"ࢲ ࣈࣝࢡ࢛࣮ࢸ࣮ࢩࣙࣥ࡛ࠖᅖࡳࡲࡍࠋᒓᛶ್௨እࡣࠊࡍ࡭࡚༙ゅ࡛グ㏙ࡋࡲࡍࠋ ᒓᛶྡ="ᒓᛶ್"  ᒓᛶࢆࢱࢢ࡟ᣦᐃࡍࡿ࡟ࡣࠊࢱࢢྡࡢᚋࢁ࡟༙ゅࢫ࣮࣌ࢫࢆグ㏙ࡋ࡚ࠊᒓᛶࢆ㏣ຍࡋࡲࡍࠋ <ࢱࢢྡ ᒓᛶ="ᒓᛶ್"> ᝟ሗࢆ㏣ຍࡍࡿᩥ❶ </ࢱࢢྡ>  ᒓᛶࢆ」ᩘᣦᐃࡍࡿሙྜࡣࠊ༙ゅࡢࢫ࣮࣌ࢫࢆධࢀࠊḟࡢᒓᛶࢆグ㏙ࡋࡲࡍࠋ <ࢱࢢྡ ᒓᛶ 1="ᒓᛶ್ 1" ᒓᛶ 2="ᒓᛶ್ 2" ࣭࣭࣭> ᝟ሗࢆ㏣ຍࡍࡿᩥ❶ </ࢱࢢྡ>

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 せ⣲ྠኈ࡟ࡣࠊࠕぶᏊ㛵ಀࠖࡸࠕ඗ᘵ㛵ಀࠖࡀ࠶ࡾࡲࡍࠋ  ࡓ࡜࠼ࡤࠊ࠶ࡿせ⣲ࡢෆᐜ࡜ࡋู࡚ࡢせ⣲ࡀྵࡲࢀࡿሙྜࠊࡑࢀࡒࢀࡢせ⣲ࡣぶᏊ㛵 ಀ࡟࠶ࡿ࡜࠸࠸ࡲࡍࠋ

 sample13.html ࢆ౛࡟ࡍࡿ࡜ࠊhtml せ⣲ࡢෆᐜࢆ࡜ࡋ࡚ head せ⣲ࠊbody せ⣲ࡀ࠶ ࡿࡇ࡜ࡀࢃ࠿ࡾࡲࡍࠋࡇࡢ head せ⣲ࡸ body せ⣲࠿ࡽぢࡿ࡜ࠊhtml せ⣲ࡣࠕぶせ⣲ࠖ ࡛࠶ࡾࠊhtml せ⣲࠿ࡽぢࡓ head せ⣲࡜ body せ⣲ࡣࠕᏊせ⣲࡛ࠖࡍࠋࡑࡋ࡚ࠊ୧⪅ࡢ 㛵ಀࢆࠕぶᏊ㛵ಀࠖ࡜࿧ࡧࡲࡍࠋ

 ࡲࡓࠊhead せ⣲࡜ body せ⣲ࡣࠊྠࡌࣞ࣋ࣝࡢ html せ⣲ࡢᏊせ⣲࡛࠶ࡿࡇ࡜࠿ࡽࠕ඗ ᘵ㛵ಀ࡟࠶ࡿࠖ࡜࠸࠸ࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

第１

章

第１

章

 ࡇࡇ࡛ࡍ࡭࡚ࡢᒓᛶࢆ⤂௓ࡍࡿࡇ࡜ࡣ࡛ࡁ࡞࠸ࡢ࡛ࠊࠕsample13.html࡛ࠖⓏሙࡋࡓᒓᛶ ࢆ⤂௓ࡋࡲࡍࠋ ەlang ᒓᛶ ౛㸸<html lang="ja">  langࣛ ࣥ ࢢᒓᛶࡣࠊᩥ❶ࡀ࡝ࡢゝㄒ࡛グ㏙ࡉࢀ࡚࠸ࡿ࠿ࢆᣦᐃࡋࡲࡍࠋࠕjaࠖࡣ᪥ᮏㄒ࡛ࡍࠋࡑ ࡢ࡯࠿࡟ࠕenࠖⱥㄒࠊࠕzhࠖ୰ᅜㄒࠊࠕkoࠖ㡑ᅜㄒࠊࠕdeࠖࢻ࢖ࢶㄒ࡞࡝ከᩘ࠶ࡾࡲࡍࠋ ەcharset ᒓᛶ ౛㸸<meta charset="UTF-8">  charset࢟ ࣕ ࣛ ࢭ ࢵ ࢺᒓᛶࡣࠊࡇࡢ࣮࣌ࢪࡢᩥᏐࢥ࣮ࢻ᝟ሗࢆ⾲ࡋࡲࡍࠋᣦᐃ࡛ࡁࡿᩥᏐࢥ࣮ࢻ࡟ࡣ ࠕUTF-8ࠖ௨እ࡟ࡶࠊࠕShift_JISࠖࡸࠕEUC-JPࠖ࡞࡝ࡀ࠶ࡾࡲࡍࡀࠊHTML5 ࡛ࡣᩥᏐࢥ࣮ ࢻ࡟ࠕUTF-8ࠖࢆᙉࡃ᥎ዡࡋ࡚࠸ࡲࡍࠋ  ὀពࡍࡿⅬ࡜ࡋ࡚ࡣࠊcharset ᒓᛶ࡛ࠕUTF-8ࠖࢆᣦᐃࡋࡓࡢ࡛࠶ࢀࡤࠊ࢚ࢹ࢕ࢱ࡛ࡑࡢ ࣇ࢓࢖ࣝࢆಖᏑࡍࡿ࡜ࡁ࡟ࠊᩥᏐࢥ࣮ࢻࢆࠕUTF-8ࠖ࡟ࡋ࡞ࡅࢀࡤ࠸ࡅࡲࡏࢇࠋ  ࡑࡢ௚ࡢᒓᛶ࡟ࡘ࠸࡚ࡣࠊࡑࡢ㒔ᗘᚲせ࡟ᛂࡌ࡚⤂௓ࡋ࡚࠸ࡁࡲࡍࠋࡍࡄ࡟࡝ࡢࡼ࠺࡞ᒓ ᛶࡀ࠶ࡿࡢ࠿▱ࡾࡓ࠸࡜ࡁࡣࠊࠕ௜㘓ࠖࢆཧ↷ࡋ࡚ࡃࡔࡉ࠸ࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 HTML ࡢᒓᛶ࡟ࡣࠊ࡯࡜ࢇ࡝ࡢࢱࢢ࡟⏝ពࡉࢀࡓඹ㏻ࡢᒓᛶࡀ࠶ࡾࡲࡍࠋࡇࡢᒓᛶࡢࡇ ࡜ࢆࠕࢢ࣮ࣟࣂࣝᒓᛶࠖ࡜࿧ࢇ࡛࠸ࡲࡍࠋ  ࢢ࣮ࣟࣂࣝᒓᛶ࡟ࡣࠊせ⣲࡟ᑐࡋ࡚㆑ูᏊ࡜࡞ࡿ ID ࢆタᐃࡍࡿࠕid ᒓᛶࠖࡸࠊCSS ࡛฼⏝ࡍࡿ class ᒓᛶ࡞࡝ࡀ࠶ࡾࡲࡍࠋ

ᵭᶌᶃᴾᵮᶍᶇᶌᶒᴾ

 ௨๓ࡢ HTML ࡛ࡣࠊ⾲♧఩⨨ࢆไᚚࡍࡿࡓࡵ࡟ align ᒓᛶࡀ౑⏝ࡉࢀ࡚ࡁࡲࡋࡓࡀࠊ HTML5 ࡛ࡣᗫṆࡉࢀ࡚࠸ࡲࡍࠋせ⣲ࡢ⾲♧఩⨨ࡣ CSS ࡛ᣦᐃࡋࡲࡍࠋ



➨  ❶ࠉ:HE ࣮࣌ࢪࡢᇶᮏ

ᄩᛐբ᫆‒

ڦ☜ㄆၥ㢟 

௨ୗࡢࢶ࣮ࣝࡢ୰࡛ࠊHTML ࣇ࢓࢖ࣝࢆసᡂࡍࡿࡢ࡟᭱ࡶ㐺ࡋࡓࢶ࣮ࣝࡣ࡝ࢀ࡛ࡍ࠿ࠋ␒ྕ࡛ ⟅࠼࡞ࡉ࠸ࠋ ձࣈࣛ࢘ࢨ ղ࣓࣮ࣝࢯࣇࢺ ճࢸ࢟ࢫࢺ࢚ࢹ࢕ࢱ մ⣬࡜㖄➹

ڦ☜ㄆၥ㢟 

ḟࡢᩥ❶ࡢ✵ḍ㒊ศ࡟ᙜ࡚ࡣࡲࡿゝⴥࢆㄒྃࡢ୰࠿ࡽ㑅ࡧࠊグྕ࡛⟅࠼࡞ࡉ࠸ࠋ HTML ࡢࢱࢢࡣࠊ᭱ึ࡟ࠕ ձ ࠖࠊࠕ ղ ࠖࠊࠕ ճ ࠖࡢ㡰࡛グ㏙ࡋࡲࡍࠋࡇࡢࠕ ձ ࠖ ࠿ࡽࠕ ճ ࠖࡲ࡛ࡢ㒊ศࢆࠕ մ ࠖ࡜࿧ࡧࡲࡍࠋ ㄒྃ ࢔せ⣲ ࢖㛤ጞࢱࢢ ࢘⤊஢ࢱࢢ ࢚᝟ሗࢆ㏣ຍࡍࡿᩥ❶

ڦ☜ㄆၥ㢟 

ḟࡢᩥ❶ࡢ✵ḍ㒊ศ࡟ᙜ࡚ࡣࡲࡿゝⴥࢆㄒྃࡢ୰࠿ࡽ㑅ࡧࠊグྕ࡛⟅࠼࡞ࡉ࠸ࠋ HTML ࡢࢱࢢ࡟ࡣࠊࠕᒓᛶࠖࡢ࠶ࡿࡶࡢࡀ࠶ࡾࡲࡍࠋᒓᛶ࡜ࡣࠊࢱࢢ࡟㏣ຍࡍࡿ⿵㊊᝟ሗ࡛ࡍࠋ ᒓᛶࡣࠕ ձ ࠖ࡜ࠕ ղ ࡛ࠖᵓᡂࡉࢀࡲࡍࠋ ᒓᛶࡢ᭩ࡁ᪉ࡣࠊ ձ ࢆグ㏙ࡋࠊࠕ=ࠖ࡜ ղ ࢆグ㏙ࡋࡲࡍࠋ ղ ࡣࠕ ճ ࡛ࠖᅖࡳ ࡲࡍࠋ ㄒྃ ࢔༙ゅࢫ࣮࣌ࢫ ࢖ᒓᛶྡ ࢘ࢲࣈࣝࢡ࢛࣮ࢸ࣮ࢩࣙࣥ ࢚ᒓᛶ್