技術メモ先頭 　サーバーＪａｖａ入門先頭 　ＨＴＭＬ編先頭
2008-10-06更新　2002-10-23作成

　■初めてのHTML

　ここでは生まれて初めてHTMLを書く人に向けて、サーバー側Javaを組む上で必要と思う必要最低限のことについて説明していきます（例えば画像を貼りまくったような派手な画面は対象外です）。必要最低限とはいえ、一通り押さえればそれなりの画面は作れるようになると思います（ここの、「サーバーＪａｖａ入門」以下のページくらいは作れます）。

　サーバー側Javaで扱うのは素のHTMLです。そのためホームページ作成用のツール、「ホームページビルダー」や「Dreamweaver」といったものは使いません。テキストエディターやメモ帳で、直にHTMLを書いていきます。

　◇記述形式

　HTML（Hyper Text Markup Language）は文書の構成や書式をタグというもので指定していきます。HTMLタグと元の文書そのものを区別するために、タグは <タグ> や </タグ> という記述形式をとります。

　タグ名を < と > で囲むことによって、それがHTMLタグであることを表します。タグ と /タグ の違いは開始と終了の違いです。<タグ> がそこがそのタグの有効範囲開始であり、 </タグ> がそのタグの有効範囲終了という意味です。

　原則はタグは必ず開始と終了が対になって存在している、ということです。

　さて話が前後しますが、HTMLというのはもう30年以上前に制定されたSGML（Standard Generalized Markup Language）がベースになっています。HTMLには若干、厳密でないところがあり、例えばタグ名は大文字でも小文字でもどちらでもよい、となってます。 <BODY> でも <body> でも、どちらでもいいわけです。あとはまあ問題というか、ブラウザがうまく解釈してくれるので、開始タグだけあって終了タグがない場合でもちゃんと表示されたりします。

　ところでHTMLに対してXHTMLという、XML（eXtensible Markup Language）が元になっているものがあります。基本的なタグ名などは同じですが、違うのはXHTMLはXMLが元になっているぶんHTMLより厳密という点です。例えばタグ名は必ず小文字を使う、開始タグと終了タグは必ず対でなければならない、などです。対になっていないタグがあると文法エラーになって表示されないのが、厳密なXHTMLの解釈になると思います（実際にはHTMLと同様、ブラウザ側でうまく解釈してくれる気がする）。

　それともう一つ。単独タグの扱いがあります。例えば改行を意味する <BR> や水平区切り線を意味する <HR> です。これらはこれ一つで開始兼終了なので、XHTMLの「開始タグと終了タグは必ず対でなければならない」から外れてしまいます。

　こうしたものに対してXHTMLでは <br /> 、 <hr /> といった書き方をします。

　実際のブラウザではタグをはXHTML形式で記述してもHTML形式と同様きちんと表示できます。そのためこのページではXHTMLを意識して、タグ名はすべて小文字にしていますし、単独タグについてもXHTML流で説明していきます。

　◇注釈（コメント）

　一番大事なこととして、真っ先に注釈（コメント）の書き方を説明します。

　注釈の記述は次のように <!-- で始まり --> で終わるまでです。例えば
　<!--コメント-->
となります。これは行を跨って、複数行に渡る注釈を書くこともできます。例えば
　<!--
　　ここから

　　この行までが注釈になります。
　-->

　あとから自分が見て分かるように、適宜注釈を入れてください。注釈はHTMLのどこにでもかけます。

　特に複数行コメントは作ったHTMLを部分的に無効にしたり書き方を変えて試してみたいときに、対象部分を
<!--
と
-->
で囲めばいいだけなんで便利です。

　◇doctypeタグ

　文書の形式を宣言します。使っているHTMLのバージョンや機能等についての宣言です。

　実際のところこの<!doctype>タグが無くても、ブラウザ側でうまいこと解釈してくれるので、ちゃんと表示されちゃいます。まあそれでも基本的に書いておくことにしましょう。

・フレームを使わない場合 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">

・フレームを使う場合（フレームについては後で説明します） 

<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN"
    "http://www.w3.org/TR/REC-html40/frameset.dtd">

　◇全体構成

