・実際の表示
・・・
・・・
実際にHTMLにどう書けばいいのかを紹介しています。特に必要な物だけに絞って書いています。 ここに書いていない事（特殊なこと）をしたい場合はCSSを使ったり、他のサイトを調べたりしてみてください。 （方法があるにはあるけど、オススメできないという記述方はいくつもあります。）
HTMLを学習するときに知っておくべき用語を説明します。
| 要素 | １つの"文章の意味"のまとまりのことです。開始タグから終了タグまでが１つの要素です。 A要素はリンク、H1要素は見出し、という風に名前や役割が最初から決められています。 |
|---|---|
| タグ | 要素の名前を「<」と「>」で囲った物のことです。 |
| 開始タグ | <要素名>と書き、範囲の開始点を示します。 |
| 終了タグ | </要素名>と書き、範囲の終了点を示します。 省略できる要素も存在しますが、そうでない要素には忘れずに付けましょう。 |
| ネスト | 要素の中にさらに他の要素を含ませることです。 |
| 属性 | 要素の設定項目です。<要素名 属性名="属性値">と書き、要素の細かい設定をします。（大きさやリンク先など） スペースで区切って複数設定できます。 |
| 属性値 | 属性について指定するもので、属性によって違うものが指定できます。 数字の場合と文字の場合があり、何を書くべきかは要素によって決まっています。 |
文字に意味を与えるには<要素名 属性名="属性値">・・・</要素名>という風に文字を囲みます。 これで「・・・」の部分に意味が与えられます。大文字と小文字の区別はありません。 要素の中に要素を入れて使うこともできますが、要素を閉じるときはその中にある全ての要素を閉じて下さい。
まずはただのテキストを用意しましょう。そして、そのテキストに意味を与えていきましょう。 「タグの概要」を参考に、タグを付け加えていきます。
属性を指定する必要がないときは省略します。 終了タグが必要ない場合は省略します。（※ 必要か必要ないかは自分で判断するものではありません。） また、テキスト内の改行とタブは無視されます。作るときに見やすくなるように積極的に使いましょう。
拡張子を「.html」に変えて保存すればHTMLは完成です。（フォルダのツールバーにある ツール→フォルダオプション→表示→詳細設定→「登録されている拡張子は表示しない」のチェックは外しておきましょう。）
HTMLに書いたものを表示させたくない時は「コメント」を使います。 「<!--」から「-->」までの部分は表示されなくなりますので、HTMLを作る際のメモとして使いましょう。
内容はともかく、まずはその文章がHTMLであることをブラウザに教える必要があります。 これらのタグが無いと、ただのテキストファイルとして認識されてしまいます。
| <HTML> | 指定した範囲がHTMLであることを意味します。 |
|---|---|
| <!DOCTYPE> | HTML要素の前で使い、HTMLのバージョンを示します。終了タグはありません。 |
| <HEAD> | HTML要素内で使い、指定した範囲がヘッダー（実際には見えない部分）であることを意味します。 |
| <META> | HEAD要素内で使い、HTMLの詳細情報を指定します。終了タグはありません。 これが無くてもブラウザは適当に解釈してくれます。（それでは困る場合もありますが。） |
| <TITLE> | HEAD要素内で使い、指定した文字をページのタイトルとして使います。（タイトルバーの表示やブックマークの名前など） |
| <BODY> | HTML要素内で使い、指定した範囲が本文であることを意味します。 |
よく分からない内は、とりあえず下の例を写しておきましょう。 あとはTITLE要素とBODY要素の中身だけを変えていけば問題ありません。
HTML要素やBODY要素にも属性値はあります。例えばHTML要素のlang属性は、 国際化への対応として文章の言語情報を指定できます。日本語なら"ja"、英語なら"en"です。
「見出し」とは文章の表題のことです。「段落」は本文を大まかに区切った一纏まりの文章です。
| <H1>〜<H6> | 指定した文字を見出しにします。1〜6まで数字を変えると、それに応じたランクの見出しとなります。ランクが上の文字の方が大きく表示されます。改行が伴います。 |
|---|---|
| <P> | 指定した文字を段落にします。改行と下の空白が伴います。 |
| <BR> | 強制的に改行します。終了タグは書きません。 |
H1〜H6の数字は見出しのランクに合わせて変えていきましょう。もちろんH1が最初です。同じランクの見出しが複数あっても問題ありませんが、H1の次にいきなりH4を指定するようなことはやめておきましょう。
ハイパーリンクを指定するにはA要素を使います。クリックすることで他のファイルを開くことができるようになります。 （これを「アンカー」と言います。） これを使わないページは「行き止まり」になってしまいます。せめて自分のwebサイト内は移動できるようにしないと、コンテンツを見てもらえません。
ただし、これだけでは意味がありません。以下の属性のどちらかを指定して使います。
| <A href="url"> | 「url」の部分に行き先のアドレスを指定します。相対指定と絶対指定があります。 |
|---|---|
| <A name="name"> | 「name」の部分に目的地としてのリンクの名前を指定します。 |
絶対指定はブラウザのアドレスバーに表示されるものと同じです。相対指定の方法は以下の通りです。
name属性の使い方は単純です。href属性で「page.html#jump」と指定すれば、「page.htmlの中のname="jump"と書かれたA要素」までスクロールします。 ここで「page.html」を省略して「#jump」とだけ書けば、現在のページの中から探します。 長い文章の見出しを探させるときなどに使うと便利でしょう。 名前は自由ですが、ページ内で被らないようにしましょう。
また、ターゲットフレームへのリンクというものがあります。 フレームを作ったときや、リンクを新規ウィンドウで開くときに使います。 フレームを作らない場合も、新規ウィンドウの開き方は覚えておいて損はありません。
| <A target="_x"> | 「_x」の部分にターゲットフレームの名前を指定します。リンクはそのフレームの中に開かれます。
以下の属性値を指定することも出来ます。
|
|---|---|
| <BASE href="url" target="_x"> | HEAD要素内で使い、基準ターゲットを指定します。 「url」には相対指定の基準となるアドレスを絶対指定で書きます。普通はそのHTMLのアドレスを書きます。 「_x」はA要素と同じです。target属性を指定しない全てのA要素に反映されます。 |
画像を表示するにはIMG要素を使います。この<IMG>が指定した画像と置き換わります。 終了タグはありません。また、改行を伴いません。
| <IMG src="url"> | 「url」の部分に表示する画像のアドレスを指定します。相対指定と絶対指定があります。 |
|---|---|
| <IMG alt="text"> | 「text」の部分に代替文字を指定します。画像が表示できない場合に、画像の代わりに表示されます。 |
| <IMG width=x> | 「x」の部分に画像の幅（横の大きさ）を指定します。 |
| <IMG height=y> | 「y」の部分に画像の高さ（縦の大きさ）を指定します。 |
widthやheightを指定すると、画像を読み込む前からそのサイズ分のスペースが確保されるのでレイアウトが崩れにくくなります。 ただし、画像の元のサイズと指定したサイズの比率によっては画質が乱れるので注意しましょう。
・・・
文字がずっと同じスタイルだと、文章があまりに平淡になる恐れがあります。 それを回避したい人のためのタグがこれです。まとめて紹介します。
| <B> | 指定した文字を太字にします。 |
|---|---|
| <I> | 指定した文字を斜体（イタリック文字）にします。 |
| <U> | 指定した文字を下線付きにします。（アンダーライン） |
| <S> <STRIKE> | 指定した文字を打ち消し線付きにします。 |
ここで紹介するのは、見た目ではなく意味を設定するものです。もちろん見た目も変化しますので、効果的に使いましょう。 すべて同じスタイルだと、どこが重要なポイントなのかが分からなくなります。特に重要な語句にはできるだけ指定しておきましょう。
| <EM> | 指定した文字を強調します。一般のブラウザでは斜体字になります。 |
|---|---|
| <STRONG> | 指定した文字を大きく強調します。一般的には太字になります。 |
| <SUB> | 指定した文字を下付き文字にします。行内にある他の文字よりも下に表示されます。 |
| <SUP> | 指定した文字を上付き文字にします。これらは他の行に被ることはありません。 |
| <INS> | その文章が修正により追加された文章であることを意味します。一般的には下線が付きます。 |
| <DEL> | その文章が修正により削除された文章であることを意味します。 一般的には打ち消し線が付きます。修正前の文章を残しておくことで、閲覧者に与える混乱を軽減できるはずです。 |
| <BLOCKQUOTE> | その文章が引用された文章であることを意味します。 改行と上下左の空白が伴います。決して著作物利用の免罪符ではありません。引用と盗用の線引きは難しいので気をつけましょう。 |
| <ADDRESS> | その文章が連絡先であることを意味します。改行が伴います。直訳は"住所"ですが、メールアドレスなどで十分でしょう。 |
上付き文字や下付き文字に下線をつけると下線まで移動してしまいますが、あまり気にしないようにしましょう。
ホームページが面白いって言われるとメチャ2嬉しい〜＾＾
箇条書きはリストとも呼ばれます。語句を列挙したい時に使うと見やすくなります。
| <UL> | 指定した範囲で記号付きリスト（＝順不同リスト）を使えるようにします。 |
|---|---|
| <OL> | 指定した範囲で番号付きリストを使えるようにします。 |
| <LI> | UL要素（またはOL要素）の中で使い、リストの項目を表します。最初に記号（または番号）がつきます。 |
テーブルとは要素を縦横にキッチリ並べる表のことで、TABLE要素によって作成します。 ただし、TABLE要素だけでは何も表示されません。TR要素とTD要素が含まれている必要があります。 実際の中身はTD要素（またはTH要素）に書きます。
テーブルは中身が全て読み込まれるまで表示されません。 あくまで表のための要素であり、これをレイアウトに利用するのはご法度です。レイアウト調節にはCSSを使いましょう。
| <TABLE> | 指定した範囲に含まれるタグでテーブルを構成します。 改行を伴います。 |
|---|---|
| <CAPTION> | TABLE要素内で使い、表のタイトルを指定します。 表の枠外上に表示されます。使う必要性は特にありません。 |
| <TR> | TABLE要素内で使い、表の行（横）を表します。個数は自由です。 |
| <TD> | TR要素内で使い、表の列（縦）を表します。 全ての行に同じ数の列が必要です。表示する本文はこの要素内に書きます。 |
| <TH> | TD要素の代わりに使い、行や列の見出しを指定します。一般的には太字になります。 |
| 実施月 | 受験者数 | 合格者数 |
|---|---|---|
| April | 45人 | 25人 |
| May | 64人 | 26人 |
| June | 55人 | 28人 |
上の例では4行3列の表が出来ているのが分かります。さらに属性を指定することで、より複雑な表を作ることもできます。
| <TABLE border=x> | 「x」に枠線の太さを指定します。初期値は0です。 |
|---|---|
| <TD colspan=x> | 「x」に指定した数字の分だけ行を結合します。初期値は1だと考えてください。 |
| <TD rowspan=y> | 「y」に指定した数字の分だけ列を結合します。この２つはTH要素にも指定できます。 |
| 都道府県 | 受験大学名 | 受験者数（一次／二次） | |
|---|---|---|---|
| 東京都 | 東京大学 | 14人 | 10人 |
| 大阪府 | 大阪大学 | 8人 | |
| 福岡県 | 九州大学 | 5人 | |
| 福岡大学 | 3人 | 1人 | |
1つのウィンドウに複数のページを表示するのがフレームです。何も設定しなければフレームは1つなのです。 2つに分けて片方に目次、片方にコンテンツを表示するというやり方が一般的です。 見やすい上に作成後のページ更新の手間も少なくなるのでとても便利です。 ただし、ノートパソコンのような小さい画面では見づらくなる可能性もあります。 フレームを全くサポートしていないブラウザも存在します。（マイナーかもしれませんが）
| <FRAMESET> | フレームを分割する用意をします。BODY要素の中には入れません。 |
|---|---|
| <FRAME> | FRAMESET要素内で使い、実際にフレームを作成します。 表示するページアドレスをsrc属性に記述します。また、name属性を設定することで、 A要素のtarget属性の目的地としての名前を作れます。終了タグはありません。 |
| <NOFRAMES> | FRAMESET要素内で使い、フレームが表示できないブラウザで開いた場合に表示する内容を示します。念には念を入れましょう。 |
| <IFRAME> | インラインフレームを作ります。 フレームの中に小さなフレームを作るブロックレベル要素で、上３つの要素とは直接には関係ありません。 src属性にアドレスで表示するページを、marginheight属性に1以上の整数で枠線と内容の間隔を、 frameborder属性に1か0で枠線の有無を設定できます。 |
また、フレームを2つ以上作る場合はFRAMESET要素に「rows」か「cols」の属性が必要です。 それぞれ上下、左右にフレームが分割されます。 また、下の記述例のようにフレームの大きさをフレームの数だけ指定する必要があります。 数字で指定する方法と割合（%）で指定する方法があります。 最後の1つだけは「*」にして自動計算させるのがオススメです。
<HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html"; charset="Shift_JIS"> <TITLE>私のホームページ</TITLE> </HEAD> <FRAMESET rows="200,*"> <FRAME src="contents1.html" name="up"> <FRAME src="contents2.html" name="down"> <NOFRAMES>フレーム未対応ブラウザでは見ることができません</NOFRAMES> </FRAMESET> </HTML>
FRAMESET要素の中にFRAMESET要素を含ませることで、複雑なフレーム割りも実現できます。 （FRAME要素をFRAMESET要素に置き換えてみると分かりやすいと思います。） TABLE要素と違って、行ごとの列の数を合わせる…なんて事は考えずに済みます。
また、以下のような属性値も指定できます。
| <FRAME noresize> | フレームの大きさを閲覧者が自由に変える事を禁止します。値は書きません。 |
|---|---|
| <FRAME frameborder="1"or"0"> | フレームの枠線の有無を指定します。 "1"なら表示、"0"なら非表示になります。 |
| <FRAME scrolling="yes"or"no"> | フレームの内容のスクロールをするかしないかを指定します。 「yes」か「no」を書きます。 |