HTTP CSS入門 Markup Languageについて xxMLという言語がいくつかある。その成立順序を見てみる。1. Standard Generalized Markup Language 1986 年 ISO規格ISO

　

HTTP・CSS入門～Webアプリ構築への道～

職業能力開発総合大学校東京校情報系

　福良　博史

目次

1 はじめに 1

2 Markup Languageについて 2

2.1 HTMLの書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.2 XMLの書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.3 XHTMLの書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.4 HTML(内部に CSSを定義)の書き方 . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.5 HTML(外部の CSS定義を参照)の書き方 . . . . . . . . . . . . . . . . . . . . . . . 3

3 HTMLの基礎 4

3.1 基本的な内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.2 リンクの書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.3 イメージの表示方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.4 横罫線・箇条書きの表現方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.5 内部リンクの方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.6 テーブルの作成方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.7 フォームの作成方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.8 フレームの作成方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.9 画像の一部クリックする方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.10 複雑なテーブル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 CSSの基礎 17

4.1 文字の修飾方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.2 背景に図柄を入れる方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.3 テーブル用スタイル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5 JavaScriptの基礎 22

5.1 文字表示の方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

5.2 時を刻む方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.3 入力の加算方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5.4 日付の確認 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.5 順次処理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.6 条件分岐 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

5.7 繰返し（ループ） . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5.8 ラジオボタンの使い方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

5.9 文字の点滅方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5.10 入力項目の妥当性検証の方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

6 応用編 34

6.1 順路表示ナビゲーション：パンくず (breadcrumb)リスト . . . . . . . . . . . . . . 34

A 参考図書 35

i

表目次

図目次

1 複雑なテーブルの実験例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

ii

1 はじめに

　HTMLおよびCSSを用いたホームページ作製の基本的な説明を行う。詳細はW3Cが提供している仕様1 を参照してください。

2010 年 4 月 26 日福良　博史

1HTML,XML,XHTML,CSS等

1

2 Markup Languageについて

xxMLという言語がいくつかある。その成立順序を見てみる。

1. Standard Generalized Markup Language 1986年　 ISO規格 ISO 8879

(a) Hyper Text Markup Language 1997年 12月 W3C勧告 HTML4.0

(b) eXtensible Markup Language 1998年 2月 W3C勧告 XML1.0

(c) eXtensible Hyper Text Markup Language 2000年 1月 W3C勧告 XHTML1.0

2. Cascading Style Sheet(段階スタイルシート)1998年 5月　W3C勧告 CSS2

2.1 HTMLの書き方

ソースコード 1: htmlNonCss.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><HTML lang=”ja”><HEAD><META HTTP−EQUIV=”Content−Type” CONTENT=”text /html ; cha r s e t=Sh i f t J I S”><TITLE>ホームページCSS無し</TITLE></HEAD><BODY>今日は！</BODY></HTML>

2.2 XMLの書き方

ソースコード 2: xml010.xml

<?xml ve r s i on =”1.0” encoding=”Sh i f t J I S ”?><名簿><ユーザ name=”野比のびた” passwd=”hogehoge”>

<t e l> 000−000−000</ t e l><t e l> 001−000−000</ t e l><t e l> 002−000−000</ t e l>

</ユーザ><ユーザ name=”星のすみれ” passwd=”hogehoge”>

<t e l> 000−000−000</ t e l><t e l> 002−000−000</ t e l>

</ユーザ></名簿>

2.3 XHTMLの書き方

ソースコード 3: xhtml01.xhtml

<?xml ve r s i on =”1.0” encoding=”Sh i f t J I S ”?><!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1.0 S t r i c t //EN”

”http ://www.w3 . org /TR/xhtml1/DTD/xhtml1−s t r i c t . dtd”><html xmlns=”http ://www.w3 . org /1999/ xhtml” xml : lang=”ja ” lang=”ja”>

2

<head><t i t l e >XHTMLの基本</ t i t l e >

</head><body>

<p>初めてのXHTML</p></body>

</html>

2.4 HTML(内部にCSSを定義)の書き方

ソースコード 4: htmlWithCss.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><HTML lang=”ja”><HEAD><TITLE>ホームページ CSSを内部で定義</TITLE><META HTTP−EQUIV=”Content−Type” CONTENT=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>body {

margin : 2em 10% 3em 10%;background−c o l o r : #0000FF;c o l o r : #FFFFFF;

}</s ty l e></HEAD><BODY>今日は！CSSをHTML内部で定義</BODY></HTML>

2.5 HTML(外部のCSS定義を参照)の書き方

ソースコード 5: ./css/s0001.css

body {margin : 2em 10% 3em 10%;background−c o l o r : ye l low ;c o l o r : b lack ;

}

ソースコード 6: htmlRefCss.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><HTML lang=”ja”><HEAD><META HTTP−EQUIV=”Content−Type” CONTENT=”text /html ; cha r s e t=Sh i f t J I S”>< l i n k r e l=”s t y l e s h e e t ” h r e f =”./ c s s / s0001 . c s s ” type=”text / c s s”><TITLE>ホームページ CSSを外部ファイルに定義 </TITLE></HEAD><BODY>今日は！CSSをHTMLの外部ファイルで定義</BODY></HTML>

