Webサイトで使える、おしゃれな囲み枠・ボックスデザインを20種類まとめました。
すべてHTMLとCSSをコピーして使用でき、文章や色、サイズも自由に変更できます。
囲み枠・ボックスは、記事やサービスを紹介するカードとは異なり、本文中のポイントや補足、注意事項などを読みやすく整理するためのデザインです。
伝えたい内容やサイトの雰囲気に合ったボックスを探してみてください。
シンプルで使いやすい囲み枠
まずは、さまざまな記事に取り入れやすい、シンプルな囲み枠デザインです。
枠線や背景色などの控えめな装飾で、本文中の補足や伝えたい内容をすっきりと整理できます。
DESIGN 01
細い枠線のボックス
こちらは、本文の中で補足したい内容を入れるためのシンプルな囲み枠です。
<div class="box-design-01">
こちらは、本文の中で補足したい内容を入れるためのシンプルな囲み枠です。
</div>.box-design-01 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #fff;
border: 1px solid #dfe2e8;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.box-design-01 {
padding: 17px 18px;
font-size: 14px;
}
}
色の変更：
CSS内の「#dfe2e8」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい文章へ書き換えてください。
DESIGN 02
左ライン付きボックス
左側にラインを入れて、本文中の伝えたい内容をさりげなく強調します。
<div class="box-design-02">
左側にラインを入れて、本文中の伝えたい内容をさりげなく強調します。
</div>.box-design-02 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #fff;
border-left: 4px solid #c98792;
}
@media screen and (max-width: 600px) {
.box-design-02 {
padding: 17px 18px;
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい文章へ書き換えてください。
DESIGN 03
上下ラインのボックス
上下にラインを入れて、本文と区切りながら内容をすっきりと見せます。
<div class="box-design-03">
上下にラインを入れて、本文と区切りながら内容をすっきりと見せます。
</div>.box-design-03 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: transparent;
border-top: 1px solid #c98792;
border-bottom: 1px solid #c98792;
}
@media screen and (max-width: 600px) {
.box-design-03 {
padding: 17px 18px;
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい文章へ書き換えてください。
DESIGN 04
点線で囲んだボックス
点線の枠で囲んだ、やさしく親しみやすい印象のボックスです。
<div class="box-design-04">
点線の枠で囲んだ、やさしく親しみやすい印象のボックスです。
</div>.box-design-04 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #fff;
border: 1px dashed #c98792;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.box-design-04 {
padding: 17px 18px;
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい文章へ書き換えてください。
DESIGN 05
背景色だけのボックス
淡い背景色を付けて、本文中の内容をやわらかく目立たせます。
<div class="box-design-05">
淡い背景色を付けて、本文中の内容をやわらかく目立たせます。
</div>.box-design-05 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #f8edef;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.box-design-05 {
padding: 17px 18px;
font-size: 14px;
}
}
色の変更：
CSS内の「#f8edef」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい文章へ書き換えてください。
見出し付きの囲み枠・ボックス
続いて、内容がひと目で分かる、見出し付きのボックスデザインです。
タイトルやラベルを付けることで、本文中の情報を整理しながら、伝えたいテーマを分かりやすく示せます。
DESIGN 06
上部に見出しがあるボックス
お知らせ
上部に見出しを配置して、内容を分かりやすく整理したボックスです。
<div class="box-design-06">
<div class="box-design-06__title">
お知らせ
</div>
<div class="box-design-06__text">
上部に見出しを配置して、内容を分かりやすく整理したボックスです。
</div>
</div>.box-design-06 {
width: 100%;
max-width: 720px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border: 1px solid #dfe2e8;
border-radius: 5px;
}
.box-design-06__title {
padding: 11px 20px;
color: #292d38;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
background: #f8edef;
}
.box-design-06__text {
padding: 18px 20px;
color: #626873;
font-size: 15px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-06__title {
padding: 10px 17px;
font-size: 14px;
}
.box-design-06__text {
padding: 16px 17px;
font-size: 14px;
}
}
色の変更：
CSS内の「#f8edef」と「#dfe2e8」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 07
見出しが枠線に重なるボックス
お知らせ
見出しを枠線に重ねて、内容のまとまりを印象的に見せるボックスです。
<div class="box-design-07">
<div class="box-design-07__title">
お知らせ
</div>
<div class="box-design-07__text">
見出しを枠線に重ねて、内容のまとまりを印象的に見せるボックスです。
</div>
</div>.box-design-07 {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 30px 22px 20px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #fff;
border: 1px solid #c98792;
border-radius: 5px;
}
.box-design-07__title {
position: absolute;
top: 0;
left: 20px;
padding: 7px 18px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
background: #c98792;
border-radius: 999px;
transform: translateY(-50%);
}
.box-design-07__text {
margin: 0;
}
@media screen and (max-width: 600px) {
.box-design-07 {
padding: 28px 18px 17px;
font-size: 14px;
}
.box-design-07__title {
left: 16px;
padding: 6px 15px;
font-size: 13px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 08
左上にラベルが付いたボックス
NEW
左上に小さなラベルを付けて、新しい情報や注目してほしい内容を示します。
<div class="box-design-08">
<div class="box-design-08__label">
NEW
</div>
<div class="box-design-08__text">
左上に小さなラベルを付けて、新しい情報や注目してほしい内容を示します。
</div>
</div>.box-design-08 {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 28px 22px 20px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #fff;
border: 1px solid #dfe2e8;
border-radius: 5px;
}
.box-design-08__label {
position: absolute;
top: 0;
left: 18px;
padding: 6px 14px;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.08em;
background: #c98792;
border-radius: 3px;
transform: translateY(-50%);
}
.box-design-08__text {
margin: 0;
}
@media screen and (max-width: 600px) {
.box-design-08 {
padding: 26px 18px 17px;
font-size: 14px;
}
.box-design-08__label {
left: 15px;
padding: 5px 12px;
font-size: 10px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の「NEW」と日本語部分を、表示したいラベルと文章へ書き換えてください。
DESIGN 09
丸い見出し付きボックス
ポイント
丸い見出しを付けて、伝えたい内容をやわらかな印象でまとめます。
<div class="box-design-09">
<div class="box-design-09__title">
ポイント
</div>
<div class="box-design-09__text">
丸い見出しを付けて、伝えたい内容をやわらかな印象でまとめます。
</div>
</div>.box-design-09 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 15px;
line-height: 1.8;
background: #f8edef;
border-radius: 7px;
}
.box-design-09__title {
display: inline-block;
margin: 0 0 13px;
padding: 6px 16px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
background: #c98792;
border-radius: 999px;
}
.box-design-09__text {
margin: 0;
}
@media screen and (max-width: 600px) {
.box-design-09 {
padding: 18px;
font-size: 14px;
}
.box-design-09__title {
padding: 5px 14px;
font-size: 12px;
}
}
色の変更：
CSS内の「#f8edef」と「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
用途に合わせて使える案内ボックス
ここからは、手順やポイント、メモ、注意事項など、伝える内容に合わせて使えるボックスデザインです。
ボックスの色や表示を使い分けることで、情報の種類や重要度を分かりやすく伝えられます。
DESIGN 10
番号付きのステップボックス
-
1
アカウントを作成する
必要な情報を入力して登録します。
-
2
内容を設定する
表示したい内容を設定します。
-
3
設定を確認する
内容を確認したら完了です。
<div class="box-design-10">
<ol class="box-design-10__list">
<li class="box-design-10__item">
<span class="box-design-10__number">
1
</span>
<div>
<p class="box-design-10__title">
アカウントを作成する
</p>
<p class="box-design-10__text">
必要な情報を入力して登録します。
</p>
</div>
</li>
<li class="box-design-10__item">
<span class="box-design-10__number">
2
</span>
<div>
<p class="box-design-10__title">
内容を設定する
</p>
<p class="box-design-10__text">
表示したい内容を設定します。
</p>
</div>
</li>
<li class="box-design-10__item">
<span class="box-design-10__number">
3
</span>
<div>
<p class="box-design-10__title">
設定を確認する
</p>
<p class="box-design-10__text">
内容を確認したら完了です。
</p>
</div>
</li>
</ol>
</div>.box-design-10 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
background: #fff;
border: 1px solid #dfe2e8;
border-radius: 5px;
}
.box-design-10__list {
position: relative;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.box-design-10__list::before {
content: "";
position: absolute;
top: 18px;
bottom: 18px;
left: 17px;
width: 1px;
background: #e8c3ca;
}
.box-design-10__item {
position: relative;
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
margin: 0 !important;
padding: 0 0 22px !important;
list-style: none !important;
}
.box-design-10__item:last-child {
padding-bottom: 0 !important;
}
.box-design-10__number {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
background: #c98792;
border-radius: 50%;
}
.box-design-10__title {
margin: 0 0 3px !important;
color: #292d38;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
}
.box-design-10__text {
margin: 0 !important;
color: #626873;
font-size: 13px;
line-height: 1.7;
}
@media screen and (max-width: 600px) {
.box-design-10 {
padding: 20px 17px;
}
.box-design-10__item {
grid-template-columns: 32px 1fr;
gap: 11px;
padding-bottom: 19px !important;
}
.box-design-10__list::before {
left: 15px;
}
.box-design-10__number {
width: 32px;
height: 32px;
font-size: 12px;
}
.box-design-10__title {
font-size: 14px;
}
.box-design-10__text {
font-size: 12px;
}
}
色の変更：
CSS内の「#c98792」と「#e8c3ca」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい手順と説明文へ書き換えてください。
DESIGN 11
ポイントを伝えるボックス
ここがポイント！
覚えておきたい大切なポイントを、本文の中で分かりやすく伝えます。
<div class="box-design-11">
<span class="box-design-11__icon" aria-hidden="true">
!
</span>
<div class="box-design-11__content">
<p class="box-design-11__title">
ここがポイント！
</p>
<p class="box-design-11__text">
覚えておきたい大切なポイントを、本文の中で分かりやすく伝えます。
</p>
</div>
</div>.box-design-11 {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: #f8edef;
border-radius: 7px;
}
.box-design-11__icon {
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: #fff;
font-size: 19px;
font-weight: 600;
line-height: 1;
background: #c98792;
border-radius: 50%;
}
.box-design-11__content {
flex: 1;
min-width: 0;
}
.box-design-11__title {
margin: 0 0 6px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-11__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-11 {
gap: 12px;
padding: 18px;
}
.box-design-11__icon {
flex-basis: 32px;
width: 32px;
height: 32px;
font-size: 16px;
}
.box-design-11__title {
font-size: 15px;
}
.box-design-11__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#f8edef」と「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 12
メモを表示するボックス
メモ
あとから確認したい内容や、ちょっとした補足情報を記録するときに使えます。
<div class="box-design-12">
<div class="box-design-12__label">
メモ
</div>
<div class="box-design-12__text">
あとから確認したい内容や、ちょっとした補足情報を記録するときに使えます。
</div>
</div>.box-design-12 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
color: #626873;
font-size: 14px;
line-height: 1.8;
background: #edf5fa;
border: 1px solid #9ebcd2;
border-radius: 7px;
}
.box-design-12__label {
display: inline-block;
margin: 0 0 12px;
padding: 4px 11px;
color: #607f99;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.08em;
background: rgba(255, 255, 255, 0.55);
border: 1px solid #9ebcd2;
border-radius: 4px;
}
.box-design-12__text {
margin: 0;
}
@media screen and (max-width: 600px) {
.box-design-12 {
padding: 18px;
font-size: 13px;
}
.box-design-12__label {
margin-bottom: 10px;
font-size: 10px;
}
}
色の変更：
CSS内の「#edf5fa」と「#9ebcd2」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したいラベルと文章へ書き換えてください。
DESIGN 13
チェック項目のボックス
- 利用規約に同意する
- お知らせを受け取る
- 入力内容を確認する
<div class="box-design-13">
<ul class="box-design-13__list">
<li class="box-design-13__item">
<span class="box-design-13__check" aria-hidden="true">
✓
</span>
利用規約に同意する
</li>
<li class="box-design-13__item">
<span class="box-design-13__check" aria-hidden="true">
✓
</span>
お知らせを受け取る
</li>
<li class="box-design-13__item">
<span class="box-design-13__check" aria-hidden="true">
✓
</span>
入力内容を確認する
</li>
</ul>
</div>.box-design-13 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: #fff;
border: 1px solid #ead9dc;
border-radius: 7px;
}
.box-design-13__list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.box-design-13__item {
display: flex;
align-items: center;
gap: 11px;
margin: 0 !important;
padding: 7px 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.6;
list-style: none !important;
}
.box-design-13__check {
flex: 0 0 20px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1;
background: #c98792;
border: 1px solid #c98792;
border-radius: 4px;
}
@media screen and (max-width: 600px) {
.box-design-13 {
padding: 18px;
}
.box-design-13__item {
gap: 9px;
font-size: 13px;
}
.box-design-13__check {
flex-basis: 18px;
width: 18px;
height: 18px;
font-size: 11px;
}
}
色の変更：
CSS内の「#c98792」と「#ead9dc」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したいチェック項目へ書き換えてください。
DESIGN 14
補足情報を伝えるボックス
補足情報
本文に付け加えておきたい情報や、知っておくと役立つ内容を伝えます。
<div class="box-design-14">
<div class="box-design-14__header">
<span class="box-design-14__icon" aria-hidden="true">
i
</span>
<p class="box-design-14__title">
補足情報
</p>
</div>
<p class="box-design-14__text">
本文に付け加えておきたい情報や、知っておくと役立つ内容を伝えます。
</p>
</div>.box-design-14 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: #edf5fa;
border: 1px solid #7f9fba;
border-radius: 7px;
}
.box-design-14__header {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 11px;
}
.box-design-14__icon {
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #fff;
font-family: Georgia, serif;
font-size: 17px;
font-weight: 600;
font-style: italic;
line-height: 1;
background: #7f9fba;
border-radius: 50%;
}
.box-design-14__title {
margin: 0 !important;
color: #7f9fba;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-14__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-14 {
padding: 18px;
}
.box-design-14__icon {
flex-basis: 27px;
width: 27px;
height: 27px;
font-size: 15px;
}
.box-design-14__title {
font-size: 15px;
}
.box-design-14__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#edf5fa」と「#7f9fba」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 15
注意事項を伝えるボックス
ご注意ください
大切な注意事項や、事前に確認してほしい内容を分かりやすく伝えます。
<div class="box-design-15">
<div class="box-design-15__header">
<span class="box-design-15__icon" aria-hidden="true">
!
</span>
<p class="box-design-15__title">
ご注意ください
</p>
</div>
<p class="box-design-15__text">
大切な注意事項や、事前に確認してほしい内容を分かりやすく伝えます。
</p>
</div>.box-design-15 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: #fff5f6;
border: 1px solid #c98792;
border-radius: 7px;
}
.box-design-15__header {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 11px;
}
.box-design-15__icon {
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 29px;
padding-top: 5px;
box-sizing: border-box;
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1;
background: #c98792;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.box-design-15__title {
margin: 0 !important;
color: #c98792;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-15__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-15 {
padding: 18px;
}
.box-design-15__icon {
flex-basis: 29px;
width: 29px;
height: 26px;
font-size: 13px;
}
.box-design-15__title {
font-size: 15px;
}
.box-design-15__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#fff5f6」と「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと注意事項へ書き換えてください。
デザインを楽しむおしゃれなボックス
最後は、二重線やストライプ、グラデーションなどを取り入れた、装飾性のあるボックスデザインです。
ページの雰囲気に合わせて色を変更すれば、本文中のアクセントとして幅広く活用できます。
DESIGN 16
二重線で囲んだボックス
お知らせ
二重線の枠を使って、本文中の大切な内容を上品に目立たせます。
<div class="box-design-16">
<p class="box-design-16__title">
お知らせ
</p>
<p class="box-design-16__text">
二重線の枠を使って、本文中の大切な内容を上品に目立たせます。
</p>
</div>.box-design-16 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 20px 22px;
box-sizing: border-box;
background: #fff;
border: 4px double #c98792;
border-radius: 5px;
}
.box-design-16__title {
margin: 0 0 7px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-16__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-16 {
padding: 17px 18px;
}
.box-design-16__title {
font-size: 15px;
}
.box-design-16__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 17
内側に線が入ったボックス
お知らせ
内側に細いラインを入れて、文章をすっきりと囲んだボックスです。
<div class="box-design-17">
<p class="box-design-17__title">
お知らせ
</p>
<p class="box-design-17__text">
内側に細いラインを入れて、文章をすっきりと囲んだボックスです。
</p>
</div>.box-design-17 {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 28px 30px;
box-sizing: border-box;
background: #fff;
border: 1px solid #ead9dc;
border-radius: 5px;
}
.box-design-17::before {
content: "";
position: absolute;
inset: 7px;
border: 1px solid #c98792;
border-radius: 3px;
pointer-events: none;
}
.box-design-17__title,
.box-design-17__text {
position: relative;
z-index: 1;
}
.box-design-17__title {
margin: 0 0 7px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-17__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-17 {
padding: 25px 26px;
}
.box-design-17__title {
font-size: 15px;
}
.box-design-17__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#ead9dc」と「#c98792」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 18
ストライプ背景のボックス
お知らせ
淡いストライプの背景を使って、文章にやさしいアクセントを加えます。
<div class="box-design-18">
<p class="box-design-18__title">
お知らせ
</p>
<p class="box-design-18__text">
淡いストライプの背景を使って、文章にやさしいアクセントを加えます。
</p>
</div>.box-design-18 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: repeating-linear-gradient(
-45deg,
#fff 0,
#fff 10px,
#f8edef 10px,
#f8edef 20px
);
border: 1px solid #ead9dc;
border-radius: 7px;
}
.box-design-18__title {
margin: 0 0 7px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-18__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-18 {
padding: 18px;
}
.box-design-18__title {
font-size: 15px;
}
.box-design-18__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#f8edef」と「#ead9dc」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 19
グラデーション背景のボックス
お知らせ
淡いピンクとブルーの背景で、文章をやわらかな雰囲気に仕上げます。
<div class="box-design-19">
<p class="box-design-19__title">
お知らせ
</p>
<p class="box-design-19__text">
淡いピンクとブルーの背景で、文章をやわらかな雰囲気に仕上げます。
</p>
</div>.box-design-19 {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background: linear-gradient(
135deg,
#f8edef 0%,
#edf5fa 100%
);
border-radius: 7px;
}
.box-design-19__title {
margin: 0 0 7px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-19__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-19 {
padding: 18px;
}
.box-design-19__title {
font-size: 15px;
}
.box-design-19__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#f8edef」と「#edf5fa」を、お好みの2色へ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
DESIGN 20
角にアクセントがあるボックス
お知らせ
ボックスの角に色を加えて、シンプルな文章にさりげないアクセントを付けます。
<div class="box-design-20">
<p class="box-design-20__title">
お知らせ
</p>
<p class="box-design-20__text">
ボックスの角に色を加えて、シンプルな文章にさりげないアクセントを付けます。
</p>
</div>.box-design-20 {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 22px 28px;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border: 1px solid #ead9dc;
border-radius: 5px;
}
.box-design-20::before,
.box-design-20::after {
content: "";
position: absolute;
width: 0;
height: 0;
}
.box-design-20::before {
top: 0;
left: 0;
border-top: 24px solid #c98792;
border-right: 24px solid transparent;
}
.box-design-20::after {
right: 0;
bottom: 0;
border-bottom: 24px solid #c98792;
border-left: 24px solid transparent;
}
.box-design-20__title,
.box-design-20__text {
position: relative;
z-index: 1;
}
.box-design-20__title {
margin: 0 0 7px !important;
color: #292d38;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.box-design-20__text {
margin: 0 !important;
color: #626873;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.box-design-20 {
padding: 18px 24px;
}
.box-design-20::before {
border-top-width: 20px;
border-right-width: 20px;
}
.box-design-20::after {
border-bottom-width: 20px;
border-left-width: 20px;
}
.box-design-20__title {
font-size: 15px;
}
.box-design-20__text {
font-size: 13px;
}
}
色の変更：
CSS内の「#c98792」と「#ead9dc」を、お好みのカラーコードへ変更してください。
文章の変更：
HTML内の日本語部分を、表示したい見出しと文章へ書き換えてください。
まとめ
今回は、シンプルな囲み枠から、見出し付きや注意事項に使えるものまで、20種類のボックスデザインをご紹介しました。
気になるデザインが見つかったら、HTMLとCSSをコピーし、文章や色をサイトに合わせて変更してみてください。
記事やサービスを紹介するデザインを探している方は、カードデザインの記事も参考にしてみてください。
