タイトル付き囲み枠ー title-box ーのCSS作成とHTML

タイトル付きの囲み枠にもいろいろと種類があります。

囲み枠の部分にタイトルを入れたり、枠の内側へ入れたり
または、Font Awesomeなどのアイコンを付けたタイトル表示など
タイトルの位置文字のサイズなどで表情が変わります。

ここでは基本的なタイトル付きの囲み枠のＣＳＳ作成とHTMLコードの記述についてまとめていきます。

Contents - 目次 -

1. タイトル付きの囲み枠と注意喚起
- 1.1. タイトル付き囲み枠
- 1.2. 注意喚起の囲み枠ー cautionbox ー
2. 囲み枠のカスタマイズ
- 2.1. アイコン
3. HTMLコードの記述

タイトル付きの囲み枠と注意喚起

基本の囲み枠にタイトルを付けた時のイメージとタイトル部分の位置などで囲み枠のイメージが変わります。

ここでは基本のタイトル付き囲み枠と注意喚起の囲み枠の２タイプを紹介します。

タイトル付き囲み枠

囲み枠にタイトルを付けたい時にはこのコードを使用します。

このタイトル部分には BOXに指定した " 囲み枠の線を消す " ために background を白か同色を指定します。

この応用で枠の内側にタイトルを付けることもできますね。

/*タイトル付きBOX-囲み枠のCSS*/
.title-box1{
border: 5px solid #a3d6cc;
position: relative;
margin: 1.5em 0.5em;
padding: 1em 1em 0em 1em;
}

/*タイトル付きBOX-タイトルのCSS*/
.title-box1-title{
position: absolute;
top: -1em;
left:1em;
padding:0em 0.3em;
color: #003366;
font-size: 1.2em;
font-weight: bold;
background: #ffffff; 
}

/*タイトル付きBOX-余白の調整*/
.title-box1 p{
padding:0;
line-height:1.5;
}

/*タイトル付きBOX-囲み枠のCSS*/

.title-box1{

border: 5px solid #a3d6cc;

position: relative;

margin: 1.5em 0.5em;

padding: 1em 1em 0em 1em;

}

/*タイトル付きBOX-タイトルのCSS*/

.title-box1-title{

position: absolute;

top: -1em;

left:1em;

padding:0em 0.3em;

color: #003366;

font-size: 1.2em;

font-weight: bold;

background: #ffffff;

}

/*タイトル付きBOX-余白の調整*/

.title-box1 p{

padding:0;

line-height:1.5;

}

注意喚起の囲み枠ー cautionbox ー

注意喚起は文字通り、注意を引くようなイメージで作成します。

/*注意喚起ボックス-CSS*/
.cautionbox{
background-color: #ffdab9;
display:inline-block;
margin: 1em 0;
padding: 1em;
}

/*注意喚起ボックス-タイトルのCSS*/
.cautionbox-title{
color: #f76060;
font-size: 1.2em;
font-weight: bold;
margin-top:-0.5em;
}

/*注意喚起ボックス-アイコンの設定*/
.cautionbox-title:before{
font-family: FontAwesome;
content: "\f06a";
font-size: 25px;
margin-right: 10px;
}

/*注意喚起ボックス-文字と余白の設定*/
.cautionbox p{
margin: 0;
padding: 0 1em;
line-height:1.8;
}

/*注意喚起ボックス-CSS*/

.cautionbox{

background-color: #ffdab9;

display:inline-block;

margin: 1em 0;

padding: 1em;

}

/*注意喚起ボックス-タイトルのCSS*/

.cautionbox-title{

color: #f76060;

font-size: 1.2em;

font-weight: bold;

margin-top:-0.5em;

}

/*注意喚起ボックス-アイコンの設定*/

.cautionbox-title:before{

font-family: FontAwesome;

content: "\f06a";

font-size: 25px;

margin-right: 10px;

}

/*注意喚起ボックス-文字と余白の設定*/

.cautionbox p{

margin: 0;

padding: 0 1em;

line-height:1.8;

}

囲み枠のカスタマイズ

基本的な枠のカスタマイズや枠に丸みを付けるなどのカスタマイズはこちらの記事で紹介しています。

基本的な囲み枠の使いかたはこちら↓
【囲み枠 – BOX】CSSコードとHTMLの記述のしかた -基礎 –

枠に丸みを付けたい時に使用するCSS
見出しや囲み枠の角に丸みを付けたいときに使うCSS【 border-radius 】

ラインのデザインの参考にして頂きたい！
見出しをデザイン！CSSカスタマイズの基本｜縦ラインを無くしたり簡単なコードでのライン作成！

アイコン

注意喚起に使用するアイコンには、FontAwesome（フォントオーサム）などを使用しますが
使用するアイコンによってプラグインのインストールや FontAwesomeのダウンロードが必要になります。

Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】

HTMLコードの記述

タイトル付きの囲み枠・注意喚起の囲み枠のHTMLコードを投稿画面で記述します。

それぞれ作成したCSSに合わせて数字部分を変えてお使いください。

/*タイトル付きの囲み枠-HTML*/
<div class="title-box1">
<div class="title-box1-title">タイトル名</div>
<p>ここにテキスト</p>
</div>


/*注意喚起の囲み枠-HTML*/
<div class="cautionbox">
<div class="cautionbox-title">注意</div>
<p>ここにテキスト</p>
</div>