3

3 HTMLの基礎

3.1 基本的な内容

ソースコード 7: HTMLの言語定義<html lang=”ja”> 言語が日本語であることを示す。

ソースコード 8: ページのタイトルの書き方<t i t l e >・・・</ t i t l e > このタグで囲みます。

ソースコード 9: 段落の書き方<p>・・・</p> このタグで囲みます。

ソースコード 10: 改行の方法<br>このタグで改行を指示する。

ソースコード 11: 太字の表示<b>・・・</b> このタグで囲みます。

ソースコード 12: 特殊な文字の表示&・・・ ; と書きます。詳細は、HTML4.0言語仕様の24章を参照してください。

ソースコード 13: basic.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >HTMLの基本形</ t i t l e ></head><body>

<b>太字１・・・・・・・・・</b><b>太字２・・・・・・・・・</b><p>段落３・・・・・・・・・</p><p><b>段落＋太字４・・・・</b></p><b>太字５・・・・・・・・・</b><br><b>太字６・・・・・・・・・</b><br>

abc<br>&nbsp ; def<br> &nbsp ; ghi<br>&l t ;TAG&gt ;<br>&</body></html>

4

3.2 リンクの書き方

ソースコード 14: 見出しの書き方　　　　　　　<h1>・・・</h1> このタグで囲まれた見出しが

　　　　　　　　　　　　　　　　一番大きな見出しです。　　　　　　　<h1>から<h6>まであります。

実験：h1以外に、h2,h3,h4,h5,h6,h7,h8として並べて比較してみよう。

ソースコード 15: リンクの書き方　　　　　　　<a h r e f=”・・・”>リンク先の説明を書く</a> このタグで囲み、

　　　　　　　　　リンクで飛ぶ先のファイル名を hr e f=”・・・”と書きます。

ソースコード 16: linkmain.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >リンクの例</ t i t l e ></head><body>

<h1>リンク元のページ</h1><p>リンクの実験</p><p><a h r e f=”l inked1 . html”t i t l e =”リンク先１へ移動：マウスをここに当てると、このメッセージが出る”>リンク先１</a></p><p><a h r e f=”l inked2 . html” t i t l e =”リンク先２へ移動”>リンク先２</a></p>

</body></html>

ソースコード 17: linked1.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><body><h1>ページ１</h1><p>これは、リンク先の第一ページです</p></body></html>

ソースコード 18: linked2.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><body><h1>ページ２</h1><p>これは、リンク先の第二ページです</p></body></html>

5

3.3 イメージの表示方法

ソースコード 19: イメージの表示<img s r c=”・・・” width=”nnn” he ight=”nnn”/>

イメージのファイルを・・・に定義する。 w i d t h（幅）とh e i g h t（高さ）　は、 n n nに数値を入れる。指示しなければデフォルトの大きさとなる。

実験：widthと heightを、色々変化させてみよう。実験：イメージタグを 5個くらい並べて、個々に <p>・・・</p>タグで囲った場合とそうでない場合を比較してみよう。

ソースコード 20: imagemain.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >イメージの例</ t i t l e ></head>

<body>

<h1>イメージ表示ページ</h1><p>イメージ表示の実験</p><p><img s r c =”./ images / c l o ck . jpg ” width=”100” he ight=”100”/>

width=100 , he ight=100</p><p><img s r c =”./ images / c l o ck . jpg ” />このデフォルト値は、width=”127” he ight=”119”です

</p>

</body></html>

この例では、イメージファイルが、現在の htmlと同じところに imagesというフォルダがあり、その中のclock.jpgを参照している。

6

3.4 横罫線・箇条書きの表現方法

ソースコード 21: 箇条書きの表現<ol>・・・</ol>は、順序付きのリスト<ul>・・・</ul>は、順序なしのリストを示す< l i >・・・は、リスト１行分を示す（これは、上記2種類のタグの中に入れ子にする）o lタグも u lタグも入れ子にして、リストを階段状にすることができる

実験：olタグおよび ulタグを混在させてみよう

ソースコード 22: kajyogaki01.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e ><h1>箇条書きの例</ t i t l e >

</head><body>

<div><h1>箇条書きの実験（通し番号あり）</h1><p>パソコンの使い方</p><hr><ol>< l i>電気のスイッチを入れる< l i>パスワードを入れる< l i>利用する< l i>シャットダウンする< l i>電気を切る

</ol><hr><ol>< l i>電気のスイッチを入れる<ol>< l i >パスワードを入れる< l i >利用する< l i >シャットダウンする

</ol>< l i>電気を切る

</ol></div>

</body></html>

7

ソースコード 23: kajyogaki02.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e ><h1>箇条書きの例</ t i t l e >

</head><body>

