HTMLのお勉強・タイトル付き枠をつくる

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


↓こんな感じ。

タイトル付き枠ここに文字を入力する。

タイトル付き枠をつくる

【変更方法】

1)HTMLが編集できる画面(HTMLソースエディタ)に切り替えます。

2)下記のHTMLソースを“コピペ”して使ってください。

 

 

【枠内で改行したい方へ】

枠内で改行したい場合は、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>



HTMLソース解説(CSSによる指定)

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



例)「細かい点線枠 」の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」です。

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


<fieldset> <legend>タグについて

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

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

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

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


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