本ページはプロモーションが含まれています

【コピペOK】ブログが垢抜ける！おしゃれなCSS囲み枠（ボックス）デザイン20選

公開日

ブログ記事を読みやすく整理し、重要なポイントを読者に伝えるために「囲み枠（ボックス）」は必須のデザインパーツです。この記事では、コピペするだけでサイトがグッと垢抜ける、実用的でおしゃれなCSS囲み枠デザイン20選を厳選しました。

HTMLとCSSをコピーしてご自身のサイトに貼り付けるだけで、すぐに綺麗なボックス装飾が完成します。

おしゃれなCSS囲み枠（ボックス）20選 一覧

1. シンプルな実線ボックス 2. ポップな破線（ダッシュ） 3. エレガントな二重線 4. やわらか角丸ベタ塗り 5. 左アクセントバー 6. 上下ライン 7. ふんわりシャドウ（浮き出し） 8. ステッチ風（縫い目） 9. 付箋風（右下影） 10. 枠線上のタイトル付きボックス 11. ヘッダー付きボックス（ベタ塗り） 12. 黒板風 13. メモ帳風（横罫線） 14. 斜めストライプ背景 15. グラデーション枠線 16. 右上が折れた風 17. カギカッコ風 18. チェックボックス風リスト枠 19. アラート・警告風（赤色） 20. ワンポイントアイコン風（左上円）

1. シンプルな実線ボックス

ここにテキストが入ります。最も汎用性の高いシンプルな囲み枠です。

HTML

<div class="box-solid">ここにテキストが入ります。</div>

CSS

.box-solid {
  padding: 1.5em;
  border: 2px solid #333;
  color: #333;
  background-color: #fff;
}

2. ポップな破線（ダッシュ）

ここにテキストが入ります。親しみやすい印象を与える破線のデザインです。

HTML

<div class="box-dashed">ここにテキストが入ります。</div>

CSS

.box-dashed {
  padding: 1.5em;
  border: 2px dashed #007bff;
  color: #333;
  background-color: #f0f7ff;
}

3. エレガントな二重線

ここにテキストが入ります。クラシックで少し上品に見せたい時におすすめです。

HTML

<div class="box-double">ここにテキストが入ります。</div>

CSS

.box-double {
  padding: 1.5em;
  border: 4px double #ff9900;
  color: #333;
  background-color: #fff;
}

4. やわらか角丸ベタ塗り

ここにテキストが入ります。枠線を使わず、背景色と角丸だけで優しく区切るデザインです。

HTML

<div class="box-round-bg">ここにテキストが入ります。</div>

CSS

.box-round-bg {
  padding: 1.5em;
  border-radius: 10px;
  background-color: #e3f2fd;
  color: #0d47a1;
}

5. 左アクセントバー

ここにテキストが入ります。引用や補足説明など、スマートに情報を添えたい時に便利です。

HTML

<div class="box-left-bar">ここにテキストが入ります。</div>

CSS