<div><h1>箇条書きの実験（通し番号なし）</h1><p>パソコンの使い方</p><hr><ul>< l i>電気のスイッチを入れる< l i>パスワードを入れる< l i>利用する< l i>シャットダウンする< l i>電気を切る

</ul><hr><ul>< l i>電気のスイッチを入れる<ul>< l i >パスワードを入れる<ul>< l i >メモ帳を立ち上げる<ul>< l i >メモ帳で文書を作成する< l i >文書をファイルに保存する

</ul>< l i >メモ帳を終わらせる

</ul>< l i >シャットダウンする

</ul>< l i>電気を切る

</ul></div></body></html>

8

3.5 内部リンクの方法

ソースコード 24: 内部リンクの方法同一ページの中で、リンクを張り、その箇所に移動する方法を示す。aタグで、行き先を定義する。<a name=”・・・”>このタグの n am e属性を書くと、その書いた位置に、　　　　　　　　その名前の箇所に移動できるようになる。<a h r e f=”・・・”>このタグの h r e f属性を書くと、そこをクリックすると、　　　　　　　　上記 n am e属性で、同じ値の箇所に飛ぶ。

ソースコード 25: inLink.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >ホームページ CSSを内部で定義</ t i t l e ></head><body><a name=”頭” />こ<br>ん<br>に<br>ち<br>は<br>い<br>い<br>天<br>気<br>で<br>す<br>ね<br>。<br><a name=”戻る” /><a h r e f=”#あそこ”>向こうに行く</a><br>明<br>日<br>は<br>雨<br>だ<br>そ<br>う<br>で<br>す<br>。<br><a name=”あそこ” /><a h r e f=”#戻る”>もどる</a><br><a h r e f=”#頭”>頭に戻る</a></body></html>

9

3.6 テーブルの作成方法

ソースコード 26: テーブルの作成<tab le>：テーブルの大枠<caption>：テーブルの見出し<th>：テーブルのヘッダ項目（カラム毎の見出し）<tr>：テーブルの１行のくくり<td>：テーブルの１行内の１カラム毎の１項目

実験：カラムを増やしてみよう、tableタグの border属性の値を変えてみよう

ソースコード 27: table01.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >テーブルの例</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>. sotu nen { text−a l i g n : c en t e r ;}</s ty l e>

</head>

<body>

<h1>テーブル表示ページ</h1><p>テーブル表示の実験</p><t ab l e border=”2”

summary=”卒業生の同窓会名簿です”><caption>東京校同窓生</caption><tr>

<th>卒業年度</th><th>科</th><th>氏名</th><th>連絡先</th>

<tr><td c l a s s=sotu nen>H21</td><td>生産情報システム技術科</td><td><a h r e f =”./ images / c l o ck . jpg”>時尾つげる</a></td><td>tugeru@ogawa . co . jp</td>

<tr><td c l a s s=sotu nen>H21</td><td>生産情報システム技術科</td><td>海野穴子</td><td>anago@higasimurayama . com</td>

</tab le>

</body></html>

10

3.7 フォームの作成方法

ソースコード 28: フォームの作成<form>： methodは、g e tまたはpo s tがある<input>：テキスト、ラジオボタン等がある<s e l e c t>：リストボックス

実験：formタグのmethodを postにしてみよう

ソースコード 29: form01.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >フォームの例</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>. sotu nen { text−a l i g n : c en t e r ;}</s ty l e>

</head>

<body>

<h1>フォームのページ</h1><p>フォームからの発信実験</p><form act i on=”r e c e i v e . html” method=”get”>

<p>氏名： <input type=”text ” name=”name”><br>ふりがな： <input type=”text ” name=”name yomi” s i z e=”50”><br>電子メール： <input type=”text ” name=”emai l”><br><input type=”rad io ” name=”sex ” value=”Male” checked> 男<br><input type=”rad io ” name=”sex ” value=”Female”> 女<br><s e l e c t name=”nendai”>

<opt ion value=”low20”>未成年<opt ion value=”20” s e l e c t ed>２０代<opt ion value=”30”>３０代<opt ion value=”40”>４０代<opt ion value=”50”>５０代

</s e l e c t></p><p><input type=”submit” value=”Send”> <input type=”r e s e t ”></p>

</form>

</body></html>

11

3.8 フレームの作成方法

ソースコード 30: フレームの作成上側と、下の左右の３フレームの構成にした例を示す。f r am e s e tタグ：フレーム構造を定義f r a m eタグ：中に入るフレームの定義

実験：framesetタグの colsと rowsの属性値を変更してみよう。frame03.htmlの aタグの target属性に注意！この属性がないとどういう現象が発生するかよく観察すること。

[フレーム構成定義]

ソースコード 31: frame01.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >フレームの例</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”>

<f rameset rows=”25%,75%”><frame name=” t i t l e ” s r c =”./ frame02 . html”><f rameset c o l s=”25%,75%”><frame name=”A” s r c =”./ frame03 . html”><frame name=”B” s r c =”./ frame04 . html”></frameset></frameset>

</head><body><h1>フレームのページ</h1><p>フレームの実験</p></body></html>

[上側のフレーム]


