コピペで使える！ビジネスブログ向けの囲み枠デザイン20選

2022.08.26

今回はオウンドメディアサイトなどで活用できる、囲み枠（ボックスデザイン）をご紹介したいと思います。
HTML+CSSだけで構成していますので、コピペですぐに使えます！
背景色（background）、線（border）の太さや色、枠と本文の間隔（padding）を調整して、ご自身のサイトに合った雰囲気にカスタマイズすることも可能です。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

[nop]

シンプルな囲み枠

枠線だけのシンプルなボックス。線（border）の太さを変えれば、スタイリッシュにもカジュアルにもなります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_01 {
	border: solid 2px #27acd9;
	padding: 1em;
	}

点線のボックス。実線よりもカジュアルな印象になります。線（border）の太さを変えるだけでもまた違った雰囲気に。

コードを表示

HTML

ここに文章を入れる

CSS

.box_02 {
	border: dashed 3px #27acd9;
	padding: 1em;
	}

二重線と角丸にしたボックス。角の丸み（border-radius）の数値を大きくするほど、より柔らかな印象になります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_03 {
	border: double 4px #27acd9;
	border-radius: 10px;
	padding: 1em;
	}

背景に色を入れたボックス。背景に濃い色を設定する場合は、文字色を白にすれば読みやすくより強調されます。

コードを表示

HTML

ここに文章を入れる

CSS

.box_04 {
	background: #eaf5f9;
	padding: 1em;
	}

背景と枠線を組み合わせたボックス。これまでの枠線（border）のCSSを参考して、実線（solid）・二重線（double）などに変えて様々なスタイルにカスタマイズできます。

コードを表示

HTML

ここに文章を入れる

CSS

.box_05 {
	background: #eaf5f9;
	border: dotted 2px #27acd9;
	padding: 1em;
	}

2種類の要素を組み合わせて作ったボックス。少しの工夫でデザイン性が格段にアップしますね。

コードを表示

HTML


ここに文章を入れる

CSS

.box_06 {
	border: solid 1px #27acd9;
	padding: 0;
	}
.box_06_txt {
	border: solid 10px #eaf5f9;
	padding: 1em;
	margin: 0;
	}

立体的な囲み枠

シンプルに影を付けた立体的なボックス。右下にふんわりシャドウを付けることで、少し浮いたように見せています。

コードを表示

HTML

ここに文章を入れる

CSS

.box_07 {
	border: solid 1px #27acd9;
	box-shadow: 2px 5px 5px #eeeeee;
	padding: 1em;
	}

グラデーションを使ったボックス。背景をワントーンのグラデーションにすることで、立体感を出しました。下部を暗い色にすることがポイント！自然な立体感を表現することが可能です。

コードを表示

HTML

ここに文章を入れる

CSS

.box_08 {
	background: linear-gradient(
    to top,
    #d8d8d8 0%,
    #eeeeee 30%,
    #f8f8f8 100%
  );
	border-radius: 10px;
	padding: 1em;
	}

下側に線を入れて立体感を出したボックス。分厚いボード風になりました。カジュアルなサイトでのご使用がおすすめです。

コードを表示

HTML

ここに文章を入れる

CSS

.box_09 {
	color: #fff;
	background: #27acd9;
	border-bottom: solid 8px #0f8fbb;
	border-radius: 10px;
	padding: 1em;
	}

デザイン性のある囲み枠

吹き出しデザインの囲み枠。文章とは別にワンポイントのアドバイスなど、少しくだけたコメントを載せるのにもおすすめです。

コードを表示

HTML

ここに文章を入れる

CSS

.box_10 {
	position: relative;
	padding: 1em;
	color: #fff;
	background: #27acd9;
	}
.box_10::after {
	position: absolute;
	content: '';
	top: 100%;
	left: 50px;
	border: 15px solid transparent;
	border-top: 15px solid #27acd9;
	width: 0;
	height: 0;
}

角を折ったメモ風デザインの囲み枠。ベースの背景が薄い色でも、角の折れた部分を濃い色にすることでアクセントになり、目に留まりやすい項目となります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_11 {
	position: relative;
	background: #eaf5f9;
	padding: 1.5em;
	border: solid 1px #27acd9;
	}
.box_11::after {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: #fff #fff #27acd9;
	}

便箋風デザインの囲み枠。テキストに下線を付けて行間にゆとりを持たせることがポイントです。長い文章を掲載すると固い印象になりがちですが、こうして便箋デザインにすることで柔らかな印象になり、格段に読みやすくなります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_12 {
	background: #eaf5f9;
	padding: 2em 1.5em 1.5em;
	}
