段落文章を囲む枠の太さ、色、種類をまとめて指定する
段落文章を囲む枠の太さ、色、種類は、style指定でまとめて指示することができます。
<div style="border:枠の太さ 全体の色 全体の形状">～</div>
というふうに、スペースで区切って指定内容を併記します。<p>タグや、他のブロックタグでもＯＫです。
- 枠の太さ （→詳しくはこちら）
下記の絶対サイズ、相対サイズおよびキーワードから指定します。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| キーワード | 枠の太さ |
| thin | 細線 |
| thick | 太線 |
| medium | 中程度の太さの線 |
※正確にはデバイス依存の相対サイズ
- 全体の色 （→詳しくはこちら）
『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。 - 全体の種類 （→詳しくはこちら）
下記のキーワードから選べます。
| キーワード | 説明 | サンプル |
| none | なし | |
| hidden | なし | |
| dotted | 丸い点線 | |
| dashed | 四角い点線 | |
| solid | 実線 |
| キーワード | 説明 | サンプル |
| double | 二重線 | |
| groove | 凹んだような立体枠 | |
| ridge | 尖ったような立体枠 | |
| inset | 中央が凹のような立体枠 | |
| outset | 中央が凸のような立体枠 |
太さ、色、種類の 3つの要素は、必ずしもすべて記述しなくても構いません。
<div style="border:5px">～</div>
<div style="border:5px red">～</div>
というふうに 太さだけ、太さと色だけ 指定して、あとはブラウザにお任せなどということもできます。ただし今回はサンプルなので、3つの要素をすべて指定してみます。
|
段落文章を枠で囲みます。ここでは扱いませんが、
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。 |
このソースは次のようになります。
<div style="border:10px lime inset;">
段落文章を枠で囲みます。ここでは扱いませんが、<br>
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。</div>
ソース中赤字部分で、枠の太さを 10ピクセル、色をライム色に、種類を insetに指定しています。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