<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><t i t l e >上のフレーム</ t i t l e ></head><body><h1>これは上のフレームです</h1></body></html>

12

[下左側のフレーム]


<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><t i t l e >左下のフレーム</ t i t l e ></head><body><h1>これは左下のフレームです</h1>f rame04へ : <A HREF=”frame04 . html” TARGET=” top”> t a r g e t=” top”</A><BR>f rame01へ : <A HREF=”frame01 . html”>属性 t a r g e tなし </A><BR></body></html>

[下右側のフレーム]


<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><t i t l e >imode背景</ t i t l e ></head><s t y l e type=”text / c s s”>body {

margin : 2em 10% 3em 10%;background : skyblue ;background−image : u r l ( ” . / images / imode . jpg ” ) ;c o l o r : ye l low ;

}</s ty l e><body><h1>これは右下のフレームで、背景に画像を入れてます</h1></body></html>

13

3.9 画像の一部クリックする方法

ソースコード 35: 画像の一部クリック画像の一部分のみを指定し、そこをクリックすると、他のページに移動する

実験：usemapの属性値を変えてみよう

ソースコード 36: click.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >画像の部分指定によるクリック</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”></head><body><h1>クリックの実験</h1><p>範囲：四角形（上層、中間層）</p><img s r c=”images / c l o c kｚ . jpg ” usemap=”#demo01” a l t=”c l o ck . j p gなし”><map name=”demo01”>

<area shape=”r e c t ” a l t=”Aの説明 ” coords =”11 ,33 ,113 ,88”h r e f=”http :// l o c a l h o s t /a . html”>

<area shape=”r e c t ” a l t=”Bの説明 coords =”1 ,1 ,127 ,31”h r e f=”http :// l o c a l h o s t /b . html””>

</map><p>範囲：円形（上側小円、下側小円）</p><img s r c=”images / c l o ck . jpg ” usemap=”#demo02” a l t=”c l o ck . j p gなし”><map name=”demo02”>

<area shape=” c i r c l e ” a l t=”Cの説明 coords =”66 ,31 ,20”h r e f=”http :// l o c a l h o s t /c . html”>

<area shape=” c i r c l e ” a l t=”Dの説明 coords =”66 ,85 ,20”h r e f=”http :// l o c a l h o s t /d . html”>

</map><p>範囲：多角形（左上隅時計の円外三角、下斜め時計の円内三角）</p><img s r c=”images / c l o ck . jpg ” usemap=”#demo03” a l t=”c l o ck . j p gなし”><map name=”demo03”>

<area shape=”polygon” a l t=”Eの説明 coords =”15 ,88 ,111 ,31 ,92 ,104”h r e f=”http :// l o c a l h o s t /e . html”>

<area shape=”polygon” a l t=”Fの説明 coords =”1 ,1 ,64 ,1 ,1 ,61”h r e f=”http :// l o c a l h o s t / f . html”>

</map></body></html>

3.10 複雑なテーブル

ソースコード 37: 複雑なテーブル<tab le>～<td co l span=nn>～　・・・・・横にまたがるセル～<td rowspan=nn>～　・・・・・縦にまたがるセル～</tab le>

14

実験：colspan、rowspan属性を他のセルにも定義してみよう　　同じセルに colspanと rowpanの両方を指定してみよう

ソースコード 38: table02.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >複雑なテーブルの例</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”></head><body><h1>複雑なテーブル表示ページ</h1><p>複雑なテーブル表示の実験</p><t ab l e border=”2” summary=”複雑なテーブルの実験です”><caption>・・・見出し・・・</caption><tr><th co l span=8 />colspan , rowspanの例<tr><tr><td>a1</td><td co l span=3>a2</td><td co l span=4>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td><td>a8</td>

</tr><tr><td>b1</td><td>b2</td><td>b3</td><td>b4</td><td>b5</td><td co l span=3 rowspan=2>b6</td><td>b7</td><td>b8</td>

</tr><tr><td>c1</td><td>c2</td><td>c3</td><td>c4</td><td>c5</td><td>c6</td><td>c7</td><td>c8</td>

</tr><tr><td>d1</td><td>d2</td><td>d3</td><td>d4</td><td>d5</td><td>d6</td><td>d7</td><td>d8</td>

</tr></tab le></body></html>

15

図 1: 複雑なテーブルの実験例

16

4 CSSの基礎

4.1 文字の修飾方法

ソースコード 39: 文字の修飾・ h 1のタグについて指定する例・#ラベルと s t y l e定義し、参照はタグの i d属性で、その値を参照する例・ s p a nタグを用いて、文の一部分に特定の s t y l eを利用する例　　などを示す

実験：id属性を、他のタグにも使ってみよう。

ソースコード 40: cssMoji.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >ホームページ CSSを内部で定義</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>h1 { font−s t y l e : i t a l i c ;}#i t a1 { font−s t y l e : i t a l i c ; font−s i z e : xx−l a r g e ; text−decora t i on : unde r l i n e ;}#i t a2 { font−weight : bold ; text−decora t i on : l i n e−through ;}</s ty l e></head><body><h1>今日は！</h1><p id=”i t a 1”>いい天気ですね。</p><p><span id=”i t a 2”>傘を持って</span>公園に行こう。</p></body></html>

