文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
HTML文書を使った ホームページやブログなどのウェブサイトにでは、文章や文字、画像を枠で囲んで表示することができます。このとき、囲む枠の太さ、色、種類などをまとめて指定することができます。
<タグ名 style="border:枠の太さ 枠の色 枠の種類">～</タグ名>
- タグ名：P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
- 枠の太さ：ピクセル指定が一般的ですが、下記の絶対サイズ、相対サイズおよびキーワードから指定できます。
絶対サイズ 意味 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 中央が凸の立体枠
サンプルです。
段落文章を枠で囲みます。ここでは扱いませんが、
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。
このソースは次のようになります。
<div style="border:10px lime inset;">
段落文章を枠で囲みます。ここでは扱いませんが、<br>
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。
</div>
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス