コンテンツにスキップ

Top

HTMLで枠線を書く

HTMLで枠線を書く方法を述べる。また、枠線に見出しを付ける方法についても述べる。

HTMLで枠線の描き方

以下の用に記述すると、枠線がかかる。

<div style="border: solid 1px #000000; padding: 10px; margin-bottom: 10px;">
うんこ
</div>
うんこ

点線(dotted)

<div style="border: dotted 1px #000000; padding: 10px; margin-bottom: 10px;">
うんこ
</div>
うんこ

破線(dashed)

<div style="border: dashed 1px #000000; padding: 10px; margin-bottom: 10px;">
うんこ
</div>
うんこ

破線(double)

<div style="border: double 2px #000000; padding: 10px; margin-bottom: 10px;">
うんこ
</div>
うんこ

HTMLで枠線を描き、背景色を付ける方法

background-colorを記述すると、枠線の背景に色がつく。

<div style="border: solid 1px #000000; padding: 10px; margin-bottom: 10px; background-color: #800000;">
うんこ
</div>
うんこ

HTMLで枠線を描き、見出しを付ける方法

見出しを付けるには、legendタグを用いる。が、ただ用いてもダメでfieldsetタグで枠線と関連付けなければならない。

<fieldset style="border: 1px solid #000000; padding: 10px; margin-bottom: 10px;">
<legend>タイトル</legend>うんこ</fieldset>
タイトルうんこ

以上。