17

4.2 背景に図柄を入れる方法

ソースコード 41: 背景に図柄を入れるbodyタグの中の、background− i m a g e属性によって、背景の図を定義していいるこの図が無いときのために、 b a c k u g r o u nd属性で背景に色をつけている（この場合、 skyb lue）

実験：自分の好みの図柄等を用いて背景を作製してみよう

ソースコード 42: cssBack.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >ホームページ CSSを内部で定義</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>body {

margin : 2em 10% 3em 10%;background : skyblue ;background−image : u r l ( ” . / images / c l o ck . jpg ” ) ;c o l o r : b lack ;

}</s ty l e></head><body><h1>今日は！</h1></body></html>

18

4.3 テーブル用スタイル

ソースコード 43: テーブル用スタイルテーブルについての各種のスタイルを使ってみる

実験：色々、属性を替えてみよう

ソースコード 44: c-table.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >JavaScr ipt</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>. money {margin : c en t e r ;

}t ab l e {width : 600px ;he ight : 200px ;background− c o l o r : #d0d0d0 ;background−image : u r l ( . / images /backwin . jpg ) ;margin : 10px 0px 0px 0px ;

}tab le , td , th {/∗ border : 2px #f f 0000 s o l i d ;∗/border−top : 8px #f f 0000 double ;border−r i g h t : 6px #00 f f 0 0 s o l i d ;border−bottom : 4px #0000 f f dotted ;border− l e f t : 2px #cccccc dashed ;

/∗border−c o l l a p s e : c o l l a p s e ;∗/border−c o l l a p s e : s epara te ;

border−spac ing : 10px ;}

td {width : 100px ;he ight : 50px ;

}t ab l e . ex1 {empty−c e l l s : show ;

}t ab l e . ex2 {empty−c e l l s : h ide ;

}capt ion {/∗ caption−s i d e : top ;∗//∗ caption−s i d e : r i g h t ;∗//∗ caption−s i d e : bottom ;∗/caption−s i d e : l e f t ;v e r t i c a l−a l i g n : middle ;/∗ text−a l i g n : r i g h t ;∗/

}. c e l l 0 1 {text−a l i g n : c en t e r ;v e r t i c a l−a l i g n : middle ;

}

19

. c e l l 0 2 {text−a l i g n : l e f t ;v e r t i c a l−a l i g n : top ;

}. c e l l 0 3 {text−a l i g n : r i g h t ;v e r t i c a l−a l i g n : b a s e l i n e ;

}. c e l l 0 4 {text−a l i g n : r i g h t ;

}

th , td {padding : 5px 10px 15px 20px ;

}. h id ing {v i s i b i l i t y : c o l l a p s e ;

}. show {}. c l e a r L e f t {c l e a r : l e f t ;

}. c l e a rR igh t {c l e a r : r i g h t ;

}. f l o a t L e f t {f l o a t : l e f t ;

}. f l o a tR i gh t {f l o a t : r i g h t ;

}

</s ty l e></head><body onload=”b l i nk i ng (500)”><h1>t a b l eのページ </h1><p>t a b l eの実験 </p><t ab l e c l a s s=”f l o a tR i gh t ” c l a s s=”ex1” border=”2” summary=” t a b l eの実験 ”><caption>見出し</caption><c o l span=”1”><c o l span=”1”><c o l span=”1”>

<tr><th co l span=8 />header</tr><tr><td>a1</td><td co l span=”3” c l a s s=”money”>a2</td><td>a3</td><td rowspan=”3”>a4</td><td>a5</td><td></td><td></td><td>a8</td>

</tr><t r c l a s s=show><td>b1</td><td>b2</td><td>b3</td>

20

<td>b4</td><td>b5</td><td>b6</td><td>b7</td><td>b8</td>

</tr><tr><td>c1</td><td co l span=”3” rowspan=”2”>c2</td><td>c3</td><td>c4</td><td>c5</td><td>c6</td><td>c7</td><td>c8</td>

</tr><tr><td>d1</td><td c l a s s=”c e l l 0 1 ”>d2</td><td c l a s s=”c e l l 0 2 ”>d3</td><td c l a s s=”c e l l 0 3 ”>d4</td><td c l a s s=”c e l l 0 4 ”>d5</td><td>d6</td><td>d7</td><td>d8</td>

</tr></tab le><p>メッセージ1あいうえおかきくけこさしすせそ</p><p>メッセージ2</p><p c l a s s=”c l ea rR igh t”>メッセージ3</p><p>メッセージ4</p></body></html>

21

5 JavaScriptの基礎

5.1 文字表示の方法

ソースコード 45: 文字表示文字の表示方法の確認

実験：改行タグ¡br¿の出力をしないようにしてみよう

