Blog作成に便利な 文字を枠線で囲んで装飾する初歩タグです。細かい説明抜きで必要事項を まとめてみました。
文字を枠線で囲むサンプル
<p style="border: 2px solid #4f97c8; color: #2d75a6; font-weight: bold; padding: 10px;">
段落を枠線で囲むサンプル
<div style="border: 1px solid #999999; padding: 8px; width: 95%;">
文字ブロックを枠線で囲むサンプル
<span style="border: 1px solid #76933c; color: #65822b; font-weight: bold; padding: 8px;">
文字を枠線で囲むサンプル
囲むタグの種類
- 段落： <p>
- 文字ブロック (改行あり)：<div>
- 文字 (改行なし)：<span>
style属性の指定 style=" "
- 枠線の太さ，線種，色などを指定：border
- 文字の色を指定：color
- 文字の太さを指定：font-weight
9段階の太さを指定できるが，フォントによっては表示されないので，太字 bold 指定ぐらいがイイ。 - 枠線と文字の隙間を指定：padding
枠線の外側の空白の指定は，margin を使用する。 - 枠線の幅を指定：width
枠線の種類 border の指定値
(例) style="border: solid;"
- 実線：solid
- 破線：dashed
- 点線：dotted
- 二重線：double
- 非表示：none
枠線と文字の隙間 padding の指定方法
(値2つの例) style="padding: 10px 20px;"
- 値を1つ指定：指定した値が(上)(下)(左)(右)に適用。
- 値を2つ指定：1つ目の値が(上)(下)，2つ目の値が(左)(右)に適用。
- 値を3つ指定：1つ目の値が(上)，2つ目の値が(左)(右)，3つ目の値が(下)に適用。
- 値を4つ指定：1つ目の値が(上)，2つ目の値が(右)，3つ目の値が(下)，4つ目の値が(左)に適用。
