表（テーブル）を作る「table要素」

　Excelのような表計算ソフトを使って表を作ったことはありませんか？
文章だけで説明するより、表にしたほうが説明しやすい・わかりやすいことはよくあることです。

　HTMLでは、「table要素」を使って表を作ります。
<table>と</table>で囲った範囲に表を作ることができます。

　ただし、「table要素」だけでは表を作り上げることができません。
表を作り上げるためには、後に説明する「tr要素」と「td要素」が必要になります。

　ちなみに、「table要素」の「table」は、表といった意味があります。そのままですね。

表の行を作る「tr要素」と表のセルをつくる「td要素」

　「table要素」だけでは、表を作ることを定義しただけですので、表に必要な行や、行の中のセルがありません。ですから表を表示することができません。

　表の行を作るには「tr要素」、行の中のセルを作るを作るには、「td要素」を使います。
「table要素」の中の「tr要素」の数だけ行ができ、「tr要素」の中の「td要素」の数だけその行のセルが出来上がります。
<tr>と</tr>で囲った範囲が行、<td>と</td>で囲った範囲がセルとなります。

　たとえば行数３、列数２の表を作る場合は以下のように記述します。
<table>と</table>で囲った範囲に表を作ることができます。
間違えやすい、忘れやすいことなので明記しますが、水平方向が行、垂直方向が列になります。

<table>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
</table>

　ちなみに、「tr要素」の「tr」はTable Rowの略で、表の列といった意味で、「td要素」の「td」はTable Dataの略で、表のデータといった意味になります。

セルの結合、「colspan属性」と「rowspan属性」

　Excelなどの表計算ソフトでは、セルとセルをくっつけて一つにするセルの結合ができます。
それと同じように、「td要素」に「colspan属性」・「rowspan属性」を指定すると、セルの結合ができます。

　「colspan属性」を指定すると水平方向に、「rowspan属性」を指定すると垂直方向にセルの結合ができます。

たとえば、水平方向に２つのセルを結合するには、
<td colspan="2">
と記述します。

もうお分かりだと思いますが、垂直方向に２つのセルを結合するには、
<td rowspan="2">
と記述します。

表の表題を付ける「caption要素」

　「table要素」には、その表に表題を付けることができます。
表に表題を付けるには、「caption要素」を使用します。
<caption>と</caption>で囲った範囲が表の表題になります。

　 「caption要素」を使用する方法は簡単で、「tabel要素」の開始タグの直後に「caption要素」を使用し、表題を付ければよいだけです。
気をつけなくてはいけないのは、「tabel要素」の開始タグの直後に指定しなければいけないということです。

　ちなみに、「caption要素」の「caption」は表題やタイトル、見出し意味になります。

表のヘッダセルを作る「th要素」

　「table要素」と「tr要素」、「td要素」だけで表は作ることができますが、表のヘッダ・見出しのセルを意味する「th要素」が存在します。
<tr>と</tr>で行を作り、<th>と</th>で囲った範囲がヘッダセルとなります。

　使い方は「td要素」とほぼ同じです。
　たとえば行数３、列数２の表で、一行目をヘッダセルとする場合は以下のように記述します。

<table>
	<tr><th></th><th></th></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
<・table>

　ちなみに、「th要素」の「th」はTable Headerの略で、表のヘッダといった意味になります。

<!--ただ単に表を作るだけでは、線は表示されませんので、
	style要素でスタイルを指定して線を表示しています。
	また、th要素の文字を太字にします。-->
	<style>
		.sample table,.sample td{
			border:solid thin black;
		}
		.sample th{
			border:solid thin black;
			font-style:bold;
		}

	</style>
<div class="sample">
	<table>
		<caption>名簿表</caption>
		<tr><th>名前</th><th>住所</th><th>電話番号</th></tr>
		<tr><td>Aさん</td><td>○○市</td><td>XX-XXXX-XXXX</td></tr>
		<tr><td>Bさん</td><td>△△市</td><td>YY-YYYY-YYYY</td></tr>
		<tr><td>Cさん</td><td>××町</td><td>ZZZ-ZZZ-ZZZZ</td></tr>
		<tr><td>Dさん</td><td>□□村</td><td>???-???-????</td></tr>
	</table>

	<table>
		<caption>「colspan属性」・「rowspan属性」の例</caption>
		<tr><td colspan = "4">colspan属性に4を指定した例</td></tr>
		<tr><td rowspan = "2">rowspan属性に<br>2を指定した例</td><td>指定なし</td><td>指定なし</td><td>指定なし</td></tr>
		<tr><td>指定なし</td><td colspan = "2" rowspan = "2">colspan属性に2、<br>rowspan属性に2を指定した例</td></tr>
		<tr><td>指定なし</td><td>指定なし</td></tr>
	</table>
</div>

「table要素」のまとめと次回記事について

　今回説明した「table要素」はいかがでしたでしょうか。
「table要素」はHTMLで表を作る重要な要素です。
表を使うことで、見やすいHTML文章が作れると思いませんか？

　次回からは、HTML上でデータ入力や送信が可能な、いわゆる入力フォームを作る「form要素」の説明を３回に分けてしていきます。
まずは、フォーム領域を作り、そこにテキストを表示するラベルを表示し、データを送信するだけのフォームを作ってみましょう。
以上、当サイト管理人のAsterismでした。