ソースコード 46: j-hello.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >文字の表示</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on He l lo ( ){document . wr i t e (” He l lo World!<br>”);dd = new Date ( ) ;document . wr i t e (dd . t oLoca l eS t r i ng ( ) ) ;

}</s c r i p t></head><body onload=”He l lo ()”></body></html>

22

5.2 時を刻む方法

ソースコード 47: 時を刻む時を刻々と刻む方法の確認

実験：テキストボックスの sizeを３０から１０に変えてみよう

ソースコード 48: j-date.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >時の刻み方</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on DisplayTime ( ) {dd = new Date ( ) ;document . f . t . va lue = dd . t oLoca l eS t r i ng ( ) ;window . setTimeout (” DisplayTime ( ) ” , 1000 ) ;

}</s c r i p t></head><body onload=”DisplayTime ()”><form name=”f ” ac t i on=”#”><input type=”text ” name=”t ” s i z e=30>

</form></body></html>

23

5.3 入力の加算方法

ソースコード 49: 入力の加算テキスト入力の数値の加算方法の確認\\t r y、 c a t c hによる例外処理の確認

実験：数字以外の英字などを入力してみよう　　負の数字を入力してみよう

ソースコード 50: j-add.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >テキスト入力の加算</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on Calc ( ){

t ry{

var num1=eva l ( document . ke i san . e lements [ 0 ] . va lue ) ;var num2=eva l ( document . ke i san . e lements [ 1 ] . va lue ) ;

a l e r t (num1+num2 ) ;}catch ( e ){

a l e r t (”入力の数が数値ではありません ” ) ;}

}</s c r i p t></head><body><form name=”ke i san”><input type=”text ” value=”3”><br>＋<br><input type=”text ” value=”5”><br><input type=”button” value=”計算” on c l i c k=”Calc ()”></form></form>

</body></html>

24

5.4 日付の確認

ソースコード 51: 日付の確認日付と曜日の内部での値の確認

実験：日付を 1週間分入れて、値の変化を観察しよう

ソースコード 52: j-week.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >日付の内部での値の確認</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on c a l c ( ){

var yy = eva l ( document . ke i san . e lements [ 0 ] . va lue ) ;var mm = eva l ( document . ke i san . e lements [ 1 ] . va lue ) ;var dd = eva l ( document . ke i san . e lements [ 2 ] . va lue ) ;var day = new Date (yy ,mm, dd ) ;

a l e r t (” year : ” + yy + ” , ” + day . getYear ( ) ) ;a l e r t (”month : ” + mm + ” , ” + day . getMonth ( ) ) ;a l e r t (” day : ” + dd + ” , ” + day . getDate ( ) ) ;a l e r t (”week : ” + day . getDay ( ) ) ;

}

</s c r i p t></head><body><form name=”ke i san”>年< input type=”text ” ><br>月< input type=”text ” ><br>日< input type=”text ” ><br><input type=”button” value=”計算” on c l i c k=”ca l c ()”>


25

5.5 順次処理

ソースコード 53: 順次処理上から下への手続きの順次処理の確認\\文字の連結（＋）のオペレータと、数値の加算（＋）のオペレータの確認

実験：値に数値以外の英字を入れるとどうなるか観察しよう

ソースコード 54: j-sequence.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >順次処理＋文字連結と数値の和</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on tasu ( ){

var a = document . ke i san . n01 . va lue ;var b = document . ke i san . n02 . va lue ;a l e r t (” s t r i n g=”+a+b ) ;var c = eva l ( document . ke i san . n01 . va lue ) ;var d = eva l ( document . ke i san . n02 . va lue ) ;a l e r t (” numeric NG =”+c+d ) ;a l e r t (” numeric OK =”+(c+d ) ) ;

}

</s c r i p t></head><body><form name=”ke i san”><input type=”text ” name=”n01” value=”3”>＋<input type=”text ” name=”n02” value=”5”><br><input type=”button” value=”計算” on c l i c k=”tasu ()”>


26

5.6 条件分岐

ソースコード 55: 条件分岐条件分岐の確認をすること。 c a s e文についても調べてみよう。

実験：if (条件) 不合格の処理 else 合格の処理となるように、条件を変更して、例題と同じ処理になるように作り変えてみよう。

ソースコード 56: j-condition.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >条件分岐</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on c a l c ( ){

var atu = eva l ( document . ke i san . e lements [ 0 ] . va lue ) ;var omo = eva l ( document . ke i san . e lements [ 1 ] . va lue ) ;i f ( ( atu>=10.0 & atu<=20.0) & (omo>=3.0 & omo<=7.0)) {

a l e r t (”製品合格 ” ) ;} e l s e {

a l e r t (”製品不合格 ” ) ;}

}

</s c r i p t></head><body><form name=”ke i san”>厚み (mm)< input type=”text ” ><br>重さ ( kg) < input type=”text ” ><br><input type=”button” value=”計算” on c l i c k=”ca l c ()”>


27

5.7 繰返し（ループ）

