資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

CSS囲み枠・ボックスデザイン集｜注釈・注意枠コピペ

CSS

生徒

記事の中で注意書きやポイントを目立たせたいんですが、良い囲み枠のコードありますか？

ペン博士

あるよ！左ボーダー強調・アイコン付き注意枠・タイトル付きラベルなど、用途別に用意した。色分けすれば情報の種類も伝わるよ。

「記事の中でポイントや注意事項を目立たせたい」「テキストをただ太字にするだけじゃなく、囲み枠で強調したい」——Webコンテンツを書いていると、こういう場面は必ず出てきます。

囲み枠（ボックスデザイン）はブログ・LPのどちらでも使用頻度が高いパーツですが、「なんとなく枠を引いただけ」のデザインはかえって読みにくくなることもあります。色・太さ・アイコン・背景色の組み合わせを使い分けることで、読者に「重要度の違い」を直感的に伝えられます。

この記事では、CSSだけで作れる囲み枠・ボックスデザインを10種以上、コピペで使えるコードとともに解説します。基本のボーダー枠から、左ボーダー強調（info/warning/success色分け）・タイトル付き囲み・点線・二重線・背景色付き注釈・アイコン付き注意枠まで、実務でそのまま使えるデザインセットです。

  • 基本ボーダー枠と角丸＋影のモダンな書き方
  • 左ボーダー強調枠のinfo/warning/success色分けパターン
  • タイトル付き囲み（タブ・ラベル風）の実装方法
  • 点線・二重線・破線ボーダーの使い分け
  • 背景色付き注釈・引用風ボックスのコード
  • アイコン付き注意枠（Flexboxレイアウト）
  • 用途別使い分け比較表
目次

CSS囲み枠の基本構造を理解する

囲み枠の作り方

CSS囲み枠の基本は border・padding・border-radius・background の4プロパティです。これにposition絡みのテクニックを加えることで、タイトル付き囲みやラベル付き枠が実現できます。

まず土台となるベーススタイルを定義しておくと、バリエーションを追加するときに差分だけ書けばよくなります。

/* 囲み枠のベーススタイル */
.box {
  padding: 20px 24px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.8;
  margin: 24px 0;
}

囲み枠デザイン10種以上——コピペコード集

囲み枠バリエーション

【01】基本のボーダー枠

もっともシンプルな囲み枠です。borderを1px solidで引くだけ。テキストコンテンツの補足情報に使います。

<div class="box box-basic">
  ここに補足情報やポイントテキストを書きます。
</div>
.box-basic {
  border: 1px solid #ccc;
  padding: 20px 24px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.8;
  background: #fff;
}

【02】角丸＋ドロップシャドウのモダン枠

border-radiusを大きくして角丸にし、box-shadowで浮き上がったように見せるカードスタイルです。LPの特徴紹介やサービス説明によく使われます。

<div class="box box-card">
  <p>カードスタイルのボックスです。影が付いて立体感が出ます。</p>
