CSSボックスデザインの使い方は？

公開されているボックスデザインを使いたい場合は、HTMLとCSSのコードをコピペするだけで活用できます。

コピペOK！CSSボックスデザインサンプル17選

Q: ボックスデザインの色は変更できますか？

変更可能です。例えば、背景色や文字色は以下のカラーコードを変更するだけで好きな色で表示できます。背景色background-color: #カラーコード;文字色color: #カラーコード;

2025.09.12

Webデザイン

#CSS

ボックスデザインとは、Webページ上で文字などを囲む枠のデザインのことです。

視覚的に整理されたボックスデザインは、ユーザー体験を向上させ、結果的にSEOにも好影響を与えます。
情報が分かりやすいと滞在時間が延び、回遊率が向上するため、検索エンジンの評価が高まります。ボックスを使った整理されたデザインは、SEOにおいて重要なポイントです。

この記事では、弊社が実際に活用するボックスデザインを紹介します。すぐに使えるシンプルなデザインですので、ぜひ参考にしてみてください。

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

サイト運営の全体像を俯瞰して確認できる
現状の課題がどこにあるか明確になる
今後やるべき施策の優先順位がつけやすい
初心者でも分かりやすい項目設定
PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

目次

ボックスを表示させる方法

囲み枠を表示するためには、HTMLとCSSが必須です。

コードを書くとなると難しそうですね…

コピペで対応できるから、やり方さえ知っていれば初心者でも簡単にできるよ！

HTMLとCSSの編集方法

① HTMLをコピペする

公開されているHTMLのコードをコピーし、ボックスを入れたい箇所に貼り付けます。

② CSSをコピペする

後ほど紹介するものや、他のWebサイトでも気に入ったボックスデザインがあれば、公開されているCSSをコピーして、ブログやオウンドメディアのCSSファイルに貼り付けます。

WordPressやはてなブログ、アメブロなど、使用しているサービスごとに貼り付け場所が異なるため、事前にチェックしておきましょう。

CSSは、同じ箇所に複数のデザインを指定する場合、ファイル内の下に貼り付けるほど優先順位が高くなることを覚えておこう！

③ 表示を調整する

プレビューモードなどで実際の表示を確認しましょう。余白などのバランスが崩れている場合は、都度調整してください。

色の変更方法

上記で紹介したように、ボックスデザインはそのままコピペで使うことが可能です。

少し変化させたい場合は、色を変更することもできます。例えば、CSSでよく使う項目として以下が挙げられます。

背景色	background-color: #カラーコード;
文字色	color: #カラーコード;

カラーコードを変更すれば、自身のWebサイトに合ったボックスデザインにできます。

カラーコードの調べ方

カラーコードとは、HTMLやCSSで色を指定するための色の符号体系のことです。使いたい色を探す際は、以下のようなサイトが役立ちます。

シンプルなボックスデザイン

ここからは、ブログやオウンドメディアなどで使えるボックスデザインを紹介します。

HTML＋CSSだけで構成しているため、コピペで簡単にご利用いただけます。

design 1
角丸ボックス

HTML

<div class="box-design1">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design1 {
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #4c9ac0;
  border-radius: 20px;
}

design 2
上下点線ボックス

HTML

<div class="box-design2">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design2 {
  margin: 20px auto;
  padding: 20px;
  border-top: 3px dotted #4c9ac0;
  border-bottom: 3px dotted #4c9ac0;
}

design 3
背景ボックス

HTML

<div class="box-design3">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design3 {
  margin: 20px auto;
  padding: 20px;
  background-color: #e1eef5;
}

design 4
斜めストライプ背景ボックス

HTML