スタイル情報「style要素」

　いままで扱ってきたHTML要素(たとえば「div要素」「span要素」)で、表示を変化させる「style属性」というものがありました。
この「style属性」を「style要素」として指定し、後の「style属性」を省略することができます。
<style>と</style>で囲った範囲に他のファイルへ移動する機能を加えることができます。

　「style要素」の中は、スタイルシートと呼ばれる記述の仕方で記述します。
スタイルシートの詳細はこのページでは触れませんが、簡単な書き方のみ触れておきます。
たとえば、「b要素」の文字色を赤くする場合は以下のように記述します。

<style>
	b {
		color:red;
	}
</style>

　ちなみに、「style要素」の「style」は、形式や様式といった意味があります。

各々の要素の「id属性」で「style要素」を反映する方法

　さて、一番最初に説明した方法では、HTMLファイル内のすべての「b要素」に「style要素」が反映されます。

　この制限を解決するために、各々の要素の「id属性」で「style要素」を反映させることができます。
たとえば、「id属性」が"sample-id"の「b要素」のみ文字色を赤くする場合は、以下のように記述します。

<style>
	b#sample-id{
		color:red;
	}
</style>

　ただし、「id属性」の値は、1つのHTMLファイルの中に同じ値を２回以上使うことができません。
２つ以上の要素に同じスタイルを適応したいときにはとても不便です。

各々の要素の「class属性」で「style要素」を反映する方法

　「id属性」と同じように、各々の要素の「class属性」で「style要素」を反映させることもできます。

「class属性」は「id属性」とは違い、1つのHTMLファイルの中に同じ値を２回以上使うことができます。
ですので、「class属性」を使用して、「style要素」を反映させたほうがよいでしょう。
「class属性」が "sample-class"の「b要素」のみ文字色を赤くする場合は、以下のように記述します。

<style>
	b.sample-class{
		color:red;
	}
</style>

　また、「b要素」だけではなく、すべての要素にこの「style要素」を適応させ、「class属性」の値が"sample-class-all"のみ文字色を赤くする場合は以下のように記述します。

<style>
	.sample-class-all{
		color:red;
	}
</style>

　このようにすることで、「strong要素」や「span要素」などで「class属性」に"sample-class-all"と指定すれば文字色が赤くなります。

疑似クラスのスタイル

　「a要素」のハイパーリンクで、未訪問のリンク、訪問済みのリンク、カーソルが重なった状態のリンクなど、文字色やフォントが変わるサイトがあります(当サイトがそうです)。
こういった動作をさせるのもスタイルシートの役割で、疑似クラスと呼ばれています。もちろん、「style要素」でも指定可能です。

疑似クラスはたくさんあるのですが、今回は主によくつかわれる４つの疑似クラスについて簡単に説明します。

:link

未訪問のリンクを表します。この疑似クラスは「a要素」のみ有効です。

:visited

訪問済みのリンクを表します。この疑似クラスは「a要素」のみ有効です。

:hover

マウスカーソルが要素上にある場合を表します。リンクであれば、リンク上にマウスカーソルがある場合です。「a要素」以外でも使用可能です。

:active

現在選択中の要素を表します。リンクであれば、現在選択中(リンク先に訪問中)の場合です。「a要素」以外でも使用可能です。

　この疑似クラスを「a要素」すべて動作するようにする場合は、以下のように記述します。
(link：青、visited：紫、hover:赤、active:緑)

<style>
	a:link{
		color:blue;
	}
	a:visited{
		color:purple;
	}
	a:hover{
		color:red;
	}
	a:active{
		color:green;
	}
</style>

　また、この疑似クラスを「a要素」の「class属性」の値が"sample-class-a"の場合のみ動作する場合は、以下のように記述します。

<style>
	a.sample-class-a:link{
		color:blue;
	}
	a.sample-class-a:visited{
		color:purple;
	}
	a.sample-class-a:hover{
		color:red;
	}
	a.sample-class-a:active{
		color:green;
	}
</style>

　なお、この疑似クラスは、「:link→:visited→:hover→:active」の順番で記述する必要があります。

サンプル

　今回説明した、「style要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<style>
	b#sample-id{
		color:red;
	}
	.sample-class-all{
		color:gray;
	}

	a.sample-class-a:link{
		color:blue;
	}
	a.sample-class-a:visited{
		color:purple;
	}
	a.sample-class-a:hover{
		color:red;
	}
	a.sample-class-a:active{
		color:green;
	}
	span.sample-class-span:link{
	}
	span.sample-class-span:visited{
	}
	span.sample-class-span:hover{
		background-color:lightgreen;
	}
	span.sample-class-span:active{
		color:red;
	}

