ウェブサイト作成にスタイルシートで枠線を引こう！

ウェブサイトを作成していて、
文字や段落、画像などに枠線があると
他との区別が出来て読みやすくなりますよね。

そのような、文字などに枠線を引きたいときの
プロパティを紹介します。

これはいろいろなHTMLタグに使えるので便利です。

枠線のスタイル

・border-style（枠線のスタイル）
値：none（線なし）、solid（実線）、dotted（点線）、
　　dashed（破線）、double（二重線）、inset（内側が凹形）、
　　outset（内側が凸形）、groove（立体的に窪んだ線）、
　　ridge（立体的に隆起した線）

・border-color（枠線の色）
値：カラーネームやカラーコードによる色指定

・border-width（枠線の太さ）
値：px、em などで指定

まとめて指定する場合

・border（ボーダーのスタイル・色・太さをまとめて指定）
例：<font style=”border:solid green 1px;”>文字</font>
上記例のように各項目の間に半角スペースをいれ、
最後にセミコロン（;）を入れます。

枠線の上下左右を変更

border-style、border-color、border-widthでは
値の指定方法で、枠線の上下左右を変えることも出来ます。

値が1つの場合：[上下左右]
値が2つの場合：記述順に[上下][左右]
値が3つの場合：記述順に[上][左右][下]
値が4つの場合：記述順に[上][右][下][左]

＜記述例＞

<span style="border:3px solid; border-color:red blue green yellow;">
  カラフルな枠線
</span>

＜表示例＞

カラフルな枠線

枠線の上下左右を個別指定

また、枠線の上下左右を個別指定するには、以下の設定をします。

・border-top（枠線上の指定）
・border-bottom（枠線下の指定）
・border-left（枠線左の指定）
・border-right（枠線右の指定）

＜記述例＞

<p style="border-bottom:solid 2px navy; border-left:solid 10px blue;">
  タイトル
</p>

＜表示例＞

タイトル

枠線で囲まれたテキストのサンプル

枠線で囲まれたテキストのサンプルとして、
具体的な例を紹介していきます。

これは、何かを紹介するときに分かりやすいように
枠線で囲み目立たせるために使います。

３つの例を紹介します。

例１：

＜記述例＞

<div style="border: solid 1px blue;
padding: 6px;
background-color: beige;
text-align: left;
width:300px;">
枠線が青い１ピクセルの実線<br>
文字と枠線との余白6ピクセル<br>
背景がベージュ<br>
左寄せ文字<br>
幅300ピクセル<br>
</div>

＜表示例＞

枠線が青い１ピクセルの実線
文字と枠線との余白6ピクセル
背景がベージュ
左寄せ文字
幅300ピクセル

例２：

＜記述例＞

<div style="border: 1px dotted green;
padding: 10px;
margin-bottom: 10px;
text-align: left;
width:300px;">
枠線が緑の１ピクセルの点線<br>
文字と枠線との余白10ピクセル<br>
枠線下の外側余白10ピクセル<br>
左寄せ文字<br>
幅300ピクセル<br>
</div>

＜表示例＞

枠線が緑の１ピクセルの点線
文字と枠線との余白10ピクセル
枠線下の外側余白10ピクセル
左寄せ文字
幅300ピクセル

また、箇条書きリストを枠で囲むことも出来ます。

例３：

＜記述例＞

<div style="border: dotted 2px red;
padding: 6px;
background-color: lavenderblush;
text-align: left;
line-height: 175%;
width:300px;">
<ul>
<li>枠線が赤い２ピクセルの点線</li>
<li>文字と枠線との余白6ピクセル</li>
<li>背景色がラベンダー･ブラシ</li>
<li>左寄せ文字</li>
<li>行の高さ175％(行間75％)</li>
<li>幅300ピクセル</li>
</ul>
</div>

＜表示例＞