ソースコード 57: 繰返しw h i l e文と f o r文の確認をすること。この例題は、いづれも条件が初めから「偽」の場合は、そのブロックのしょりが一切行われない。w h i l e文で、条件を先に聞かず、そのブロックの処理を必ず一回実行し、その後、条件を聞く文型があるか否か調べてみよう。

実験：例題の while文と for文を入れ替えて同じ処理になるように、作り変えてみよう。

ソースコード 58: j-while.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >wh i l eループ </ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on c a l c ( ){

var i n va l u e = eva l ( document . ke i san . e lements [ 0 ] . va lue ) ;var wa = 0 ;var i = 0 ;whi l e ( i < i n va l u e ) {

i++;wa = wa + i ;

}a l e r t (”和＝” + wa ) ;

}

</s c r i p t></head><body><form name=”ke i san”>値< input type=”text ” ><br><input type=”button” value=”計算” on c l i c k=”ca l c ()”>


28

ソースコード 59: j-for.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >f o rループ </ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on c a l c ( ){

var i n va l u e = eva l ( document . ke i san . e lements [ 0 ] . va lue ) ;var wa = 0 ;var i = 0 ;i f ( i n va l u e <= 0) {

a l e r t (”入力は、１以上です”+ document . ke i san . e lements [ 0 ] . va lue ) ;

r e turn 1 ;}f o r ( i = 1 ; i <= in va l u e ; i++) {

wa = wa + i ;}a l e r t (”和 ( f o r loop )＝” + wa ) ;

}

</s c r i p t></head><body><form name=”ke i san”>値< input type=”text ” ><br><input type=”button” value=”計算” on c l i c k=”ca l c ()”>


29

5.8 ラジオボタンの使い方

ソースコード 60: ラジオボタンラジオボタンの使い方の練習

実験：ラジオボタンの組を増やしたり、組の中の個数を増減させてみよう。

ソースコード 61: j-radio.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >ラジオボタン</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on Sa i t en ( ){

var TrueCount=0; //正解数を入れる変数

//正解の番号を配列に入れる（ zero s t a r t）var TrueAns = new Array ( 0 , 4 ) ;

//正解のラジオボタンがチェックされているか確認f o r ( i=0 ; i<2 ; i++){

i f ( document . radioButton . e lements [ TrueAns [ i ] ] . checked ){

TrueCount++;}

}a l e r t (”あなたは” + (TrueCount ∗ 50) + ”点でした！ ” ) ;

}

</s c r i p t></head><body><form name=”radioButton”>1+2は？<br><input type=”rad io ” name=”Q1”>3<br><input type=”rad io ” name=”Q1”>4<br><br>3 x4は？<br><input type=”rad io ” name=”Q2”>10<br><input type=”rad io ” name=”Q2”>11<br><input type=”rad io ” name=”Q2”>12<br><br><input type=”button” value=”採点” on c l i c k=”Sa i ten ( )” /></form>

</body></html>

30

5.9 文字の点滅方法

ソースコード 62: 文字の点滅J a v a S c r i p tによる、文字の点滅

実験：関数 blinkingの引数の値を変更してみよう

ソースコード 63: j-blink.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >文字の部リンク</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s c r i p t type=”text / j a v a s c r i p t”>f unc t i on b l i nk i ng ( de lay ){var element = document . body . getElementsByTagName ( ’ span ’ ) ;f o r ( var i = 0 ; i < element . l ength ; i++){i f ( e lement [ i ] . className == ’ tenmetsu ’ ) {element [ i ] . s t y l e . d i sp l ay

= ( element [ i ] . s t y l e . d i sp l ay == ’ none ’ ? ’ i n l i n e ’ : ’ none ’ ) ;}

}setTimeout ( ’ b l i nk i ng ( ’ + delay + ’ ) ’ , de lay ) ;

}</s c r i p t></head><body onload=”b l i nk i ng (1000);”>

<h1>文字のブリンク表現</h1><p>文字のブリンクの実験</p><p>これは<span c l a s s=”tenmetsu”>点滅</span>実験</p></body></html>

31

5.10 入力項目の妥当性検証の方法

ソースコード 64: 入力項目の妥当性検証J a v a S c r i p tによる、フォームの入力項目の妥当性を検査するプログラムの例です。正規表現を用いています。

実験：条件を変更してみよう

ソースコード 65: j-validate.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >入力チェック</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>. item {border−width : 1px ; border−s t y l e : s o l i d ;width : 100px ;text−a l i g n : c en t e r ;background−c o l o r : s i l v e r ;c o l o r : b lue ;

}. in {

width : 100px ;text−a l i g n : c en t e r ;background−c o l o r : s i l v e r ;c o l o r : b lue ;

}</s ty l e><s c r i p t type=”text / j a v a s c r i p t”>/∗ 氏名未入力チェック ∗/func t i on NameCheck ( ) {

var s t r = document . i form . NameText . va lue ;i f ( ( s t r==nu l l ) | | ( s t r ==””)) {

a l e r t (”氏名は、必ず入力してください ” ) ;r e turn 1 ;

}re turn 0 ;

}