</style>
<p>
<b id="sample-id">これは、「b要素」に「id要素」でスタイル"sample-id"を指定した例です。</b>
</p>
<p>
<em class="sample-class-all">これは、「em要素」に「class要素」でスタイル"sample-class-all"を指定した例です。</em><br>
</p>
<p>
<span class="sample-class-all">これは、「span要素」に「class要素」でスタイル"sample-class-all"を指定した例です。</span><br>
</p>
<a class="sample-class-a" href="#sample-id">このリンクは、「class要素」で疑似クラスを設定したスタイル"sample-class-a"を指定した例です。</a>
<p>
<span class="sample-class-span">これは、「span要素」に疑似クラスを設定したスタイル"sample-class-span"を指定した例です。マウスカーソルをのせてみたり、クリックしてみてください。</span><br>
</p>

表示結果

ハイパーリンク「a要素」

　HTMLファイルでは、他のHTMLファイルなどへジャンプする、ハイパーリンクがあります。
HTMLで他のHTMLファイルなどへ移動する機能を加えるには、「a要素」を使用します。
<a>と</a>で囲った範囲に他のファイルへ移動する機能を加えることができます。

　ハイパーリンクは、通常「リンク」と呼ばれ、様々なウェブサイトで使用されているのでなじみがある方も多いでしょう。
お互いのホームページへリンクを張ることを相互リンクなどと呼んだり、よくつかわれてる言葉であり、そして機能でもあります。

　ちなみに、「a要素」の「a」はAnchorの略で、船の錨(いかり)や、据え付ける、といった意味があります。

移動先を示す「href属性」

　「a要素」だけでは、どこに移動すればよいのかわかりません。
移動先を示すには、「href属性」を使って指定します。
この「href属性」は「a要素」に必ず指定する必要があります。

　「href属性」に指定する移動先の場所の指定の仕方は、URLで指定します。
「http://」から始まる絶対パスでも、そのhtmlファイルがある場所を中心に指定する相対パスでもどちらでも構いません。
たとえば、「http://blog.thinkreatesoft.net/」へ移動するリンクを張る場合、
<a href="http://blog.thinkreatesoft.net/">
と記述します。

　また、メールアドレスを指定することもできます。この場合、ブラウザではなくメールソフトが立ち上がります。
ただし、メールアドレスを指定することはお勧めしません。スパムメールが大量に送られてくることになるからです。

同一HTMLファイルの指定した場所へ移動する方法

　「href属性」はHTMLファイルの指定した場所へ移動することができます。
目次などを作り、その記事にジャンプさせるような使い方ができます。

　そのやり方は、「div要素」や「p要素」「h1要素」などほとんどの要素には「id属性」があり、「id属性」にID指定し、
<a href="#指定したID">と指定することで、そのIDがある位置まで移動することができるようになります。
たとえば、「div要素」に「id属性」として"div-element"を指定し、そこに移動するリンクを張る場合、以下のように記述します。
<div id="div-element">
<a href="#div-element">

　また、ページの先頭に移動するには<a href="#top">とすれば、ページの先頭まで移動します。

リンク先の表示方法を指定する「target属性」

　 リンク先を訪問したとき、今表示しているウィンドウから移動する、新規ウィンドウもしくはタブが作られて移動する
２つの移動の仕方を経験したことがありませんか？
移動先のブラウザを今表示しているブラウザか、新規ウィンドウ・タブかを指定するには「target属性」を使います。

　「target属性」に指定できる値は４つありますが、HTML５ではフレームが廃止されたため、
新規ウィンドウ・タブで表示する"_blank"、
現在のブラウザで表示する"_self"を覚えてを覚えておくといいでしょう。
なお、「target属性」を省略した場合は"_self"が指定されたものとして、移動先を表示します。

　残り二つの値は"_parent"と"_top"ですが、
この二つの値の意味は"_parent"は親フレームに表示、"_top"はフレームを解除して表示という意味になります。
なお、当サイトではフレームに関しては触れる予定はありません。

サンプル

　今回説明した、「a要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
また、当サイトのスタイルシートの関係上、リンク上にマウスを置くと、文字の色が赤くなるようになっています。(本来は赤くなりません)

サンプルソースコード

<a href="http://blog.thinkreatesoft.net/">Think &amp; Create ホームへ</a><br>
<a href="http://blog.thinkreatesoft.net/" target="_blank">Think &amp; Create ホームを新規ウィンドウで表示</a><br>
<a href="#a-element">「a要素」の説明へ</a>(「h2要素」にidを指定しています)<br>
<a href="#top">ページの先頭へ</a><br>
画像をクリックすると大きく表示されます<br>
<a href="http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png">
<img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="50"width="50" style="border:thick none red;"><br>
</a><br>

表示結果

Think & Create ホームへ
Think & Create ホームを新規ウィンドウで表示
「a要素」の説明へ(「h2要素」にidを指定しています)
ページの先頭へ
画像をクリックすると大きく表示されます

画像「img要素」

　新聞や本には文章以外にも写真や絵などの画像が載っています。
HTMLで画像を表示するためには「hr要素」を使います。
<img>要素で画像を表示します。

　この「img要素」は、「br要素」「hr要素」と同じで、終了タグがありません。
「img要素」も終了タグがないことを示す方法として、<img />といった書き方もあります。

　ちなみに、「img要素」の「img」はimageの略で、画像や映像といった意味があります。

表示する画像を指定する「src属性」

　「img要素」だけでは、どの画像を表示すればよいのかわかりません。
表示する画像を指定するためには、「src属性」を使って指定します。
この「src属性」は「img要素」に必ず指定する必要があります。