<div class="box-design4">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design4 {
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  background: repeating-linear-gradient( -45deg, #eaf3f8, #eaf3f8 5px, #fff 5px, #fff 13px );
}

design 5
ノート風ボックス

HTML

<div class="box-design5">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design5 {
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  background-image:  linear-gradient(#e1eef5 1px, transparent 1px), linear-gradient(to right, #e1eef5 1px, #fff 1px);
  background-size: 20px 20px;
}

design 6
ノート風ボックス

HTML

<div class="box-design6">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design6 {
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #4c9ac0;
  position: relative;
}
.box-design6 p {
  background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #4c9ac0 100%);
    background-size: 8px 100%, 100% 2.5em;
    line-height: 2.5;
    margin: 0;
}

design 7
左ラインボックス

HTML

<div class="box-design7">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design7 {
  margin: 20px auto;
  padding: 20px;
  background-color: #f3f2f3;
  border-left: 10px solid #4c9ac0;
}

design 8
影付きボックス

HTML

<div class="box-design8">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design8 {
  margin: 20px auto;
  padding: 20px;
  background-color: #e1eef5;
  box-shadow: 7px -7px #4c9ac0;
}

design 9
ずらし影ボックス

HTML

<div class="box-design9">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design9 {
  margin: 20px auto;
  padding: 20px;
  background-color: transparent;
  border: 2px solid #343434;
  position: relative;
}
.box-design9::after {
  content: '';
  background-color: #e1eef5;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -7px;
  left: 7px;
  z-index: -1;
}

design 10
角丸・影付きボックス

HTML

<div class="box-design10">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design10 {
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

design 11
ステッチボックス

HTML

<div class="box-design11">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design11 {
  margin: 20px auto;
  padding: 20px;
  background: #b2d3e4;
  box-shadow: 0 0 0 10px #b2d3e4;
  border: 2px dashed #fff;
}

design 12
角がめくれた紙風

HTML

<div class="box-design12">
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design12 {
  margin: 20px auto;
  padding: 20px;
  background-color: #e1eef5;
  position: relative;
}
.box-design12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #4c9ac0 #fff #4c9ac0;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15)
}

サブタイトル付きのボックスデザイン

design 13
枠線とタイトルボックス

HTML

<div class="box-design13">
  <h3 class="box-design13-ttl">SEOタイムズとは？</h3>
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design13 {
  margin: 20px auto;
  padding: 20px;
  border: 2px dashed #4c9ac0;
  position: relative;
}
.box-design13-ttl {
  position: absolute;
  top: -15px;
  left: 20px;
  background-color: #fff;
  padding: 0 0.5em;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

design 14
ラベルタイトルボックス

HTML

<div class="box-design14">
  <h3 class="box-design14-ttl">SEOタイムズとは？</h3>
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design14 {
  margin: 20px auto 20px 20px;
  padding: 20px;
  border: 2px solid #434343;
}
.box-design14-ttl {
  position: relative;
  left: -40px;
  background-color: #4c9ac0;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}

design 15
上部の横幅いっぱいにタイトル

HTML

<div class="box-design15">
  <h3 class="box-design15-ttl">SEOタイムズとは？</h3>
  <div class="box-design15-txt">
    <p>
      SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
    </p>
    <p>
      "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
    </p>
  </div>
</div>

CSS

.box-design15 {
  margin: 20px auto;
}
.box-design15-ttl {
  background-color: #4c9ac0;
  color: #fff;
  padding: 0.5em 20px;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.box-design15-txt {
  padding: 10px 20px;
  border: 2px solid #4c9ac0;
}

design 16
枠線の上にタイトル

HTML

<div class="box-design16">
  <h3 class="box-design16-ttl">SEOタイムズとは？</h3>
  <div class="box-design16-txt">
    <p>
      SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
    </p>
    <p>
      "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
    </p>
  </div>
</div>

CSS

.box-design16 {
  margin: 20px auto;
}
.box-design16-ttl {
  background-color: #4c9ac0;
  color: #fff;
  padding: 0.5em 20px;
  width: fit-content;
  border-radius: 10px 10px 0 0;
  margin: 0;
  font-size: 17px;
  font-weight: bold;
}
.box-design16-txt {
  padding: 10px 20px;
  border: 2px solid #4c9ac0;
}

design 17
吹き出し風のタイトルボックス

HTML

<div class="box-design17">
  <h3 class="box-design17-ttl">SEOタイムズとは？</h3>
  <p>
    SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。
  </p>
  <p>
    "初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
  </p>
</div>

CSS

.box-design17 {
  margin: 40px auto 20px;
  padding: 30px 20px 10px 20px;
  border: 2px solid #4c9ac0;
}
.box-design17-ttl {
  background-color: #4c9ac0;
  color: #fff;
  border-radius: 100vh;
  padding: 10px 1.5em;
  margin: -55px 0 0 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.box-design17-ttl::after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  border: 15px solid transparent;
  width: 0;
  height: 0;
  border-top-color: #4c9ac0;
}

よくある質問

CSSボックスデザインの使い方は？: 公開されているボックスデザインを使いたい場合は、HTMLとCSSのコードをコピペするだけで活用できます。

ボックスデザインの色は変更できますか？

変更可能です。

例えば、背景色や文字色は以下のカラーコードを変更するだけで好きな色で表示できます。

背景色	background-color: #カラーコード;
文字色	color: #カラーコード;

コピペで使えるデザインサンプル一覧

SEOタイムズではボックスデザインのほかにも、見出しやリボン風の装飾、画像加工のデザインを紹介しています。

コピペで使えるデザインを豊富に紹介していますので、ぜひご覧ください！

まとめ

この記事では、シンプルで使いやすいボックスデザインを紹介しました。

初心者には難しいと思われがちですが、紹介したHTML・CSSをコピペするだけで自身のWebサイトに取り入れることができます。

CSSを覚えれば、様々なデザインを取り入れられるよ。

これでよりユーザーが見やすいページを作れそうです！

そのまま利用することはもちろん、線の太さや背景の色を自由に変えることもできるため、ぜひWebサイトの雰囲気に合わせて活用してみてください。

この記事を書いた人

SEO Writer / SEOタイムズ編集部

SEOタイムズ編集部は、最新のSEOを軸にWebマーケティング全般を横断するプロフェッショナル集団です。チーム内には、検索アルゴリズムの研究者、エンジニア、生成AI・LLMOの利活用を研究するデータサイエンティスト、そしてGoogle 検索品質評価ガイドラインを深掘りしてきた専任リサーチャーが在籍。

これまでに累計 3,000本を超えるSEO記事を制作し、膨大な順位データを活かしたソリューションを提供してきました。上位表示の成功、失敗パターンを学び、CTR・CVR などの実測値と自社ツールから得られた独自ナレッジを日々アップデートしています。

【ミッション】
「検索体験を進化させる知識とツールを Web 担当者へ届ける」

生成AI が検索行動を塗り替える時代でも、私たちは “数字で裏付けた SEO ノウハウ” にこだわります。段階的な品質フローを経て、今すぐ取り組める戦略とツールを読者の皆様にお届けします！

前の記事へ

SEO記事一覧へ

次の記事へ