HTML | テキストに枠線を付ける

HTML,HTML テキスト

HTMLだけでテキストに枠線を付けるサンプルコードを紹介しています。

HTMLだけでテキストに枠線を付ける

HTMLだけテキストに枠線を付けるには「style属性」にて「border」プロパティを指定します。

<p style="border:solid 1px #000">border:solid 1px #000</p>

border:solid 1px #000

「borderプロパティ」「形状」「太さ」「色」をまとめて指定する事が可能です。

「形状」「dashed(破線)」「dotted(点線)」「double(2重線)」などが指定可能です。

「borderプロパティ」は一括指定ですが「border-top(上)」「border-bottom(下)」「border-left(左)」「border-right(右)」での指定、「border-style(形状)」「border-width(サイズ)」「border-color(色)」などの指定も可能です。

例えば、左辺にのみ枠線を付けた場合は以下のようになります。

<p style="border-left:solid 5px #000">border-left:solid 5px #000</p>

border-left:solid 2px #000

また、四方の枠線を一括指定したあとに、別途指定する事ができます。
例えば下辺の色のみ「border-bottom-color」で再指定する場合、以下のようHTMLになります。

<p style="border:solid 2px #000;border-bottom-color:#00FFF">border:solid 2px #000;border-bottom-color:#00FFF</p>

border:solid 2px #000;border-bottom-color:#00FFFF

HTML,HTML テキスト

Posted by Yousuke.U