.box_12 span {
	border-bottom: solid 1px #97C4D4;
	line-height: 2;
	}

ルーズリーフ風デザインの囲み枠。先ほどの便箋スタイルにプラスして、サイドにパンチ穴の丸を並べることで、ルーズリーフに早変わり。よりカジュアルな印象になります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_13 {
	background: #eaf5f9;
	border-left: 10px dotted rgba(0,0,0,.1);
	box-shadow: 0 0 0 15px #eaf5f9;
	padding: 1em 1em 1em 1.5em;
	}
.box_13 span {
	border-bottom: solid 1px #97C4D4;
	line-height: 2;
	}

ステッチの付いた布風デザインの囲み枠。点線で囲んで縫い目を表現しています。ソーイングやハンドメイド関連のサイトで活躍しそうですね。線（border）の太さを調整すればまた印象が変わって見えますので、お好みでお試しください。

コードを表示

HTML

ここに文章を入れる

CSS

.box_14 {
	background: #27acd9;
	color: #fff;
	border: 2px dashed #fff;
	box-shadow: 0 0 0 10px #27acd9;
	padding: 1em;
	border-radius: 2px;
	}

タイトル付きの囲み枠

タイトル部分

シンプルなタイトルを付けた囲み枠。スタイリッシュな印象なのでビジネスライクなサイトで活躍するシンプルなスタイルです。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_15 {
	background: #eaf5f9;
	padding: 1.5em;
	}
.box_15_ttl {
	border-left: solid 4px #27acd9;
	padding-left: 15px;
	color: #27acd9;
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 10px;
	}
.box_15_txt {
	margin-top: 10px;
	}

タイトル部分

上部にタイトルを入れた囲み枠。太いタイトルの帯が目立ちますので、要点をまとめたい時などに活躍します。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_16 {
	border: 1px solid #27acd9;
	}
.box_16_ttl {
	margin: 0;
	background: #27acd9;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	}
.box_16_txt {
	margin: 0;
	padding: 1em;
	}

タイトル部分

リボン風のタイトルを付けた囲み枠。リボンの折り返し部分を付けただけで、シンプルながらおしゃれな印象になります。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_17 {
	position: relative;
	background: #eaf5f9;
	}
.box_17_ttl {
	position: relative;
	display: inline-block;
	padding: 0.5em 2em;
	background: #27acd9;
	color: #fff;
	font-weight: bold;
	top: 20px;
	left: -10px;
	}
.box_17_ttl::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 10px transparent;
	border-right: solid 10px rgb(149, 158, 155);
	}
.box_17_txt {
	margin: 0;
	padding: 1em 1.5em 1.5em;
	}

タイトル部分

囲み枠の上部にタイトルを挟んだスタイル。シンプルなデザインなので目立ちすぎず、補足説明の要素として配置するのにおすすめです。枠線とタイトルの文字色を統一するのが見やすさのポイントです！

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_18 {
	position: relative;
	padding: 1.5em;
	border: 2px solid #27acd9;
	}
.box_18_ttl {
	position: absolute;
	padding: 0 0.5em;
	left: 30px;
	top: -10px;
	background: #fff;
	font-weight: bold;
	color: #27acd9;
	}

タイトル部分

タイトルタブを上側に付けた囲み枠。これもシンプルですが、タブにポイントカラーを入れることで目立たせています。

コードを表示

HTML

ここにタイトルを入れる

ここに文章を入れる

CSS

.box_19_ttl {
	background: #27acd9;
	color: #fff;
	font-weight: bold;
	padding: 0.5em 1em 0.2em;
	display: inline-block;
	margin-bottom: 0;
	border-radius: 5px 5px 0 0;
	}
.box_19 {
	border: 1px solid #27acd9;
	background: #eaf5f9;
	padding: 1em;
	}

タイトル部分

いろいろな要素を組み合わせた囲み枠。一つのコンテンツとしてしっかり魅せらるデザイン性です。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_20 {
	border: 1px solid #27acd9;
	background: #eaf5f9;
	padding: 1.5em;
	}
.box_20_ttl {
	border-left: solid 4px #27acd9;
	padding-left: 10px;
	color: 27acd9;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15px;
	}
.box_20_txt {
	background: #fff;
	border-radius: 10px;
	padding: 1em;
	margin-top: 10px;
	box-shadow: 0 2px 3px #ccc;
	}

[/nop]