【CSS】囲み枠・ボックスデザイン15選｜コピペで使えるおしゃれ見本集

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

記事を書いていると、ここは注意、ここがポイント、とまとめたい場面がよくあります。

そんなときに使える囲み枠・ボックスを、CSSで15種類そろえました。

どれも追加CSSに貼るだけのコピペOKです。

見た目を確かめながら、好きなものを選んでください。

目次 表示

目次へ

囲み枠をコピペで使う準備

使い方はかんたんです。

気になったデザインのCSSをコピーして、外観 → カスタマイズ → 追加CSS に貼るだけです。

あとは本文に、classを付けたdivを置くだけです。

WordPressでは、ブロックの追加からカスタムHTMLを選んで、そこにdivを貼り付けます。

通常の段落ブロックに貼ると、タグがそのまま文字として表示されてしまうので注意してください。

HTMLはどのボックスも、基本はこの1行です。

<div class="cw-box-line">ここに本文が入ります。</div>

class名を、使いたいデザインのものに変えるだけで切り替えられます。

このclass名は、自分のわかりやすい名前に変えても大丈夫です。

その場合は、CSS側のclass名も同じ名前にそろえてくださいね。

追加CSSの詳しい貼り方は、WordPressにCSSを追加する3つの方法でも解説しています。

基本の囲み枠4種

まずは、どんなサイトでも使いやすい基本の4つです。

シンプルな枠線ボックス

細い枠線と角丸だけの、いちばん使いやすい基本形です。

ここに本文が入ります。シンプルな枠線のボックスです。
.cw-box-line {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 16px 20px;
  color: #333;
  line-height: 1.8;
}

背景色つきボックス

薄い背景色でやわらかく囲む、枠線なしのボックスです。

ここに本文が入ります。薄い背景色で囲んだボックスです。
.cw-box-fill {
  background: #eef6ee;
  border-radius: 8px;
  padding: 16px 20px;
  color: #333;
  line-height: 1.8;
}

左ライン強調ボックス

左に太いラインを引いて、引用や補足に使いやすくしたボックスです。

ここに本文が入ります。左のラインで視線を引きつけるボックスです。
.cw-box-leftline {
  border-left: 5px solid #37a845;
  background: #f7f7f7;
  padding: 14px 18px;
  color: #333;
  line-height: 1.8;
}

点線ボックス

点線でやわらかく囲む、メモや下書きの雰囲気に合うボックスです。

ここに本文が入ります。点線で囲んだボックスです。
.cw-box-dashed {
  border: 2px dashed #37a845;
  border-radius: 8px;
  padding: 16px 20px;
  color: #333;
  line-height: 1.8;
}

用途で使い分けるボックス

色と記号で意味を持たせた、注意・ポイント・メモ用のボックスです。

記号は画像を使わず、疑似要素（::before）で描いています。

注意ボックス

左上のビックリマークで、読み手に注意をうながせます。

ここに本文が入ります。ここは注意してほしい、という場面に使えます。
.cw-box-warning {
  position: relative;
  border: 1px solid #f0c0c0;
  background: #fdf1f1;
  border-radius: 8px;
  padding: 16px 20px 16px 52px;
  color: #333;
  line-height: 1.8;
}
.cw-box-warning::before {
  content: "!";
  position: absolute;
  top: 18px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e05353;
  color: #fff;
  font-weight: bold;
  line-height: 1;
}

ポイントボックス

iマークで、押さえてほしいポイントをやさしく示せます。

ここに本文が入ります。ここがポイントです、という場面に使えます。
.cw-box-point {
  position: relative;
  border: 1px solid #cfe0f5;
  background: #f0f6fe;
  border-radius: 8px;
  padding: 16px 20px 16px 52px;
  color: #333;
  line-height: 1.8;
}
.cw-box-point::before {
  content: "i";
  position: absolute;
  top: 18px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3c82d6;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
}

メモ・補足ボックス

上部に小さなラベルを付けた、補足やメモ向けのボックスです。

ここに本文が入ります。ちょっとした補足を書きたいときに使えます。
.cw-box-memo {
  position: relative;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 8px;
  padding: 22px 20px 16px;
  margin-top: 12px;
  color: #555;
  line-height: 1.8;
}
.cw-box-memo::before {
  content: "MEMO";
  position: absolute;
  top: -11px;
  left: 14px;
  background: #888;
  color: #fff;
  font-size: 0.72em;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 4px;
}

OKボックス

チェックマークで、良い例やおすすめを示せます。

ここに本文が入ります。こちらが良い例です、という場面に使えます。
.cw-box-ok {
  position: relative;
  border: 1px solid #bfe3c4;
  background: #f0faf1;
  border-radius: 8px;
  padding: 16px 20px 16px 52px;
  color: #333;
  line-height: 1.8;
}
.cw-box-ok::before {
  content: "✓";
  position: absolute;
  top: 18px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #37a845;
  color: #fff;
  font-size: 0.95em;
  font-weight: bold;
  line-height: 1;
}

NGボックス

バツ印で、避けたい例やNGパターンを示せます。

ここに本文が入ります。これは避けたい、という場面に使えます。
.cw-box-ng {
  position: relative;
  border: 1px solid #f0c0c0;
  background: #fdf1f1;
  border-radius: 8px;
  padding: 16px 20px 16px 52px;
  color: #333;
  line-height: 1.8;
}
.cw-box-ng::before {
  content: "×";
  position: absolute;
  top: 18px;
  left: 16px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e05353;
  color: #fff;
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
}