/∗ ふりがなチェック ∗/func t i on FuriganaCheck ( ) {

var s t r = document . i form . FuriganaText . va lue ;i f ( s t r . match ( / [ˆぁ−んァ−ン　\ s ]+/ ) ) {

a l e r t (”ふりがなは、「ひらがな」・「カタカナ」のみで入力して下さい。 ” ) ;r e turn 1 ;

}re turn 0 ;

}/∗ 半角英文字チェック ∗/func t i on AlphabetCheck ( ) {

var s t r = document . i form . Engl ishText . va lue ;i f ( s t r . match ( / [ˆA−Za−z\ s .−]+/ ) ) {

a l e r t (”英語名は、半角英文字のみで入力して下さい。 ” ) ;r e turn 1 ;

}re turn 0 ;

32

}

/∗ 半角数字チェック ∗/func t i on NumberCheck ( ) {

var s t r = document . i form . AgeText . va lue ;i f ( s t r . match ( /[ˆ0−9]+/ ) ) {

a l e r t (”郵便番号は、半角数字のみで入力して下さい。 ” ) ;r e turn 1 ;

}re turn 0 ;

}

/∗ 全部チェック ∗/func t i on AllCheck ( ) {

var check = 0 ;check += NameCheck ( ) ;check += FuriganaCheck ( ) ;check += AlphabetCheck ( ) ;check += NumberCheck ( ) ;i f ( check > 0 ) {

re turn f a l s e ;}re turn check ;

}

</s c r i p t><nosc r ip t>郵便番号は、数字のみ入力してください！</nosc r ip t></head><data>

<form name=”i form” ac t i on=”http ://www. goog l e . co . jp ” method=”get”>< l a b e l f o r=”name”><span c l a s s=item>氏名</span></l abe l>

<input id=”name” type=”text ” name=”NameText” s i z e=”20”><br>< l a b e l f o r=”fu r i gana”><span c l a s s=item>ふりがな</span></l abe l>

<input id=”fu r i gana ” type=”text ” name=”FuriganaText” s i z e=”30”><br>< l a b e l f o r=”engname”><span c l a s s=item>英語名</span></l abe l>

<input id=”engname” type=”text ” name=”Engl ishText ” s i z e=”30”><br>< l a b e l f o r=”yubin”><span c l a s s=item>郵便番号</span></l abe l>

<input id=”yubin” type=”text ” name=”AgeText” s i z e=”10”>（数字7桁のみ入力）<br><input type=”submit” value=”送信” onCl ick=”return AllCheck ();”></form>

</data></html>

33

6 応用編

6.1 順路表示ナビゲーション：パンくず (breadcrumb)リスト

ソースコード 66: パンくずリストパンくずリストとは、グリム童話の「ヘンゼルとグレーテル」の中に出てくる森の中から家に戻るために、パンくずをまきながら歩いたという話からこの名前がついたようです。

実験：同じ HTMLのコードを、CSS無しで表示してみよう。　パンくずリストを増やしてみよう。

ソースコード 67: pankuzu.html

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01 Tran s i t i ona l //EN”><html lang=”ja”><head><t i t l e >パンくずりすと</ t i t l e ><meta http−equiv=”Content−Type” content=”text /html ; cha r s e t=Sh i f t J I S”><s t y l e type=”text / c s s”>#crumbs {

background−c o l o r : #eee ;padding : 4 px ;

}#crumbs h3 { d i sp l ay : none ;}#crumbs u l {

d i sp l ay : i n l i n e ;padding− l e f t : 0 ;margin− l e f t : 0 ;

}#crumbs u l l i { d i sp l ay : i n l i n e ;}#crumbs u l l i a : l i n k { padding : . 2em;}#crumbs u l u l l i {

background−image : u r l ( . / images /arrow . g i f ) ;background−repeat : no−repeat ;background−po s i t i o n : l e f t ;padding : 20px ;

}</s ty l e></head><body><h1>パンくずリストの表現</h1><p>パンくずリストの実験</p><div id=’crumbs ’><h3>Location</h3><ul> < l i ><a h r e f=”/”>ホーム</a>

<ul> < l i ><a h r e f=”/goods/”>商品カタログ</a><ul> < l i ><a h r e f=”/goods/books/”>本・雑誌</a></l i ></ul>

</ l i ></ul>

</ l i></ul></div></body></html>

34

A 参考図書　色々な本やインターネットを参照しました。そのうち主に参照した本は以下のものです。１．新版　プロとして恥ずかしくないWEBデザインの大原則　エムディエヌ・ムック　その他、大手の書店で自分にあったものを探すことが望ましい。インターネット上を探すと、図書以外にも参考資料は見つかると思う。

35

改版履歴� �HTML・CSS入門～Webアプリ構築への道～著者：福良　博史http://mizar.web.fc2.com/null/study/index.html

Ver.0.1 2010.04.28� �

Documents

HTTP CSS入門 Markup Languageについて xxMLという言語がいくつかある。その成立順序を見てみる。1. Standard Generalized Markup Language 1986 年 ISO規格ISO