　「src属性」に指定する画像のある場所の指定の仕方は、URLで指定します。
「http://」から始まる絶対パスでも、そのhtmlファイルがある場所を中心に指定する相対パスでもどちらでも構いません。
たとえば、htmlファイルがあるフォルダにimage.pngという名前の画像ファイルがある場合に相対パスで指定する場合は、
<img src="image.png">
と記述します。

表示する画像の代わりとなるテキスト「alt属性」

　「img要素」は、画像をダウンロードするために時間がかかります。その間は画像を表示できません。
また、視覚障がい者のためなどに、音声で読み上げるブラウザは画像を読み上げることができません。
そのため、画像の代わりとなるテキストを指定する「alt属性」があります。

　たとえば、src属性で指定した<img src="image.png"> に「これは画像です」という代わりの文章を加えるには、
<img src="image.png" alt="これは画像です">
と記述します。

表示する画像の説明「title属性」

　「img要素」は、画像に説明文を加えることができる、「title属性」があります。
「title属性」に説明文を指定すると、画像の上にマウスカーソルを置くと、その説明がポップアップ表示されたりします。

　たとえば、src属性で指定した<img src="image.png"> に「これは画像の説明文です」という説明を加えるには、
<img src="image.png" title="これは画像の説明文です">
と記述します。

　「alt属性」と「title属性」の違いは、「alt属性」は、画像が表示できない場合、代わりに表示するテキストを指定します。
それに対し「title属性」は、画像の表示に関係なく、画像に説明を指定する場合に使います。

表示する画像を高さを指定「height属性」、幅を指定「width属性」

　「img要素」で画像を表示するときには高さを「height属性」、幅を「width属性」で指定し、拡大・縮小することができます。
また、画像は実際にダウンロードされるまで、画像のサイズがわかりません。そのせいで画像のダウンロードが終わるたびに、ブラウザ上の表示が変わったりします。
そういった表示の崩れを防ぐために、「height属性」「width属性」に実際の画像のサイズを最初から指定して画像を表示するエリアを明確にします。
高さと幅の指定方法は、ピクセル単位で指定します。

　たとえば、src属性で指定した<img src="image.png">に高さ100ピクセル、幅200ピクセルを指定する場合、
<img src="image.png" height="100"width="200">
と記述します。

表示を変化させる「style属性」

　いままでたくさんの要素で説明してきた「style属性」、「img要素」にももちろんあります。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。

　スタイルシートの詳細についてはまたの機会に説明します。
ここでは線の太さ、形、色を変える方法を簡単に説明します。

境界線をつける「style属性」の「borderプロパティ」

　いままでたくさんの要素で説明してきた「style属性」、「img要素」にももちろんあります。
スタイルシートの詳細についてはまたの機会に説明します。
ここでは「borderプロパティ」を使って画像に境界線を付ける方法を説明します。

　まずは、太さ1ピクセル、形は実線、色が赤の線を画像の境界につけてみましょう。
src属性で指定した<img src="image.png">に太さ1ピクセル、形は実線、色が赤の境界線を付けるには、
<img src="image.png" style="border:1px solid red;">
または、<img src="image.png" style="border:1px solid #FF0000;">
と指定します。前回の「hr要素」で説明した線の引き方に似ていますね。

　ほとんどが「hr要素」での線の引き方と同じですが、ここでも同じように境界線の引き方を説明します。
まずborder:に続く1pxで、境界線の太さを1ピクセルにしなさいと指定しています。
ピクセル単位での指定方法、もしくは「thin」「medium」「thick」（それぞれ薄い、中間、厚い）といった指定の仕方もあります。
実際に、上からthin、medium、thickを指定した例を赤線で表示します。

　つぎのsolidでは、実線を引きなさいと指定しています。
このsolidの部分を変えることで、境界線の形、引き方を変えることができます。
前回の「hr要素」の時と同じですが、この線の形には以下の種類があります。

none

線を引きません。

hidden

noneと同じく線を引きません。

dotted

点線を引きます。

dashed

破線を引きます。

solid

実線を引きます。

double

二重線を引きます。

groove

くぼみのような線を引きます

ridge

grooveと逆のような線を引きます。

inset

箱をはめ込んだような線を引きます。

outset

insetと逆のような線を引きます。

　言葉だけではわかりにくいので、境界線の太さをthick、色を赤に指定した線をそれぞれ表示します

・none

・hidden

・dotted

・dashed

・solid

・double

・groove

・ridge

・inset

・outset

　最後の#FF0000、redで色を赤に指定しています。
この部分を#00FF00、greenにすると緑、#0000FF、blueにすると青になります。
色の指定の仕方は、、「div要素」の説明で詳しく説明しているのでそちらをご覧ください。

背景色を変える、「background-colorプロパティ」

「div要素」と「span要素」で説明した背景色を変える、background-colorプロパティが「img要素」にもあります。
点線や破線の線のない部分や、透過PNGの透明色の部分が背景色になります。
src属性で指定した<img src="image.png">の背景色を赤に変えるには、
<img src="image.png" style="background-color:#FF0000;">
もしくは、
<img src="image.png" style="background-color:red;">
と記述します。