　最低限必要な構成は次のとおりになります。テキストエディタやメモ帳でこれだけ書いて、拡張子を htm にして ファイル名.htm で保存しておけば（もしくは拡張子を html にして ファイル名.html で保存）、あとはそのファイルをエクスプローラから開いたり、ブラウザでファイル名指定で読み込めばとりあえず表示できます。 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
  <head>
  </head>
  <body>
　　　実際にブラウザに表示される部分の定義
  </body>
</html>

　先頭行はdoctypeで、文書形式を宣言しています。

　次がhtmlタグで、<html>から</html>で囲った部分がHTML本文です。htmlタグの引数としてlang="ja"を指定し、HTMLの言語が日本語であることを宣言しています。

　以上で最低限の表示は出来るのですが、ここは<head>宣言内に<title>宣言も入れておきましょう。<title>宣言しておくとその文書をブラウザで表示したとき、タイトルバーに宣言した内容が表示されます。

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
      実際にブラウザに表示される部分の定義
  </body>
</html>

　ここで一つ注意しておきましょう。

　<body> 〜 </body> 内に書いた文字はそのまま表示されますが、行頭・行末の半角スペースや改行は無視されます。
　例えば
ソース　実際の表示
  <body>
      このように
       書いても、

     実際にはこう表示
されます。
  </body>
　 このように 書いても、 実際にはこう表示 されます。

　これは実際に表示する文字だけでなく、HTML文書全体に対して言えることです。だから先ほどの 

  <html lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
      実際にブラウザに表示される部分の定義
  </body>
  </html>

は、こう書いても同じ意味になります。 

  <html lang="ja"><head><title>タイトル</title></head>
  <body>実際にブラウザに表示される部分の定義</body></html>

　ここでは「ホームページビルダー」や「Dreamweaver」などのツールを使わずに、直接テキストエディタなどで直にHTMLを書く場合について説明しています。そうした場合には自分で見やすくするために、適当に改行を入れたり行頭に半角スペースを入れて字下げをして良いと思います。

　表示する部分について行頭の半角スペースは無視されると説明しましたが、全角スペースは無視されません。別の、スタイルシートのところで説明するようにインデントの指定方法もあるんですが、日本語の行頭の一字下げなら全角スペースを入れておけば大丈夫です。


　ここから先で説明するタグは、全て<body>タグ 〜 </body>タグ内に記述するものです。

　◇背景色

　ページの背景色を変えるときは <body> タグに bgcolor= パラメータを指定します。背景色はページ全体でなくいろいろな範囲指定があるのですが、それらについては範囲指定あれこれでまとめて説明しています。また色の細かい指定方法についても色指定についてで別途説明します。

　背景色の指定例はこんな感じです。
　<body bgcolor="gray">　：灰色にする場合
　<body bgcolor="aqua">　：水色にする場合

　◇改行と区切り線

　ちょっと前で実際に表示する文字の部分について、いくらエディタで改行を入れても無駄、ということを説明しました。それでは明示的に改行させたい場合はどうすればいいのでしょう。

　そうしたときに使うのが <br /> タグです。<br />を入れた分だけ改行されます。

　先ほどの例を使ってみると（ただし行頭・行末のスペースには半角ではなく全角スペースを入れてるのが先ほどとは違います）
このソースを　こうしてやると　実際の表示
  <body>
　　　このように
　　　 書いても、

　　 実際にはこう表示
されます。
  </body>
　 
  <body>
<br />　　　このように
<br />　　　 書いても、
<br />
<br />　　 実際にはこう表示
<br />されます。
  </body>
　
　　　このように
　　　 書いても、

　　 実際にはこう表示
されます。

　文章の中で区切りの罫線（横線）を引きたい場合に <hr /> タグを使います。

　例えば
ソース　実際の表示

　ここと
  <hr />
　この間に区切り線がある。
　 　ここと
　この間に区切り線がある。

　区切り線の太さを変えたい場合は <hr /> タグに size= パラメータを指定します。指定方法は下の例を参考にしてください。
ソース　実際の表示

　標準の区切り線
  <hr />
　少し細め
  <hr size="1" />
　これも標準
  <hr size="2" />
　少し太め
  <hr size="3" />
　もっと太め
  <hr size="7" />
　 　標準の区切り線
　少し細め
　これも標準
　少し太め
　もっと太め

