1.『見出しタイトルなし』の囲み枠コード

まずは、基本となる見出しタイトルなしで囲み枠をつくるコードを紹介します。

<fieldset>タグを使う

<fieldset>タグの本来の目的は、
フォームの入力項目をグループ化することなのですが、
文字を囲む際にも使えます。

<fieldset>囲みの中の文章</fieldset>

<div style>タグを使う

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

<span style>タグを使う

囲みの中の文章

上の囲み枠は、こちらのコードで作成できます。

<span style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</span>

デザイン編集

ここからは、囲み枠のデザイン編集を行っていきます。

今回紹介するデザイン編集方法は、以下のとおりです。

• 枠線の太さを変更
• 枠線の色を変更
• 枠線のデザインを変更
• 囲み枠内の背景色を変更
• 囲み枠と文章の余白、幅を変更
• 囲み枠の角に丸みを持たせる

枠線の太さを変更

『border: 1px solid #cccccc;』の1pxと書かれている場所を
【1px⇒10px】に変更してみます。
すると次のように枠の太さを変更できます。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

枠線の色を変更

『border: 10px solid #cccccc;』の#ccccccと書かれている場所を
【#cccccc⇒#0000ff】に変更してみます。
すると次のように枠の色を変更できます。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #ffffff;">囲みの中の文章</div>

色のコードに関しては、WEB色見本 原色大辞典 – HTMLカラーコードを参照してください。

枠線のデザインを変更

二重線

『border: 10px solid #cccccc;』のsolidと書かれている場所を
【solid⇒double】に変更してみます。
すると次のように囲み枠のデザインを変更できます。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px double #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

二重線以外にも次のようなデザインが有ります。

破線

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px dashed #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

点線

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px dotted #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

立体的に窪んだ線

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px groove #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

立体的に隆起した線

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px ridge #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

左と上が濃い

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px inset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

右と下が濃い

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px outset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

囲み枠内の背景色を変更

『background: #ffffff;』の#ffffffと書かれている場所を
【#ffffff⇒#bbe2f1】に変更してみます。
すると次のように囲み枠の背景色を変更できます。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #bbe2f1;">囲みの中の文章</div>

囲み枠と文章の余白、幅を変更

『padding: 10px;』の10pxと書かれている場所を
【10px⇒30px 60px】に変更します。
すると次のように囲み枠と文章との幅を変更できます。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 30px 60px; background: #bbe2f1;">囲みの中の文章</div>

なお、paddingの指定方法は、次のようになっています。

囲み枠の角に丸みを持たせる

【border-radius: 10px;】をコードに追加記述します。
すると角の丸まった囲み枠が完成します。

上の囲み枠は、こちらのコードで作成できます。

<div style="border: 10px solid #0000ff; padding: 10px; background: #bbe2f1; border-radius: 10px;">囲みの中の文章</div>

2.『見出しタイトル有り』の囲みコード

次に、見出しタイトルつきの囲み枠コードを紹介していきます。

<fieldset>タグ<legend>タグを使う

<fieldset>タグ<legend>タグには、それぞれ次のような枠割があります。

• <fieldset>タグ：フォームの入力項目をグループ化する
• <legend>タグ：グループにタイトルを付ける

この方法で作った見出し付きの囲みがこちらです。

<fieldset><legend>見出しタイトル</legend>囲みの中の文章</fieldset>

<div style>タグを組み合わせる

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="padding: 5px 10px; color: #ffffff; background: #7fff00;">見出し文字</div>
<div style="padding: 10px; border: 1px solid #7fff00; background: #ffffff;">囲みの中の文章</div>

角を丸めてみる

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="padding: 5px 10px; color: #ffffff; background: #ffc0cb; border-radius: 10px 10px 0 0;">見出しタイトル</div>
<div style="padding: 10px; border: 1px solid #ffc0cb; background: #ffffff; border-radius: 0 0 10px 10px;">囲みの中の文章</div>

<span style>タグと<div style>タグを組み合わせる

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div><span style="padding: 6px 10px; color: #ffffff; font-weight: bold; background: #000066;">見出しタイトル</span></div>
<div style="padding: 10px; border: 1px solid #000066; font-size: 0.9em; margin-top: 2px;">囲みの中の文章</div>

角を丸めてみる

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div><span style="background: #ff8c00; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
<div style="padding: 10px; border-radius: 5px; border: 2px solid #ff8c00;">囲み内の文章</div>

角を丸めてみる２

上の見出しタイトル付き囲み枠は、こちらのコードで作成できます。

<div style="height: 12px;"><span style="background: #f08080; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #f08080;">囲み内の文章</div>

3.WordPressで枠線を作る手順

では、ここからはWordPressブログに枠線を作る手順を紹介していきます。

まず、WordPress管理画面の左メニューより、『投稿→新規追加』をクリックします。

『テキスト』をクリックし、枠線を作るコードを貼り付けます。
今回は、こちらのコードを使用します。

<div style="height: 12px;"><span style="background: #f08080; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
< div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #f08080;">囲み内の文章</div>

『ビジュアル』をクリックして表示を確認します。
この際に、表示が崩れている事がありますが、そのまま『公開』をクリックしてください。

すると、表示崩れが治っています。

その他の参考になるサイト

https://business087.com/frame/

https://naifix.com/css-box-design/