・画像は透過PNG、境界線は赤の点線、背景色を指定しない場合

・画像は透過PNG、境界線は赤の点線、背景色を青にした場合

画像に影を付ける、「box-shadowプロパティ」

　画像に影を付けて、立体感を出すことができます。
画像に影を付けるには、「box-shadowプロパティ」を使います。
src属性で指定した<img src="image.png">に影を付けるには、
<img src="image.png" style="box-shadow: 1px 2px 5px #000000;">
のように記述します。

最初の1pxは右方向の影です。マイナスの数を指定すると左側に影ができます。
次の2pxは下方向の影です。マイナスの数を指定すると上側に影ができます。
３つ目の5pxは影をぼかす範囲です。この数を大きくすると影は大きく薄くなります。マイナスの数は指定できません。
最後の#000000は影の色です。この場合、影の色を黒に指定しています。

・左2px、下2px、ぼかす範囲を5px、色を#000000(黒)を指定した場合は以下のようになります。

・左-5px、下-1px、ぼかす範囲を2px、色を#0000FF(青)を指定した場合は以下のようになります

サンプル

　今回説明した、「img要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
なお、WordPressの仕様上、src属性を絶対パスで指定しています。
サンプルを使用する場合は、まず画像を用意し、src属性のURLを書き換えてください。

サンプルソースコード

<div style="background-color:silver;">
縦200ピクセル、横200ピクセルの画像に「星のイメージ」と代わりのテキストを付け、説明文を「200×200の星の絵」にして表示します。<br>
<img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="星のイメージ" title="200×200の星の絵"><br>
上の画像を縦100ピクセル、横300ピクセルにし、「100×300の星のイメージ」と代わりのテキストをつけ、、説明文を「100×300の星の絵」にして表示します。<br>
<img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="100"width="300" alt="100×300の星のイメージ" title="100×300の星の絵"><br>
縦200ピクセル、横200ピクセルの画像に「境界線つき星のイメージ」と代わりのテキストを付け、説明文を「白の二重線の境界線つき星の絵」にし、太い二重線の境界線を白色で引き、背景色を黒に指定して表示します。<br>
<img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="境界線つき星のイメージ" title="白の二重線の境界線つき星の絵" style="border:thick double white;background-color:black;"><br>
縦200ピクセル、横200ピクセルの画像に「影つき星のイメージ」と代わりのテキストを付け、説明文を「灰色の境界線と黒い影つき星の絵」にし細い実線の境界線を銀色で引き、左2px、下2px、ぼかす範囲5px、黒の影を付けて表示します。<br>
<img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="影つき星のイメージ" title="灰色の境界線と黒い影つき星の絵" style="border:thin solid gray;box-shadow: 2px 2px 5px black;"><br>
</div>

表示結果

縦200ピクセル、横200ピクセルの画像に「星のイメージ」と代わりのテキストを付け、説明文を「200×200の星の絵」にして表示します。

上の画像を縦100ピクセル、横300ピクセルにし、「100×300の星のイメージ」と代わりのテキストをつけ、、説明文を「100×300の星の絵」にして表示します。

縦200ピクセル、横200ピクセルの画像に「境界線つき星のイメージ」と代わりのテキストを付け、説明文を「白の二重線の境界線つき星の絵」にし、太い二重線の境界線を白色で引き、背景色を黒に指定して表示します。

縦200ピクセル、横200ピクセルの画像に「影つき星のイメージ」と代わりのテキストを付け、説明文を「灰色の境界線と黒い影つき星の絵」にし細い実線の境界線を銀色で引き、左2px、下2px、ぼかす範囲5px、黒の影を付けて表示します。

区切り「hr要素」

　文章を分けるためなどに区切りを入れることがあるでしょう。
HTMLで区切りを入れるためには「hr要素」を使います。
<hr>と書けば区切りをしてくれます。とても簡単ですね！

　この「hr要素」は、「br要素」と同じで、終了タグがありません。<hr>だけで一つの要素になります。
終了タグがないことを示す方法として、<hr />といった書き方もあります。

　 この要素を使う上で一つ気をつけなくてはいけない点は、「p要素」の中では使用できないということです。
「区切り」なのですから、せめて段落はわかれていないとおかしな文章になってしまいますよね。
なので、この「hr要素」は通常「p要素」と「p要素」の間など段落の区切りに使います。

　ちなみに、「hr要素」の「hr」はhorizontal ruleの略で、水平な罫線といった意味があります。

区切り線を変化させる「style属性」

　「div要素」や「span要素」と同じく、「hr要素」にはブラウザ上の表示を変える「style属性」があります。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。

　スタイルシートの詳細についてはまたの機会に説明します。
ここでは線の太さ、形、色を変える方法を簡単に説明します。

線の太さ、形、色を変える、border-topプロパティ

では、「hr要素」を使って線の形と色を変える方法を説明します。
まずは、線の太さを1ピクセル、形を実線、色を赤に変えてみましょう。
線の太さを1ピクセル、形を実線、色を赤にするには、
<hr style="border:0;border-top:1px solid #FF0000;">
もしくは、
<hr style="border:0;border-top:1px solid red;">
と記述します。
実際にこのように記載した「hr要素」を使うとこのような表示になります。