.box-left-bar {
  padding: 1.5em;
  background-color: #f9f9f9;
  border-left: 6px solid #28a745;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

6. 上下ライン

ここにテキストが入ります。左右が抜けているため、スッキリとしたモダンな印象になります。

HTML

<div class="box-tb-line">ここにテキストが入ります。</div>

CSS

.box-tb-line {
  padding: 1.5em;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  background-color: #fafafa;
  color: #333;
}

7. ふんわりシャドウ（浮き出し）

ここにテキストが入ります。背景から浮き出たようなリッチなマテリアルデザイン風です。

HTML

<div class="box-shadow">ここにテキストが入ります。</div>

CSS

.box-shadow {
  padding: 1.5em;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #333;
}

8. ステッチ風（縫い目）

ここにテキストが入ります。布に糸で縫い付けたような、温かみのある可愛らしいデザインです。

HTML

<div class="box-stitch">ここにテキストが入ります。</div>

CSS

.box-stitch {
  padding: 1.5em;
  background-color: #fff3e0;
  border-radius: 8px;
  box-shadow: 0 0 0 4px #fff3e0, 0 0 0 6px #ffb74d;
  border: 2px dashed #ffb74d;
  color: #e65100;
  margin: 10px;
}

9. 付箋風（右下影）

ここにテキストが入ります。ペタッと貼り付けたような付箋風デザイン。ちょっとしたメモに最適です。

HTML

<div class="box-sticky">ここにテキストが入ります。</div>

CSS

.box-sticky {
  padding: 1.5em;
  background-color: #fffacd;
  color: #333;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  border-left: 5px solid #ffdb58;
}

10. 枠線上のタイトル付きボックス

POINT ここにテキストが入ります。枠線の上にタイトルが乗っているスタイリッシュなデザインです。

HTML

<div class="box-title-top">
  <span class="title">POINT</span>
  ここにテキストが入ります。
</div>

CSS

.box-title-top {
  position: relative;
  padding: 2em 1.5em 1.5em;
  border: 2px solid #007bff;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  margin-top: 20px;
}
.box-title-top .title {
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: #fff;
  padding: 0 10px;
  color: #007bff;
  font-weight: bold;
}

11. ヘッダー付きボックス（ベタ塗り）

まとめ

ここにテキストが入ります。ヘッダー部分が目立つため、記事の結論やまとめに非常に効果的です。

HTML

<div class="box-title-bg">
  <p class="title">まとめ</p>
  <p>ここにテキストが入ります。</p>
</div>

CSS

.box-title-bg {
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  color: #333;
}
.box-title-bg .title {
  background-color: #333;
  color: #fff;
  padding: 0.8em 1em;
  font-weight: bold;
  margin: 0;
}
.box-title-bg p {
  padding: 1.5em;
  margin: 0;
}

12. 黒板風

ここにテキストが入ります。学校の黒板をモチーフにした、遊び心のあるデザインです。チョークのような白文字が映えます。

HTML

<div class="box-blackboard">ここにテキストが入ります。</div>

CSS

.box-blackboard {
  padding: 1.5em;
  background-color: #1e5631;
  border: 4px solid #8b5a2b;
  border-radius: 3px;
  color: #fff;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

13. メモ帳風（横罫線）

ここにテキストが入ります。
CSSのグラデーション機能を使って罫線を表現した、リアルなノート風デザインです。

HTML

<div class="box-memo">ここにテキストが入ります。</div>

CSS

.box-memo {
  padding: 1.5em 1.5em 1.5em 2.5em;
  background-color: #fff;
  color: #333;
  border-left: 2px solid #ff9999;
  background-image: repeating-linear-gradient(transparent, transparent 1.9em, #eee 1.9em, #eee 2em);
  background-size: 100% 2em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

14. 斜めストライプ背景

ここにテキストが入ります。背景に斜めのストライプ模様をあしらった、少しポップで楽しげな印象のボックスです。

HTML

<div class="box-stripe">ここにテキストが入ります。</div>

CSS

.box-stripe {
  padding: 1.5em;
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 10px, #e6f2ff 10px, #e6f2ff 20px);
  border: 2px solid #b3d4ff;
  color: #333;
  border-radius: 5px;
}

15. グラデーション枠線

ここにテキストが入ります。枠線自体が鮮やかなグラデーションになっており、目を引くアクセントになります。

HTML

<div class="box-grad-border">ここにテキストが入ります。</div>

CSS

.box-grad-border {
  padding: 1.5em;
  border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #ff4b2b, #ff416c) border-box;
  color: #333;
  border-radius: 8px;
}

16. 右上が折れた風

ここにテキストが入ります。右上の角がペロッと折れ曲がったような、紙の質感を再現したCSSテクニックです。

HTML

<div class="box-fold">ここにテキストが入ります。</div>

CSS

.box-fold {
  padding: 1.5em;
  background: linear-gradient(to bottom left, transparent 50%, #ddd 50%) no-repeat top right / 30px 30px, #f9f9f9;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

17. カギカッコ風

ここにテキストが入ります。四角い枠線の角だけを残した、スタイリッシュで圧迫感のないデザインです。

HTML

<div class="box-bracket">ここにテキストが入ります。</div>

CSS

.box-bracket {
  position: relative;
  padding: 1.5em 2.5em;
  color: #333;
}
.box-bracket::before, .box-bracket::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #007bff;
}
.box-bracket::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.box-bracket::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

18. チェックボックス風リスト枠

  • メリットや特徴の羅列に最適
  • 箇条書きが綺麗にまとまる
  • 疑似要素でチェックマークを自動付与

HTML

<div class="box-checklist">
  <ul>
    <li>メリットや特徴の羅列に最適</li>
    <li>箇条書きが綺麗にまとまる</li>
    <li>疑似要素でチェックマークを自動付与</li>
  </ul>
</div>

CSS

.box-checklist {
  padding: 1.5em;
  border: 2px solid #28a745;
  border-radius: 5px;
  background-color: #f4fff6;
  color: #155724;
}
.box-checklist ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.box-checklist li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}
.box-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

19. アラート・警告風（赤色）

【注意】 ここにテキストが入ります。絶対に読んでほしい重要な注意事項や、エラーメッセージなどに適しています。

HTML

<div class="box-alert">
  <strong>【注意】</strong>
  ここにテキストが入ります。
</div>

CSS

.box-alert {
  padding: 1.5em;
  background-color: #fff3f3;
  border-left: 6px solid #dc3545;
  color: #721c24;
  border-radius: 4px;
}
.box-alert strong {
  display: block;
  margin-bottom: 0.5em;
  color: #dc3545;
}

20. ワンポイントアイコン風（左上円）

ここにテキストが入ります。左上に丸いアイコン（疑似要素）を配置し、視線を誘導するテクニックです。

HTML

<div class="box-icon">ここにテキストが入ります。</div>

CSS

.box-icon {
  position: relative;
  padding: 2em 1.5em 1.5em;
  border: 2px solid #ff9900;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  margin-top: 20px;
}
.box-icon::before {
  content: "!";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-color: #ff9900;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;
}

一覧へ!