【HTML】囲み枠・タイトル付き囲み枠をつける

今回は、前回の記事で触れた、文章に囲み枠をつけるためのHTMLについて説明します。

囲み枠だけ加える

単純に文章の周りを囲む枠をつけるHTMLは以下のようになります。

このコードが実際に表示されると下のようになります。

「rgb(255, 0, 0)」はRGB値で示す枠線の色、「solid」は実線、「1px」は線の太さ、「font-size:」は文字サイズ（100%なら地の文と同じ大きさ）、「padding:」は本文と枠線との間の余白の大きさを示しています。したがってRGB値を変えれば好きな枠の色に変更できますし、「solid」を「dotted」に変えれば点線に、「dashed」に変えれば破線になります。また、「double」にすれば二重線になりますが、その場合は線の太さを4pxくらいにする必要があります（1pxの太さ内に二重線が収まらず二重線として表示されないため）。「double」にしたのに二重線にならない、という場合は、太さの設定を確認してみましょう。

タイトル付き囲み枠を加える

囲み枠にタイトルをつけることもできます。その場合のHTMLは以下のようになります。

このコードが実際に表示されると下のようになります。

コードの1行目から5行目までがタイトル部分の定義、6行目以降が本文部分の定義で、本分部分の定義は、囲み枠だけの場合のコードと同じです。タイトル部分のコードは、「background:」の後のRGB値がタイトルの背景部分の色、「border:」の後がタイトル部分を囲む線のタイプ、太さ、色を定義しています。「padding-left:」はタイトル文字の左側の余白の大きさを定義しています。2行目の「color: white;」はタイトルの文字色、「font-size: 100%;」はタイトルの文字サイズの定義です。「color: black;」にすればタイトル文字が黒になりますし、「font-size: 200%;」にすればタイトル文字の大きさが地の文の2倍になります。

囲み枠内に背景色をつける

囲み枠内の背景色を枠外の背景色と別の色にすることもできます。

このコードが実際に表示されると下のようになります。

囲み枠が赤色、枠の内側の背景色がピンク色になっています（わかりやすくするため、今回は枠線の太さを3pxにしてあります）。コードの中の「background-color:」の後のRGB値が枠内の背景色を定義しています。この定義を省略したのが上の2つの例で、その場合は、枠内も地の背景色と同じ色になるわけです。

他にも細かい設定はいろいろとできると思いますが、必要以上にデザインにこだわっても仕方ないですし、上記の内容がわかっていれば十分かと思います。なお、今回の説明は簡略化のため枠内はテキストだけにしてありますが、実際にはテキストだけでなく画像なども含むことができます（前回記事参照）。