　一番最初のborder:0;はいったい何をしているのかというと、「hr要素」の線を消しています。
なぜ消す必要があるのかというと、ブラウザごとに「hr要素」の線の表示が異なっているからです。
こうすることで、どのブラウザでも同じような境界線を引くことができるようになります。

　次のborder-top:1px solid red;で太さ、形、色を指定しています。

　まずborder-top:に続く1pxで、線の太さを1ピクセルにしなさいと指定しています。その他にもいろいろな指定方法がありますが、
ピクセル単位での指定方法、もしくは「thin」「medium」「thick」（それぞれ薄い、中間、厚い）といった指定の仕方もあります。
実際に、上からthin、medium、thickを指定した例を赤線で表示します。

　つぎのsolidでは、実線を引きなさいと指定しています。
このsolidの部分を変えることで、線の形、線の引き方を変えることができます。
この線の形には以下の種類があります。

none

線を引きません。

hidden

noneと同じく線を引きません。

dotted

点線を引きます。

dashed

破線を引きます。

solid

実線を引きます。

double

二重線を引きます。

groove

くぼみのような線を引きます

ridge

grooveと逆のような線を引きます。

inset

箱をはめ込んだような線を引きます。

outset

insetと逆のような線を引きます。

　言葉だけではわかりにくいので、線の太さをthick、色を赤に指定した線をそれぞれ表示します

　今回はinsetとoutsetの違いがわかりにくいかもしれませんが、この線の引き方は区切りをする「hr要素」の用途には向いていないので、あまり気にしないでください。

　最後の#FF0000、redで色を赤に指定しています。
この部分を#00FF00、greenにすると緑、#0000FF、blueにすると青になります。
色の指定の仕方は、「div要素」の説明で詳しく説明しているのでそちらをご覧ください。

背景色を変える、background-colorプロパティ

「div要素」と「span要素」で説明した背景色を変える、background-colorプロパティが「hr要素」にもあります。
線に背景色なんてないのでは？と思うかもしれませんが、実はあります。
たとえば、点線の線がない部分が背景色になります。
「hr要素」を使って文字の背景色を赤に変えるには、
<hr style="background-color:#FF0000;">
もしくは、
<hr style="background-color:red;">
と記述します。

サンプル

　今回説明した、「hr要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<div style="background-color:silver;">
１ピクセルの実線を青色で引いて区切りをします。<br>
<hr style="border:0;border-top:1px solid blue;">
細い破線を青色で引き、背景色を赤にして区切りをします。<br>
<hr style="border:0;border-top:thin dashed blue;background-color:red;">
太い点線を白色で引き、背景色を黒にして区切りをします。<br>
<hr style="border:0;border-top:thick dotted white;background-color:black;">
15ピクセルの二重線を赤色で引き、背景色を緑にして区切りをします。
<hr style="border:0;border-top:15px double red;background-color:green;">
普通の太さの実線を透明色で引き、背景色を黒にして区切りをします。
<hr style="border:0;border-top:medium solid transparent;background-color:black;">
</div>

表示結果

文章の分類、グループ化「div要素」

　文章を分類、グループ化、一区切りにする必要があるときがあると思います。
そういった場合には「div要素」を使います。
<div>と</div>で囲んだ範囲が一つの文章のグループとなります。

　この「div要素」、そのまま単体で使用した場合はブラウザ上の表示では特にこれといった効果はありません。
しかし、実は文字の色や形、背景など見た目を変えるためにとても重要な要素なのです。

　ちなみに、「div要素」の「div」はdivisionの略で、分割や区分といった意味があります。

表示を変化させる「style属性」

　「div要素」でブラウザ上の表示を変えるには「style属性」を使います。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。

　スタイルシートの詳細についてはまたの機会に説明しますが、ここでは文字の色、背景を変える方法を簡単に説明します。

文字の色を変える、colorプロパティ

まずは「div要素」を使って文字の色の変え方の簡単な説明をします。
「div要素」を使って文字の色を赤に変えるには、
<div style="color:#FF0000;">
もしくは、
<div style="color:red;">
と記述します。

　「color:#FF0000」、「color:red」で文字の色を赤にしなさいと記述しているわけです。
「color」の部分はプロパティといって、色の情報をもっています。それを今回の場合は赤に書き換えています。
#FF0000とは２ケタの１６進数でそれぞれ赤、緑、青の光の三原色を指定しています。
#00FF00では緑、#0000FFでは青、#FFFFFFならば白、#000000。
わかりやすく色付けをするならば、#FFFFFFとなります。

　「color:red」のredはもうお分かりですね。色名を直接指定しています。
blueなら青、greenなら緑になります。
また、色を透明にする場合は、「transparent」と指定します。この場合、文字が透明になって見えなくなります。

