HTMLの基礎の基礎05

作成日：2026-04-16

【24】罫線（けいせん）

• 直線です。横一線です。
• このページで言うと【24】罫線（けいせん）の上にある横線がそれです。
• ただしこのページで使用してる罫線はcssを使って変更しています。
• <hr> ←これです。単体で使います。

<html>
<body>

<br>
<p>今回のお話はここまでです。</p>
<br>

<hr>
<p>次回は散歩した時に出会った風景を数枚の写真付きで紹介してみたいと思います。</p>
<br>

</body>
</html>

【25】コピペして使えるCSS 枠線で囲む（自作クラス要素）

• 下記は自作クラスのcssですが、シンプルで使い勝手はいいと思います。
• 最大幅800pxの枠を作って、細さ1px、#999（カラーコード）の色の実線で囲み、その外側1emと内側1emに空白を確保するという自作の「クラス要素」です。
• 文字の説明だけではわかりにくいかもしれませんが、下記の実際に適用した実例を見比べてもらえるとわかりやすいと思います。

.kakomu
	{
	max-width: 800px;
	padding: 1em;
	margin: 1em;
	border: 1px solid #999;
	}

• 上記をcssファイルへコピペして保存します。

【26】css（自作クラス要素）をhtmlで使う。

• htmlファイル内には下記のように書きます。


• <div class="kakomu"></div>


• div～/div間に書きたい内容を書きます。

<html>
<body>

<div class="kakomu">
	<p>昨日は近所のスーパーへ買物に行きました。</p>
	<p>いつものように魚肉ソーセージを、まとめ買いしてきました。</p>
	<p>オリーブオイルが残り少なかった。</p>
	<p>帰宅してから気付きました。</p>
	<p>買物へ行く前にちゃんとチェックしておくべきでした。</p>
</div>

</body>
</html>

• 改行を入れて、見やすくしています。
• 後から内容修正することもあるので、見やすくしておいた方が便利です。
• pの前の空白はTABキーで作っています。
• divの中の内容だということがひと目でわかるように、TABを入れて1段下げています。
• TABは実際のホームページの見た目に影響は出ません。

• 枠線もkakomuで設定・指定され表示されています。border: 1px solid #999; ←この部分ですね。
• そしてこの枠線の内側（上下左右）に1文字分の空白スペースがあって、その中に文章が収まっています。（padding）
• この枠線の外側（上下左右）にも1文字分のスペースがあって、上下の文字にくっつきすぎず、左右も1em分の距離があいています。（margin）
• #999 はカラーコード。本来は6文字ですが、#999999と#999は同じ色です。
• カラーコードの99などの繰り返しの場合は1文字でも大丈夫です。例：#ffffffは、#fff、#000000は、#000です。

【今回はここまでです】

「罫線」「css（自作クラス要素）」「css（自作クラス要素）をhtmlで使う」を解説しました。

cssで設定した要素をhtmlで使う方法を実例をあげて解説しました。

次回は「marginとpadding」「分割レイアウトを作る」「レイアウトパターン2種」を解説します。

これでかなりホームページらしい形が実現できるようになると思います。