【コピペOK】タイトル付きの囲み枠(BOX)のCSSを5個紹介！

こんにちは！
Rito(Rito)です！

見やすいブログって、枠線（BOX）が要所要所にありますよね。

今現在使っているwordpressテーマ「JIN」でもBOXのデザインは豊富にあります。

でも、ショートコードなんですよね。
ショートコードって便利なんですが、どうなんだろう？と思うところもありまして。

枠の上にタイトル

POINTこんな感じのBOXですよ。

コードを表示

HTML

<div class="titlebox1">
    <span class="box-title">タイトル</span>
    <p>ここに文章</p>
</div>

CSS

.titlebox1 {
	position: relative;
	margin: 0.5em auto;
	width: 90%;
	padding: .5em 1em;
	border: solid 3px #3F9877;
	border-radius: 5px;
}
.titlebox1 .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #FFF;
	color: #3F9877;
	font-weight: bold;
}
.titlebox1 p {
	margin: 0; 
	padding: 0;
}

ラベルにタイトル

ご注意ください注意喚起に使おうかな。
色を変えたい場合はCSSの#ffcc11を好きなものに変えてくださいね！

コードを表示

HTML

<div class="titlebox2">
    <span class="box-title">タイトル</span>
    <p>ここに文章</p>
</div>

CSS

.titlebox2 {
	position: relative;
	margin: 2em auto 2em;
	width: 95%;
	padding: 1.5em 1.2em;
	border: solid 3px #ffcc11;
}
.titlebox2 .box-title {
    position: absolute;
    display: inline-block;
    top: -35px;
    left: -3px;
    padding: 15px 15px;
    height: 35px;
    line-height: 5px;
    vertical-align: middle;
    font-size: 17px;
    background: #fc1;
    color: #fff;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
}
.titlebox2 p {
    margin: 0; 
    padding: 0;
}

上にタイトル

要点のまとめ

にんじん
じゃがいも
たまねぎ

こんな感じで使おうかな。

コードを表示

HTML

<div class="titlebox3">
    <div class="box-title">タイトル</div>
    <p>ここに文章</p>
</div>

CSS

.titlebox3 {
    margin: 0.5em auto 2em;
    width: 90%;
    border: solid #89C2F4;
    border-radius: 5px 5px 0 0;
}
.titlebox3 .box-title {
	font-size: 1.2em;
	background: #89c2F4;
	padding: 15px 5px;
	text-align: center;
	color: #fff;
	font-weight: 700;
	letter-spacing: .05em;
}
.titlebox3 p {
	padding: 15px 20px;
	margin: 0;
}

ラベルにタイトル

あわせて読みたい・知られざる謎生物「Ritoの正体」の正体を追った！！

コードを表示

HTML

<div class="titlebox4">
    <span class="box-title">タイトル</span>
    <p>ここに文章</p>
</div>

CSS

.titlebox4 {
    position: relative;
    margin: 0.5em auto 2em;
    width: 90%;
    padding: 1.5em 1.2em 1em;
    background: #EBF6F7;
}
.titlebox4 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 20px;
    padding: 15px 15px;
    height: 25px;
    line-height: 0px;
    vertical-align: middle;
    font-size: 17px;
    background: #57B3BA;
    color: #fff;
    font-weight: 700;
    border-radius: 3px 3px;
}
.titlebox4 p {
    margin: 0; 
    padding: 0;
}

黒板風

テストに出るポイント

710年…納豆ネバネバ！！
794年…うぐいす鳴く！！
894年…遣唐使終了！！

コードを表示

HTML

<div class="titlebox5">
<div class="box-title">タイトル</div>
<p>ここに文章</p>
</div>

CSS

.titlebox5 {
    position: relative;
    margin: 0.5em auto 2em;
    width: 90%;
    padding: 1.5em 0.2em 2em;
    background: #369377;
    color: #ffffff;
    border: solid #E3B66A 10px;
}
.titlebox5 .box-title {
    font-size: 1.2em;
    padding: 5px 5px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    letter-spacing: .05em;
}
.titlebox5 p {
    margin: 0; 
    padding: 0;
}