4.プチ☆カスタマイズ
枠内で改行したい場合は、Shiftを押しながら改行してください。<br>タグが挿入されます。
※Shiftを押さないと、<p></p>タグになり、枠が2つできちゃったりしますのでご注意を。
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(レジェンド)」。“伝説の”という意味の印象が強いですが、この他に「銘・凡例・説明文」という意味もあるそう。