本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. カード・ボックス装飾
04 / CARD 12 パーツ

CSSカード・囲み枠デザイン 12選

コピペで使えるおしゃれなCSSカード・囲み枠のサンプル集。ブログの補足枠・注意枠から付箋風・チケット風まで、シャッフルで色・角丸のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-card-soft 形式です。

該当するパーツが見つかりませんでした。

ソフトカード

ソフトシャドウ

.bnto-card-soft {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: 24px;
}
使い方のコツ

白いページの上では輪郭が消えやすいので、薄いグレーやベージュ系の背景に置くと影が生きます。影の柔らかさは 30px（ぼかし量）で調整できます。

トップ罫

トップアクセント

.bnto-card-topbar {
  background: #fff;
  border-top: 5px solid hsl(5 100% 65%);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 24px;
}
使い方のコツ

上罫の色をカテゴリごとに変えると、カード一覧の分類が一目で伝わります。罫の太さは 5px の部分で調整。3〜6px がバランス良好です。

付箋メモ

付箋風（テープ付き）

.bnto-card-sticky {
  position: relative;
  background: hsl(45 100% 83%);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  transform: rotate(-2.5deg);
  padding: 24px;
}
/* 上部のテープ */
.bnto-card-sticky::before {
  content: ""; position: absolute;
  top: -12px; left: 50%;
  width: 90px; height: 24px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
使い方のコツ

テープは ::before なのでHTMLは1行のまま。傾きは rotate(-2.5deg) 程度が自然で、複数並べるときは角度を互い違いにするとリアルです。背景色は明度80%以上の淡い色が付箋らしく見えます。

枠線カード

アウトライン

.bnto-card-outline {
  background: #fff;
  border: 3px solid hsl(202 73% 56%);
  border-radius: 16px;
  padding: 24px;
}
使い方のコツ

影を使わないぶん軽い印象になり、テキスト主体のブログと好相性。枠を太く・角丸を大きくするほどポップに、細く・小さくするほどきっちりした印象になります。

コールアウト

コールアウト（左アクセント）

.bnto-card-callout {
  background: hsl(327 33% 94%);
  border-left: 5px solid hsl(327 53% 54%);
  border-radius: 12px;
  padding: 20px 24px;
}
使い方のコツ

ブログの「補足」「ポイント」枠の定番。背景色は左罫と同系色で明度90%以上の淡い色にすると、うるさくならずに読めます。意味的には <aside> タグを使うのもおすすめ。

グラデ枠

グラデ縁

/* linear-gradient(#fff,#fff) の白＝中身の背景色 */
.bnto-card-edge {
  border: 3px solid transparent;
  border-radius: 16px;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, hsl(41 100% 50%), hsl(5 100% 50%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 24px;
}
使い方のコツ

2枚の背景（中身用＋枠用）を重ねて枠だけをグラデにするテクニック。linear-gradient(#fff,#fff) の白は「カードの中身の色」なので、置く場所の背景が白以外ならその色に変更してください。枠の太さは border: 3px で調整できます。

ヘッダー帯

ヘッダー帯

.bnto-card-fill {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.bnto-card-fill .hd {
  background: hsl(202 73% 56%);
  color: #fff; font-weight: 700;
  padding: 10px 20px;
}
.bnto-card-fill .bd { padding: 18px 20px; }
使い方のコツ

「タイトル＋本文」の2段構成。親の overflow: hidden で帯が角丸からはみ出すのを防いでいます。料金表・お知らせ・手順の各ステップなど、見出しが必要な囲みに便利です。

フォーカス枠

フォーカスリング

.bnto-card-ring {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 3px hsl(258 47% 56% / 0.3),
              0 8px 22px rgba(0,0,0,.08);
  padding: 24px;
}
使い方のコツ

1つ目の box-shadow（広がり3px）がリング部分。border と違いレイアウト幅に影響しないので、「選択中のプラン」などの強調表示をCSSの付け外しだけで実現できます。

グラデ地

グラデ地

.bnto-card-gradient {
  color: #fff;
  background: linear-gradient(135deg, hsl(5 100% 65%), hsl(327 100% 65%));
  border-radius: 16px;
  box-shadow: 0 12px 28px hsl(5 100% 65% / 0.32);
  padding: 24px;
}
使い方のコツ

文字は白がベター。中間色で文字がぼやける場合はグラデの明度を落としてコントラストを確保してください。box-shadow をグラデの主要色に合わせると一体感が出ます。CTAエリアやおすすめプランの強調に。

メモ枠

点線メモ枠

.bnto-card-memo {
  background: #fff;
  border: 2px dashed hsl(202 73% 56%);
  border-radius: 12px;
  padding: 24px;
}
使い方のコツ

dashed（破線）は手書きメモ風、dotted（点線）はさらにカジュアルな印象。実線の囲みより「余談・補足」感が出るので、本文の流れを切らずに一言添えたいときに向いています。

チケット

チケット風

/* 両サイドの切り欠きは radial-gradient で表現 */
.bnto-card-ticket {
  background:
    radial-gradient(circle 10px at 0 50%, transparent 97%, hsl(43 100% 88%) 100%)
      left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 50%, transparent 97%, hsl(43 100% 88%) 100%)
      right / 51% 100% no-repeat;
  border-radius: 12px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
  padding: 22px 30px;
}
使い方のコツ

切り欠き部分はページの背景が透けて見える仕組み。影は box-shadow ではなく drop-shadow を使うのがポイントで、切り欠きの形に沿って影が付きます。穴の大きさは circle 10px で調整。クーポンやイベント告知に。

POINT
タイトル食い込み

タイトル食い込みボックス

.bnto-card-titled {
  position: relative;
  background: #fff;
  border: 2.5px solid hsl(150 58% 44%);
  border-radius: 14px;
  padding: 28px 24px 22px;
  margin-top: 14px; /* はみ出し分の余白 */
}
.bnto-card-titled .tl {
  position: absolute;
  top: -14px; left: 18px;
  background: hsl(150 58% 44%);
  color: #fff;
  font-weight: 700; font-size: 14px;
  padding: 3px 14px;
  border-radius: 999px;
}
使い方のコツ

枠線の上にタイトルが乗る、ブログの「POINT」「CHECK」枠の定番形。上に別の要素が密着していると食い込み部分が重なるため、margin-top は必ず残してください。ラベルの文言は自由に変えられます。

CSSカード・囲み枠デザインの基礎知識

カードや囲み枠は、ブログ記事の補足説明・注意書き・まとめを本文から視覚的に切り分けたり、料金プランやお知らせを整理して見せたりするための基本パーツです。このページでは「CSS 囲み枠 コピペ」でそのまま使えるカードデザインのCSSを12種類掲載しています。すべて画像なしのピュアCSSなので表示が速く、divにクラスを付けるだけで完成します。

実装はCSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけ。クラス名はすべて .bnto-card-〇〇 という独自プレフィックス付きのため、既存サイトのCSSと衝突しにくくなっています。

ブログ記事での囲み枠の使い分け

補足にはコールアウト（左アクセント）、軽い余談には点線メモ枠、重要ポイントのまとめにはタイトル食い込みボックス、と役割ごとにデザインを固定すると読者が迷いません。1記事で使う種類は2〜3種類までに絞るのが読みやすさのコツです。

影と枠線どちらを選ぶか

影（box-shadow）は浮遊感のあるモダンな印象で、薄い色の背景上でよく映えます。枠線（border）は軽くはっきり区切れるので、テキスト中心のページ向き。両方を強く効かせると過剰になるため、どちらかを主役にしましょう。

余白設計のコツ

カードの内側余白（padding）は20〜28px、本文の行間は1.7〜1.9が目安。囲みの外側にも margin で本文と同程度の余白を取ると、枠が窮屈に見えません。

よくある質問

囲み枠はどのHTMLタグで作ればいいですか？
基本は div で問題ありません。補足情報なら aside、引用なら blockquote など、内容の意味に合った要素に同じクラスを付けても同様に動きます。
WordPressなどのブログでも使えますか？
使えます。CSSタブのコードを「外観 > カスタマイズ > 追加CSS」やテーマのスタイルシートに貼り、記事側ではカスタムHTMLブロックにHTMLタブのコードを貼り付ければそのまま表示されます。
カードの中に見出しや画像を入れても大丈夫ですか？
大丈夫です。div の中身は自由に書けます。画像は width: 100% を指定すると枠にきれいに収まり、角丸からはみ出す場合はカード側に overflow: hidden を足してください。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「トップアクセント」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

カード・囲み枠と組み合わせて使いやすいパーツはこちら。

影・グラス ホバーアニメーション バッジ・タグ テーブル装飾