自由自在に枠を作ってみたい
特定の文字（段落）を様々な色や太さの枠で囲みたいと思ったことはありませんか？
「枠」というとtable要素を使う方法を思い浮かべる方もいらっしゃるでしょうが、ここではスタイルシートを用いて作る方法をご紹介致します。スタイルシートの方が、線種や太さなど様々な枠を自由自在に作れます。
※TABLEを駆使する方法は、過去の記事「縞模様の枠を作ろう！」などでご紹介しています。そちらもご参照下さい。
枠を作るプロパティ
ここで使うスタイルシートのプロパティは以下の3つです。
- border-width : 枠線の太さ
- border-color : 枠線の色
- border-style : 枠線の種類
これら3つの値を様々に指定することで、自由自在に枠線を描くことができます。
さて、では、試しに段落を枠で囲んでみましょう。
<p style="border-width: 5px; border-color: green; border-style: solid;"> 段落です。周囲に枠線が描かれていることが… </p>
このソースを表示させると、以下のように見えます。
段落です。周囲に枠線が描かれていることがお分かりになるでしょうか。
上記の例では、枠線の太さが「5ピクセル」（5px）、色が「緑色」（green）、種類が 「実線」（solid）となっています。 枠線と文章の間隔が詰まっていてちょっと読みにくく感じられるかもしれませんが、その点は後述の方法で見やすく調整できます。
このように、ピクセル単位で太さを指定でき、色も自由自在に指定できます。また、線の種類は4種類あり、実線のほかに点線などが使えます。
枠線の種類（border-styleの値）として指定できる名称は次の通りです。
|
|
上記はどれも、先ほどの例のように、
border-style: double; border-style: inset;
のように、border-styleプロパティに対する値として記述します。
枠の内側をデザインしたい
さて、枠はできましたが、枠の内側のデザインができていませんね。 やはり、内側もデザインしたい場合があるでしょう。そのような場合には、次のプロパティを加えます。
- background-color : 背景色（ここでは枠内の背景色になる）
- color : 文字色（ここでは枠内の文字色になる）
さて、先ほどの例に加えてみましょう。
<p style="border-width: 5px; border-color: green; border-style: solid;" background-color: #ccffcc; color: #0000cc;> 内側もデザインされている（背景色と文字色が… </p>
内側もデザインされている（背景色と文字色が付いている）ことがお分かりでしょう。
上記の例では、背景色に「淡い緑色」（#ccffcc）、文字色に「少し暗い青色」（#0000cc）を指定しています。このように、色を「色の英語名」ではなく16進数で表現することもできます。
枠線と中身との間隔を調整したい
さて、これで枠線とその中身のデザインはできてきました。 しかし、よく見ると、枠線とその中身との間隔がちょっと詰まっているようですね。次は、ここを調整してみましょう。
