文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する

HTML文書を使った ホームページやブログなどのウェブサイトにでは、文章や文字、画像を枠で囲んで表示することができます。このとき、囲む枠の太さ、色、種類などをまとめて指定することができます。

<タグ名 style="border:枠の太さ 枠の色 枠の種類">～</タグ名>
  1. タグ名：P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
  2. 枠の太さ：ピクセル指定が一般的ですが、下記の絶対サイズ、相対サイズおよびキーワードから指定できます。
    絶対サイズ意味
    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 中程度の太さの線
    ※正確にはデバイス依存の相対サイズ
  3. 枠の色：『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。
  4. 枠の種類：下記の種類から選べます。

     

    枠線の種類説明サンプル
    none なし
    hidden なし
    dotted 丸い点線
    dashed 四角い点線
    solid 実線
    枠線の種類説明サンプル
    double 二重線
    groove 凹んだような立体枠
    ridge 尖ったような立体枠
    inset 中央が凹の立体枠
    outset 中央が凸の立体枠
Code:
<div style="border:10px lime inset;">
段落文章を枠で囲みます。ここでは扱いませんが、<br>
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。
</div>