4.プチ☆カスタマイズ

HTML編集画面を使って、簡単な枠をつける方法を「HTMLのお勉強・枠をつける」で紹介していますが、 このページでは、枠にタイトルがついたパターンをご紹介します。

↓こんな感じ。

枠内で改行したい場合は、Shiftを押しながら改行してください。<br>タグが挿入されます。

※Shiftを押さないと、<p></p>タグになり、枠が２つできちゃったりしますのでご注意を。

1）細かい点線の枠に入れる

↓下記をコピー＆ペースト

<fieldset style="border: 1px dotted #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

2）実線の枠に入れる

↓下記をコピー＆ペースト

<fieldset style="border: 1px solid #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

3）点線の枠に入れる

↓下記をコピー＆ペースト

<fieldset style="border: 1px dashed #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

4）二重線の枠に入れる

↓下記をコピー＆ペースト

<fieldset style="border: 5px double #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

進化形）タイトル部分に背景色を入れる

↓下記をコピー＆ペースト

<fieldset style="border: 1px double #000; padding: 10px;"><legend style="background-color: #FF0099; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>

※ピンク色は、#FF0099 部分です。他の色に変えたい場合は、このカラーコードを変更します。

「細かい点線枠（角丸つき） - 濃い背景色付き・文字色変更 」を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。

例）「細かい点線枠 」のHTMLソース

<fieldset style="border: 1px dotted #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

padding: 10px;
→　paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。

　　数値の大小で、余白の幅が変更できます。

border: 1px dotted #000000;
→　borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#000000となります。

　　線の太さは、数字の大小で変更します。
　　線の種類は、丸い点線が「dotted」、波線が「dashed」、直線が「solid」、二重線が「double」です。

　　線の色の指定は、こちらのページをご参考ください。

このタグは、通常<form>というタグと一緒に使いますが、ここでは気にしなくて結構です。

ただ、<legend>タグは必ず<fieldset>と一緒に使います。

<fieldset>〜</fieldset>はグループ化するタグです。ここに上記で説明している枠線や余白を設定しています。

このタグの中に<legend>タイトル</legend>を入れると枠の左上部分に表示されます。

ちなみにこの「legend（レジェンド）」。“伝説の”という意味の印象が強いですが、この他に「銘・凡例・説明文」という意味もあるそう。