　さらに区切り線の色を変えたい場合は <hr /> タグに color= パラメータを指定します。色の細かい指定方法は色指定についてで別途説明します。
ソース　実際の表示

　標準の区切り線
  <hr />
　青い線
  <hr color="blue" />
　黄色い線
  <hr color="yellow" />
　太さと色を同時に変える
  <hr size="4" color="silver" />
　 　標準の区切り線
　青い線
　黄色い線
　太さと色を同時に変える

　◇文字の装飾

　次は文字の色や大きさなどを変える、文字の装飾について説明します。

　ここの説明を見ていて気づいたかもしれませんが、説明文中でタグ名については太字で表示しています。太字にしたい範囲を選んで <b> タグと </b> タグで囲むだけです。

　他には斜体（ <i> タグと </i> タグで囲む）、下線（ <u> タグと </u> タグで囲む）、取り消し線（ <s> タグと </s> タグで囲む）などあります。
　例えばこの一行は <b> タグと </b> タグで囲んであります。
　例えばこの一行は <i> タグと </i> タグで囲んであります。
　例えばこの一行は <u> タグと </u> タグで囲んであります。
　例えばこの一行は <s> タグと </s> タグで囲んであります。

　標準的にサイズなどいくつかの書式が設定済みのものに、見出し用タグがあります。文字通り見出しとして表示したい部分を選択して囲むためのタグで、<h1> 〜 </h1>、<h2> 〜 </h2>、<h3> 〜 </h3>がそれです。
ソース　実際の表示
　次の行は見出し１
　<h1>見出し１として指定</h1>
　次の行は見出し２
　<h2>見出し２として指定</h2>
　次の行は見出し３
　<h3>見出し３として指定</h3>
　 　次の行は見出し１ 　

見出し１として指定

　次の行は見出し２ 　

見出し２として指定

　次の行は見出し３ 　

見出し３として指定

　もう少しいろいろな指定をする場合は対象の範囲を選んでそこを <font> タグと </font> タグで囲み、 <font> タグに対するパラメータ指定で行います。

・大きさ

　文字の大きさを変えるときは size= パラメータを使います。サイズ指定には絶対値指定と相対値指定があります。

　絶対値指定のときは大きさを整数で指定します。ちなみに標準は size=3 です。

　相対値指定のときは大きさを標準対する大きさで指定します。＋（大きくするとき）、−（小さくするとき）を付けて整数で指定します。
ソース　実際の表示

　標準のフォント
　<font size=1>標準より二段小さい</font>
　<font size=2>標準より一段小さい</font>
　<font size=3>標準と同じ</font>
　<font size=4>標準より一段大きい</font>
　<font size=5>標準より二段大きい</font>

　<font size=-2>これも標準より二段小さい</font>
　<font size=-1>これも標準より一段小さい</font>
　<font size=+0>標準と同じ</font>
　<font size=+1>これも標準より一段大きい</font>
　<font size=+2>これも標準より二段大きい</font>
　 　標準のフォント
　標準より二段小さい
　標準より一段小さい
　標準と同じ
　標準より一段大きい
　標準より二段大きい

　これも標準より二段小さい
　これも標準より一段小さい
　標準と同じ
　これも標準より一段大きい
　これも標準より二段大きい

・文字の色

　文字の色を変えるときは color= パラメータを指定します。色の細かい指定方法は色指定についてで別途説明します。
ソース　実際の表示

　標準のフォント
<font color="orange">オレンジ色</font>
<font color="purple">紫色</font>
　 　標準のフォント オレンジ色 紫色

　サイズ、色は同時に指定することが出来ます。また太字や斜体等もタグを入れ子にして指定することにより、組み合わせて指定出来ます。
ソース実際の表示

<i>斜体<b>さらに太字
<font color="blue">色を青に</font>
<br /></i>斜体を止め
<font color="green" size=+1>
色は緑でサイズを大きく
</b>太字を止め</font>
<br /><font color="red" size=2>
色は赤でサイズを小さく
</font>
 斜体さらに太字 色を青に
斜体を止め 色は緑でサイズを大きく 太字を止め
色は赤でサイズを小さく

　◇そのまま表示