タイトル・ラベル付きボックス

見出しやタブを付けて、内容がひと目で伝わるようにしたボックスです。

ラベルの文字は、HTMLの data 属性で自由に変えられます。

タイトルバー付きボックス

上に帯を付けて、内容のタイトルを見せられるボックスです。

ここに本文が入ります。帯のタイトルは data-title で変えられます。

HTMLは、タイトルを data-title に書きます。

<div class="cw-box-titlebar" data-title="ここにタイトル">本文が入ります。</div>
.cw-box-titlebar {
  border: 1px solid #37a845;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 18px 16px;
  color: #333;
  line-height: 1.8;
}
.cw-box-titlebar::before {
  content: attr(data-title);
  display: block;
  margin: 0 -18px 14px;
  background: #37a845;
  color: #fff;
  font-weight: bold;
  padding: 8px 18px;
}

ふせん風ボックス

やわらかい影を付けた、付箋のような雰囲気のボックスです。

ここに本文が入ります。付箋のように貼った雰囲気のボックスです。
.cw-box-fusen {
  background: #fff8d6;
  border: 1px solid #efe29a;
  border-radius: 4px;
  padding: 16px 20px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.08);
  color: #5a5330;
  line-height: 1.8;
}

タブ付きボックス（基本）

左上に四角いタブを付けた、定番のラベル付きボックスです。

ここに本文が入ります。タブの文字は data-label で変えられます。

HTMLは、タブの文字を data-label に書きます。

<div class="cw-box-tab" data-label="POINT">本文が入ります。</div>
.cw-box-tab {
  position: relative;
  border: 2px solid #37a845;
  border-radius: 0 8px 8px 8px;
  padding: 16px 18px;
  margin-top: 30px;
  color: #333;
  line-height: 1.8;
}
.cw-box-tab::before {
  content: attr(data-label);
  position: absolute;
  top: -28px;
  left: -2px;
  height: 28px;
  line-height: 28px;
  background: #37a845;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0 16px;
  border-radius: 6px 6px 0 0;
}

タブ付きボックス（角丸タブ）

枠の上に、丸いタブを浮かせたやわらかい印象のボックスです。

HTMLは基本のタブと同じで、class名を cw-box-tab-round に変えるだけです。

ここに本文が入ります。丸いタブを浮かせたボックスです。
.cw-box-tab-round {
  position: relative;
  border: 2px solid #3c82d6;
  border-radius: 8px;
  padding: 20px 18px 16px;
  margin-top: 16px;
  color: #333;
  line-height: 1.8;
}
.cw-box-tab-round::before {
  content: attr(data-label);
  position: absolute;
  top: -14px;
  left: 16px;
  background: #3c82d6;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  padding: 3px 16px;
  border-radius: 999px;
}

タブ付きボックス（アイコン入りタブ）

タブの先頭にチェック記号を付けて、より目立たせたボックスです。

HTMLは基本のタブと同じで、class名を cw-box-tab-icon に変えるだけです。

ここに本文が入ります。タブに記号を付けたボックスです。
.cw-box-tab-icon {
  position: relative;
  border: 2px solid #e0913c;
  border-radius: 8px;
  padding: 20px 18px 16px;
  margin-top: 16px;
  color: #333;
  line-height: 1.8;
}
.cw-box-tab-icon::before {
  content: "✓ " attr(data-label);
  position: absolute;
  top: -14px;
  left: 16px;
  background: #e0913c;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  padding: 3px 16px;
  border-radius: 6px;
}

アイコン付きボックス（記号を自由に変えられる）

左の丸い記号を、data-icon で好きな記号に変えられるボックスです。

★ や ？ など、伝えたい内容に合わせて記号を差し替えてください。

ここに本文が入ります。記号は data-icon で変えられます。

HTMLは、使いたい記号を data-icon に書きます。

<div class="cw-box-icon" data-icon="★">本文が入ります。</div>
.cw-box-icon {
  position: relative;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 8px;
  padding: 16px 20px 16px 54px;
  color: #333;
  line-height: 1.8;
}
.cw-box-icon::before {
  content: attr(data-icon);
  position: absolute;
  top: 14px;
  left: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #37a845;
  color: #fff;
  text-align: center;
  line-height: 26px;
}

SANGOで使うときの注意

SANGOにも、標準の囲み枠（ボックス）が用意されています。

class名がぶつからないように、この記事では cw- という接頭辞を付けています。

このcw-は、あくまで一例です。

自分の好きなclass名に変えて使っても大丈夫です。

その場合は、HTMLとCSSの両方のclass名をそろえてくださいね。

もしSANGOの標準スタイルが効いて、余白などが変わってしまうときがあります。

そのときは、値のうしろに !important を足すと上書きできます。

これはSANGO特有の話で、他のテーマでは足さなくても効くことが多いです。

まとめ

囲み枠がそろうと、記事の要点がぐっと伝わりやすくなります。

まずは1つ、追加CSSに貼って試してみてください。

ボタンやカードとあわせると、ブログの見た目がさらに整います。

あわせて、こちらの見本集もどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA



reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

前の記事

CSS positionの使い方｜relative・absol…

次の記事

CSSアニメーション・transition見本集｜コピペで動き…