</div>
.box-card {
  padding: 24px 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.8;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

【03】左ボーダー強調枠（info / warning / success 色分け）

左側だけborderを太く色付けして注目度を上げるデザインです。ポイント（青）・注意（黄/橙）・成功・重要（赤）の色分けで、読者が内容の重要度を直感的に判断できます。

<div class="box box-left box-info">
  <strong>ポイント：</strong>左ボーダー強調のinfoボックスです。
</div>

<div class="box box-left box-warning">
  <strong>注意：</strong>黄色系のwarningボックスです。
</div>

<div class="box box-left box-success">
  <strong>成功：</strong>緑系のsuccessボックスです。
</div>

<div class="box box-left box-danger">
  <strong>重要：</strong>赤系のdangerボックスです。
</div>
/* 左ボーダー強調の共通スタイル */
.box-left {
  padding: 16px 20px;
  border-left: 5px solid;
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  line-height: 1.8;
  margin: 20px 0;
}

/* Info（青） */
.box-info {
  border-color: #4a90d9;
  background: #eef5fc;
  color: #1a3a5c;
}

/* Warning（橙・黄系） */
.box-warning {
  border-color: #e8a000;
  background: #fff8e1;
  color: #5a3e00;
}

/* Success（緑） */
.box-success {
  border-color: #28a745;
  background: #eafaf1;
  color: #1a4d2e;
}

/* Danger（赤） */
.box-danger {
  border-color: #dc3545;
  background: #fdf2f3;
  color: #5c1a20;
}

【04】タイトル付き囲み枠（ラベル風）

枠の左上に「ポイント」「注意」などのラベルを配置したデザインです。position: absolute でラベルを本体の上辺に乗せます。本体には position: relative と padding-top を設定してラベル分のスペースを確保します。

<div class="box box-titled">
  <span class="box-label">ポイント</span>
  <p>タイトルラベル付きの囲み枠です。上辺にラベルが乗ります。</p>
</div>
.box-titled {
  position: relative;
  padding: 42px 22px 20px;
  border: 2px solid #4a90d9;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  background: #fff;
  margin-top: 12px;
}

.box-label {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #4a90d9;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 14px;
  border-radius: 6px 0 6px 0;
  letter-spacing: 0.05em;
}

【05】タイトルが上辺にまたがるタブ風ボックス

枠の上辺全体にタイトル帯を張ったタブ（ヘッダー付きカード）スタイルです。ブログのコラムボックスや補足情報のまとめに向いています。

<div class="box-tab">
  <div class="box-tab-header">確認事項</div>
  <div class="box-tab-body">
    <p>タブ風のヘッダー付きボックスです。ブログの補足情報やまとめに使えます。</p>
  </div>
</div>
.box-tab {
  border: 1px solid #4a90d9;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}

.box-tab-header {
  background: #4a90d9;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 18px;
  letter-spacing: 0.05em;
}

.box-tab-body {
  padding: 18px 22px;
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

【06】点線ボーダーの囲み枠

border-style: dashed で点線の囲み枠を作ります。堅すぎない補足情報・メモ的な内容に向いています。

<div class="box box-dashed">
  点線ボーダーの囲み枠です。メモや補足情報に使えます。
</div>
.box-dashed {
  border: 2px dashed #aaa;
  padding: 18px 22px;
  border-radius: 6px;
  background: #fafafa;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

/* 色付き点線 */
.box-dashed-blue {
  border: 2px dashed #4a90d9;
  background: #f0f6ff;
  color: #1a3a5c;
}

/* 二重線 */
.box-double {
  border: 3px double #999;
  padding: 18px 22px;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
}

【07】背景色付き注釈ボックス（全4色）

背景色で内容を区別するシンプルなボックスです。ボーダーなしで背景色だけを使うと柔らかい印象になります。

<div class="box box-bg-blue">青系の背景色ボックス（info）</div>
<div class="box box-bg-yellow">黄系の背景色ボックス（注意）</div>
<div class="box box-bg-green">緑系の背景色ボックス（成功/OKサイン）</div>
<div class="box box-bg-pink">ピンク系の背景色ボックス（重要）</div>
.box-bg-blue {
  padding: 16px 20px;
  border-radius: 6px;
  background: #ddeeff;
  color: #1a3a5c;
  font-size: 15px;
  line-height: 1.8;
}

.box-bg-yellow {
  padding: 16px 20px;
  border-radius: 6px;
  background: #fff9c4;
  color: #5a4000;
  font-size: 15px;
  line-height: 1.8;
}

.box-bg-green {
  padding: 16px 20px;
  border-radius: 6px;
  background: #d4edda;
  color: #155724;
  font-size: 15px;
  line-height: 1.8;
}

.box-bg-pink {
  padding: 16px 20px;
  border-radius: 6px;
  background: #fde8ec;
  color: #7b1928;
  font-size: 15px;
  line-height: 1.8;
}

【08】アイコン付き注意枠（Flexboxレイアウト）

左側にアイコン（絵文字またはSVG）を置き、右側にテキストを配置するFlexboxレイアウトのボックスです。視認性が高く、注意・ポイント・チェックなどに使われます。

<!-- 注意枠（⚠️アイコン） -->
<div class="box-icon box-icon-warning">
  <span class="box-icon-mark" aria-hidden="true">⚠️</span>
  <div class="box-icon-body">
    <strong>注意：</strong>この設定を変更すると、既存データに影響する場合があります。
  </div>
</div>

<!-- ポイント枠（💡アイコン） -->
<div class="box-icon box-icon-info">
  <span class="box-icon-mark" aria-hidden="true">💡</span>
  <div class="box-icon-body">
    <strong>ポイント：</strong>このCSSはWordPress（SWELL）の子テーマに追記するだけで使えます。
  </div>
</div>

<!-- チェック枠（✅アイコン） -->
<div class="box-icon box-icon-success">
  <span class="box-icon-mark" aria-hidden="true">✅</span>
  <div class="box-icon-body">
    <strong>完了：</strong>設定が正常に保存されました。
  </div>
</div>
.box-icon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  margin: 20px 0;
}

.box-icon-mark {
  font-size: 22px;
  line-height: 1.4;
  flex-shrink: 0;
}

.box-icon-body {
  flex: 1;
}

.box-icon-warning {
  background: #fff8e1;
  border-left: 4px solid #e8a000;
  color: #5a3e00;
}

.box-icon-info {
  background: #eef5fc;
  border-left: 4px solid #4a90d9;
  color: #1a3a5c;
}

.box-icon-success {
  background: #eafaf1;
  border-left: 4px solid #28a745;
  color: #1a4d2e;
}

【09】引用風ボックス（blockquoteスタイル）

引用や要約テキストを視覚的に区別する引用風ボックスです。左側の太いボーダーとグレー系の背景色がクラシックなquoteの雰囲気を出します。

<blockquote class="box-quote">
  CSSは「カスケーディング・スタイルシート」の略で、HTMLで作られたWebページの見た目を定義するためのスタイルシート言語です。
  <cite>— MDN Web Docs</cite>
</blockquote>
.box-quote {
  margin: 20px 0;
  padding: 20px 24px;
  border-left: 6px solid #ccc;
  background: #f9f9f9;
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  font-style: italic;
}

.box-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #888;
  font-style: normal;
}

/* 大きいクォーテーションマーク付き版 */
.box-quote-fancy {
  position: relative;
  margin: 20px 0;
  padding: 24px 24px 20px 60px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

.box-quote-fancy::before {
  content: "C"; /* 開始クォート記号 */
  position: absolute;
  top: 0px;
  left: 16px;
  font-size: 72px;
  color: #ccc;
  font-family: Georgia, serif;
  line-height: 1;
}

【10】上下2色の帯付きボックス

ボックス上部に色帯を入れるデザインです。::before疑似要素で帯を作るか、border-topを太くする方法が使えます。

<div class="box box-top-accent">
  上部に色帯が入るアクセントボックスです。
</div>
.box-top-accent {
  padding: 20px 22px;
  border: 1px solid #ddd;
  border-top: 4px solid #4a90d9;
  border-radius: 0 0 8px 8px;
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
}

/* 下部に色帯 */
.box-bottom-accent {
  padding: 20px 22px;
  border: 1px solid #ddd;
  border-bottom: 4px solid #28a745;
  border-radius: 8px 8px 0 0;
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
}

【11】グラデーション背景ボックス

LPやサービスサイトで使われる、背景にグラデーションを入れたリッチなボックスです。CTA周辺やキャンペーン情報の強調に向いています。

.box-gradient {
  padding: 24px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
}

/* ピンク〜オレンジ系グラデーション */
.box-gradient-warm {
  padding: 24px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
}

/* ブランドカラー版（ピンク系） */
.box-gradient-brand {
  padding: 24px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EFBDB7 0%, #d16176 100%);
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
}

【12】SWELLの装飾ブロックとの組み合わせ方

SWELLテーマでは「ボックスデザイン」カスタムブロックが標準搭載されています。管理画面でスタイルを選択するだけで使えますが、子テーマのstyle.cssに独自クラスを追加することで、SWELLブロックにはないデザインを自由に追加できます。

/* SWELLのwp-block-groupに独自スタイルを上書き追加 */
.wp-block-group.is-style-custom-left-border {
  border-left: 5px solid #d16176;
  background: #fff5f6;
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
}

/* SWELLの「囲み枠」ブロックの色をカスタマイズ */
.swell-block-box {
  border-color: #d16176 !important;
}

.swell-block-box .swell-block-box__label {
  background: #d16176 !important;
}

レスポンシブ対応

スマホ対応のコツ

囲み枠はスマートフォンでも問題なく表示されることがほとんどですが、アイコン付きボックスのアイコンサイズやpadding値はモバイルで調整しておくと読みやすくなります。

@media (max-width: 640px) {
  .box,
  .box-left,
  .box-icon,
  .box-card {
    padding: 14px 16px;
    font-size: 14px;
  }

  .box-icon-mark {
    font-size: 18px;
  }

  .box-tab-header {
    font-size: 13px;
    padding: 8px 14px;
  }

  .box-tab-body {
    padding: 14px 16px;
    font-size: 14px;
  }
}

用途別・ボックスデザイン使い分け比較表

囲み枠の使い分け

どのデザインをどの場面に使えばよいか、一覧で確認できます。

ボックス種別 主な用途 視覚的印象 向いているコンテンツ
基本ボーダー枠 汎用補足情報 シンプル・落ち着き 解説の補足・関連情報
角丸＋影（カード） 特徴紹介・メリット列挙 モダン・高級感 LP・サービス紹介
左ボーダー info（青） ポイント・豆知識 信頼感・情報感 技術ブログ・解説記事
左ボーダー warning（黄） 注意・警告 注意喚起・慎重さ 操作手順・設定変更前の注意
左ボーダー success（緑） 完了・成功・推奨 安心・肯定感 導入ガイド・完了確認
タイトル付き囲み 重要ポイントの強調 整理感・メリハリ まとめ記事・チュートリアル
タブ風ヘッダー付き セクション内の補足 カード感・まとまり コラム・FAQ内の解説
点線ボーダー メモ・補足・仮情報 柔らかい・非公式感 作業メモ・仮入力欄の説明
背景色ボックス 種別別の区分け カラフル・わかりやすい 複数種別の情報を並べる
アイコン付き注意枠 強い注意・重要警告 視認性最高 手順の注意事項・禁止事項
引用風ボックス 引用・定義・要約 落ち着き・権威感 定義紹介・公式情報の引用
グラデーション背景 CTA・キャンペーン強調 華やか・インパクト LP・申し込み誘導周辺

まとめ

囲み枠・ボックスは、基本ボーダー・左ボーダー強調・アイコン付き注意枠など用途別に型があります。ポイントは①info・warning・successなど色で意味を伝える②アイコン付きはFlexboxで整える③paddingとborder-radiusでトーンを揃える、の3点。12種類以上をコピペで用意したので、記事の注釈やポイント整理に使ってください。

よくある質問（FAQ）

CSSの囲み枠をWordPressで使うにはどうすればいいですか？

SWELLテーマを使っている場合は、子テーマの style.css にCSSを追加し、ブロックエディタのカスタムHTMLブロックでHTMLを貼り付けるのが最も簡単です。または「追加CSSクラス」機能でWPのグループブロックや段落ブロックにクラスを付与する方法もあります。プラグインなしでCSSを追加したい場合は「外観 → カスタマイズ → 追加CSS」からも入力できます。

left-borderだけの枠でborderが付いてしまいます。

ブラウザのデフォルトスタイルや、テーマのCSSが border: 1px solid #ccc などを全要素に適用している場合があります。border: none を先に宣言してからリセットし、必要な辺だけ指定する書き方で解決できます：border: none; border-left: 5px solid #4a90d9;

box-shadowで囲み枠の影が切れて表示されます。

親要素に overflow: hidden が指定されていると、box-shadowが外に出られずに切れます。影がある要素の親のoverflowを確認して削除するか、overflow: visible に変更してください。もしくは親の padding を増やして影が切れないスペースを確保します。

タイトル付き囲み枠のラベルがはみ出します。

ボックス本体に margin-top: 12px 程度を指定して、ラベルが上に飛び出せるスペースを確保してください。ラベル自体は position: absolute; top: -1px; などで上辺にかかるように配置します。ボックス全体を overflow: visible にしておくことも忘れずに。

モバイルで左ボーダー枠のテキストが読みにくいです。

左ボーダーの幅分だけpaddingが少なくなるため、スマートフォンでは padding-left を少し増やすと読みやすくなります。また、背景色と文字色のコントラスト比がWCAGの基準（4.5:1以上）を満たしているか確認してください。淡い背景に淡いテキストを組み合わせると視認性が下がります。

あわせて読みたい関連記事

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！WithAI

今なら完全無料でAIを学べる！

  • 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
  • スマホ・PCどちらでもOK：好きな時間に学習できる
  • 料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート
CSS

この記事を書いた人

田中誠のアバター 田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

関連記事

  1. ホーム
  2. プログラミング
  3. CSS
  4. CSS囲み枠・ボックスデザイン集｜注釈・注意枠コピペ

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次