なお、色名なら何でも指定できるというわけではなく、指定できる色にはきちんと決まりがあります。
詳しくはHTMLなどの標準化を進めているW3Gのサイト(http://www.w3.org/TR/css3-color/#svg-color)に掲載されていますので、それをご覧ください。

　最後の「；」は区切り文字で、プロパティへ対する値の指定を区切るために記述します。これで複数のプロパティへの値を指定することができるようになります。

背景色を変える、background-colorプロパティ

　文字の色を変えることができるなら、文字の背景色も変えることができます。
「div要素」を使って文字の背景色を赤に変えるには、
<div style="background-color:#FF0000;">
もしくは、
<div style="background-color:red;">
と記述します。

　上で説明した、colorプロパティと使い方が同じで、プロパティだけ違うので使い方はもうお分かりでしょう。
colorプロパティで色を透明にする「transparent」も指定できます。

　最後に、文字の色を赤、背景色を青に変えるには、
<div style="color:#FF0000;background-color:#0000FF;">
もしくは、
<div style="color:#red;background-color:blue;">
と記述します。

文節の分類、グループ化「span要素」

　「div要素」は、文章を分類、グループ化する要素でしたので、短い文を分割、グループ化することには使いません。
短い文を分類、グループ化するには「span要素」を使います。

<span>と</span>で囲んだ範囲が一つの文節のグループとなります。

　この「span要素」、そのまま単体で使用した場合は「div要素」と同じで、ブラウザ上の表示では特にこれといった効果はありません。
しかし、実は文字の色や形、背景など見た目を変えるためにとても重要な要素なのも「div要素」と同じです。

　ちなみに、「span要素」の「span」は、短期間といった意味があります。

表示を変化させる「style属性」

　「span要素」は「div要素」と同じようにブラウザ上の表示を変えるに「style属性」を使います。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。
詳細についてはまたの機会に説明しますが、ここでは「div要素」と同じように、文字の色、背景を変える方法を簡単に説明します。

文字の色を変える、colorプロパティ

「span要素」は「div要素」と同じように文字の色を変えることができます。
「span要素」を使って文字の色を赤に変えるには、
<span style="color:#FF0000;">
もしくは、
<span style="color:red;">
と記述します。

　プロパティと値の詳しい説明は、「div要素」の説明の「文字の色を変える、colorプロパティ」をご覧ください。

背景色を変える、background-colorプロパティ

　「div要素」と同じように、「span要素」でも文字の背景色も変えることができます。
「span要素」を使って文字の背景色を赤に変えるには、
<span style="background-color:#FF0000;">
もしくは、
<span style="background-color:red;">
と記述します。

「div要素」と「span要素」の使い方の違い

　「div要素」と「span要素」はとてもよく似ている要素なのですが、使い方が異なります。
「div要素」は、長い文章を区切るために使い、「span要素」は短い文を区切るために使います。

　具体的に言うと、段落が入るかどうかです。「div要素」は「p要素」を中に入れることができますが、「p要素」は「span要素」を入れることができません。
さらに、「p要素」は「span要素」を中に入れることができますが、「span要素」は「p要素」を入れることができません。
また、「div要素」の中に「span要素」を入れることはできますが、「span要素」の中に「div要素」を入れることはできません。
ですので、中に「p要素」「span要素」が入るならば「div要素」を使い、「div要素」、「p要素」の中で使うのであれば、「span要素」を使うようにしましょう。

　なお、「div要素」の中に「div要素」は入れることができます。「span要素」の中に「span要素」を入れることもできます。

サンプル

　今回説明した、「div要素」「span要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<div style="color:white;background-color:black;">
<p>
	光の三原色と色の混合<br>
	<span style="background-color:#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;赤(red)&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
	<span style="background-color:#00FF00">&nbsp;&nbsp;&nbsp;緑(green)&nbsp;&nbsp;</span><br>
	<span style="background-color:#0000FF">&nbsp;&nbsp;&nbsp;&nbsp;青(blue)&nbsp;&nbsp;&nbsp;</span><br>
	<span style="color:black;background-color:#FFFF00">&nbsp;&nbsp;&nbsp;&nbsp;赤＋緑&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
	<span style="color:black;background-color:#FF00FF">&nbsp;&nbsp;&nbsp;&nbsp;赤＋青&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
	<span style="color:black;background-color:#00FFFF">&nbsp;&nbsp;&nbsp;&nbsp;緑＋青&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
	<span style="color:black;background-color:#FFFFFF">赤＋緑＋青</span><br>
</p>
</div>

表示結果

説明リスト「dl要素」

　国語辞典などで調べたい言葉を調べてみると、調べた言葉とその説明がのっています。
その前後にもまた言葉とその言葉の説明がのっています。
HTMLでこのような説明をしたリストを作るには、「dl要素」を使います。
<dl>と</dl>で囲んだ範囲が説明リストになります。

　この「dl要素」を使う上での注意点として、「dl要素」の直下には後に説明する「dt要素」と「dd要素」しか入れることができません。
この辺りは前回説明した「ol要素」「ul要素」によく似ています。

　ちなみに、「dl要素」の「dl」はdescription listの略で、説明や解説リストいう意味です。
また、HTML5以前はdefinition listの略で、定義リストという意味でした。

「dl要素」の中で説明する言葉「dt要素」と言葉の説明「dd要素」

　「dl要素」は、説明リストをつくるだけなので、説明する言葉とその説明も記述しなければなりません。
説明する言葉は「dt要素」、その言葉の説明は「dd要素」を使います。

<dt>と</dt>で囲んだ範囲が説明する言葉、<dd>と</dd>で囲んだ範囲がその言葉の説明になります。

　使い方は、まず「dl要素」を記述し、その中に「dt要素」で説明する言葉を指定し、「dd要素」でその言葉の説明をします。
「dt要素」と「dd要素」は１対１でなくてもかまいません。複数の「dt要素」の後に「dd要素」を使ってもよいですし（同じ意味の言葉がありますから）、一つの「dt要素」に複数の「dd要素」を使ってもよい（一つの言葉がいくつも意味を持っていたりしますから）のです。

　また、「dt要素」に「dfn要素」を入れると、「dt要素」で定義語を定義し、「dd要素」でその説明をすることができます。

　ちなみに、「dt要素」の「dt」はdefinition termの略で定義用語といった意味になります。
　「dd要素」の「dd」definition descriptionの略で定義の説明といった意味になります。

サンプル

　今回説明した、「dl要素」「dt要素」「dd要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<dl>
	<dt>日</dt>
	<dt>太陽</dt>
	<dd>太陽系の中心にある恒星のこと。</dd>
	<dt>月</dt>
	<dd>地球を中心に回っている衛星のこと。</dd>
	<dd>時間の単位の一つ。１年を１２分割したもの。</dd>
</dl>

表示結果

見出し「h1要素」～「h6要素」

　本や新聞などにはには見出しというタイトルがついています。
HTMLで見出しをつけるには、「h1要素」「h2要素」「h3要素」「h4要素」「h5要素」「h6要素」を使って表します。
<h1>と</h1>や<h6>と</h6>で囲んだ範囲のテキストが見出しになります。

　「h1要素」～「h6要素」まで６つの要素がありますが、この数字は見出しのランクです。
ほとんどのブラウザでは「h1要素」が一番大きな文字になり、「h6要素」が一番小さな文字になります。

　なお、「h1要素」～「h6要素」は見出しを意味する要素ですので、ただ単に文字を大きくするだけにこの要素を使ってはいけません。

　ちなみに、「h1要素」の「h1」はheading level 1の略で見出しや表題の水準１という意味です。
もちろん、「h6要素」の「h6」はheading level 6の略です。

段落を表す「p要素」

　見出しの次は、文章を書いていきますが、その文章の一つの区切りとなるのが段落です。
HTMLで段落を表すには、「p要素」を使います。
<p>と</p>で囲んだ範囲のテキストが段落ということになります。

　なお、この「p要素」ですが、</p>(終了タグ)を省略することができます。
次に「p要素」があれば、それが次の段落なのが明らかですし、「p要素」の次に「h1要素」等の見出しが来れば、その段落がそこで終了するのも明らかだからです。
ただし、段落の範囲を明確にするためにも</p>(終了タグ)は書いたほうがよいでしょう。

　ちなみに、「p要素」の「p」はparagrahpの頭文字で、段落という意味があります。

サンプル

　今回説明した、「h1要素」～「h6要素」、「p要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<h1>これは「h１要素」の見出しです</h1>
<p>
	ここに「h1要素」の見出しの内容などを書いていきます。
</p>
<h2>これは「h2要素」の見出しです</h2>
<p>
	ここに「h2要素」の見出しの内容などを書いていきます。	
</p>
<h3>これは「h3要素」の見出しです</h3>
<p>
	ここに「h3要素」の見出しの内容などを書いていきます。
</p>
<h4>これは「h4要素」の見出しです</h4>
<p>
	ここに「h4要素」の見出しの内容などを書いていきます。
</p>
<h5>これは「h5要素」の見出しです</h5>
<p>
	ここに「h5要素」の見出しの内容などを書いていきます。
</p>
<h6>これは「h6要素」の見出しです</h6>
<p>
	ここに「h6要素」の見出しの内容などを書いていきます。
</p>

表示結果

ソースコードにメモなどを残すコメント

　わかりにくいソースコードや、他の人にわかりやすいHTMLソースを書くなど、ブラウザには表示されない文章を残したいことがあります。
HTMLにはブラウザ上には表示されないコメントという仕組みがあります。
<!-- と -->で囲んだ範囲のテキストがコメントとなってブラウザ上には表示されません。
ただし、ブラウザ上からソースの表示を行えばソース上にはきちんとコメントが残っていますので、第三者から見られると困るような情報は入れないように気を付けてください。

　ブラウザ上に表示されなくなるので、閲覧者がソースを見たときにだけ見えるような秘密のメッセージを残すような使い方もできますね。

コメントの中にHTML要素が入っていてもOK

　コメントの中に、HTML要素が入っていても、コメントの中のHTML要素は表示されません。
HTML文章を書くときに、消してしまおうかと思った文章をコメントにすれば、簡単に元に戻せるようになります。

　ただし、コメントの中にさらにコメントを入れることはできません。
<!-- <!-- --> -->といった書き方はできませんので気を付けてください。

サンプル

　今回説明した、コメントを使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<strong>ここからソースにコメントを書いています。</strong><br>
<!--
<strong>これはコメントです。ブラウザ上には表示されません。<br>
ソースを見たときにはこのコメントは見えます。</strong>
-->
<strong>ここまでソースにコメントを書いています。コメントはブラウザには表示されていませんね？</strong>

表示結果