　◇全体構成でも説明したとおり、表示する部分について行頭・行末の半角スペースや改行は無視されます。明示的に改行させたい場合は <br /> タグを使うと説明しました。

　そうではなく、行頭・行末の半角スペースや改行もそのまま表示させたいとき、つまり事前に整形されている文をそのまま表示したい場合に <pre> タグと </pre> タグを使います。例えばこのページ内でもHTMLソースと実際の表示を並べて書いてありますが、そのHTMLソースの部分にこれを使ってます。

　使い方は整形済みの部分（そのまま表示させたい部分）を <pre> タグと </pre> タグで囲むだけです。

　◇特殊文字

　文字の装飾とはちょっと外れますが、ここで特殊文字の表示について簡単に説明しておきます。

　最低限必要なのは < や > という文字を表示させたい場合です。このページでもHTMLソースの例のところで表示していますが、 < はタグの開始なのか、あるいはただ表示したい文字なのか区別がつきません。そこで < を表示したい場合は &lt; とします。 > の場合は &gt; です。

　ちなみに一行上の説明で &lt; の部分は &amp;lt; と指定しています。

変換すべき特殊文字の例（&、<、>、"、半角空白は変換必須）
表示したい文字 & / < > " ! ? = % 半角空白
表示文字の文字列 &amp; &#47; &lt; &gt; &quot; &#33; &#63; &#61; &#37; &nbsp;


　◇一覧表示（リスト）

　これは箇条書き形式で一覧表示する場合の指定方法です。

　一覧表示させる固まりを <ul> タグと </ul> タグまたは <ol> タグと </ol> タグで囲み、一覧の個々の行を <li>タグ と </li> タグで囲みます。

　 ul と ol の違いは、一覧表している個々の行の頭につくのが記号か（ul）数字かアルファベットの連番か（ol）の違いです。
ソース　実際の表示

　一覧表示（<b>ul</b>）させる
<ul>
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ul>
　 　一覧表示（ul）させる
  • １行目
  • ２行目
  • ３行目

ソース　実際の表示

　一覧表示（<b>ol</b>）させる
<ol>
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol）させる
  1. １行目
  2. ２行目
  3. ３行目

　 <ul> タグに対するtype= パラメータで、行頭に付く記号の種類を変えられます。指定できるパラメータ値は"square"、"circle"、"disk"で、標準が"disc"です。
ソース　実際の表示

　一覧表示（<b>ul type="square"</b>）させる
<ul type="square">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ul>
　 　一覧表示（ul type="square"）させる
  • １行目
  • ２行目
  • ３行目

　一覧表示（<b>ul type="circle"</b>）させる
<ul type="circle">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ul>
　 　一覧表示（ul type="circle"）させる
  • １行目
  • ２行目
  • ３行目

　一覧表示（<b>ul type="disc"</b>）させる
<ul type="disc">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ul>
　 　一覧表示（ul type="disc"）させる
  • １行目
  • ２行目
  • ３行目

　 <ol> タグの場合はtype= パラメータで、行頭に付く連番の形式を変えられます。指定できるパラメータ値は"1"、"A"、"a"、"i"、"I"で、標準が"1"です。
ソース　実際の表示

　一覧表示（<b>ol type="1"</b>）させる
<ol type="1">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol type="1"）させる
  1. １行目
  2. ２行目
  3. ３行目

　一覧表示（<b>ol type="A"</b>）させる
<ol type="A">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol type="A"）させる
  1. １行目
  2. ２行目
  3. ３行目

　一覧表示（<b>ol type="a"</b>）させる
<ol type="a">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol type="a"）させる
  1. １行目
  2. ２行目
  3. ３行目

　一覧表示（<b>ol type="i"</b>）させる
<ol type="i">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol type="i"）させる
  1. １行目
  2. ２行目
  3. ３行目

　一覧表示（<b>ol type="I"</b>）させる
<ol type="I">
<li>１行目</li>
<li>２行目</li>
<li>３行目</li>
</ol>
　 　一覧表示（ol type="I"）させる
  1. １行目
  2. ２行目
  3. ３行目



このページの先頭 　ＨＴＭＬ編先頭 　サーバーＪａｖａ入門先頭 　技術メモ先頭

Copyright © 2002-2008 YOK. All Rights Reserved.