今回はWebページ用のおしゃれなボックスデザイン例を30個紹介します。HTMLとCSSのコピペで使えます。画面幅に合わせて伸縮しますが、長い文章やタイトルを入れる場合は余白や文字サイズを調整してください。

あわせて読みたいCSSが効かない・反映されないときの対処法まとめ

CSSがうまく反映されないときはこちらの記事を参考にしてみてください。

使い方

HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。
スキップ

手順1：CSSをコピペ

のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。自作サイトならCSSファイルに、ブログならサービスやテーマのCSS追加機能に貼り付けます。既存のCSSと同じセレクターがある場合は、名前を変えるなどして競合を避けてください。

CSSを追加する場所

  • 自作サイト：読み込まれているCSSファイルに追加します。
  • WordPress：利用中のテーマに応じて、カスタマイザーの「追加CSS」かサイトエディターのカスタムCSSを使います。
  • ブログサービス：公式ヘルプで現在のCSS追加方法を確認します。

※テーマやサービスによって入力場所は異なります。テーマ本体のファイルを直接変更すると、更新時に変更が消える場合があります。

手順2：挿入したい部分にHTMLを貼り付け

記事内にボックスを挿入したいときには、HTML編集モードなどにしたうえで、HTMLタグをまるっと貼り付けます。これでボックスが表示されるかと思います。余白などのバランスが崩れてしまったときは、以下の記事を参考にCSSを修正してみてください。

あわせて読みたいCSSのmarginとは？paddingとは？余白の指定方法まとめ

シンプルな囲み枠

1. 実線で囲むだけ

少し太めの線で囲んだだけの枠です。シンプルなモノクロのデザインであれば良いかもしれませんが、華やかな見た目にしたいときには少し物足りないですね。

コードを表示
HTML
<div class="box1">
    <p>ここに文章</p>
</div>
CSS
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

2. 角丸

色を変え、角を丸くしてみました。文字色や線色、角の丸み具合は必要に応じて変えてください。

コードを表示
HTML
<div class="box2">
    <p>ここに文章</p>
</div>
CSS
.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

3. 背景塗りつぶし

線は使わずに背景を塗りつぶすだけにしてみました。背景色は好みで変えてくださいませ。

コードを表示
HTML
<div class="box3">
    <p>ここに文章</p>
</div>
CSS
.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

4. 上下にだけ線

塗りつぶしに加えて、上下に太めの線を足してみました。線と背景とで相性の良い色を選ぶことが重要です。

コードを表示
HTML
<div class="box4">
    <p>ここに文章</p>
</div>
CSS
.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}

5. 二重線の枠

二重線の枠です。borderプロパティーで「double」を指定することで簡単に作ることができます。

コードを表示
HTML
<div class="box5">
    <p>ここに文章</p>
</div>
CSS
.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    border: double 5px #4ec4d3;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

6. 破線のボックス

囲み枠を破線にしてみました。線の太さは好みで変えてください（CSSのborder:dashed 2px...の値を調節するだけです）。

コードを表示
HTML
<div class="box6">
    <p>ここに文章</p>
</div>
CSS
.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}

7. 左右二重線

左右にだけ二重線をつけてみたものです。サイトのデザインに合わせて色を変えることをおすすめします。

コードを表示
HTML
<div class="box7">
    <p>ここに文章</p>
</div>
CSS
.box7{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/
}
.box7 p {
    margin: 0; 
    padding: 0;
}

8. 左にだけ太線

付箋風のボックスデザインです。記事内の重要なポイントや補足事項を書くために使うと良いかもしれません。

コードを表示
HTML
<div class="box8">
    <p>ここに文章</p>
</div>
CSS
.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box8 p {
    margin: 0; 
    padding: 0;
}

9. 上にだけ太線

こちらは上にだけ線をつけてみた場合です。背景と線/文字の色を全体的に同系統色でまとめるのがポイントです。

コードを表示
HTML
<div class="box9">
    <p>ここに文章</p>
</div>
CSS
.box9 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    border-top: solid 10px #ff7d6e;
}
.box9 p {
    margin: 0; 
    padding: 0;
}

10. 影をつけた場合

影をつけて少し浮いたように見せています。ミント風の配色にしていますが、背景は白やグレイでも良いでしょう。

コードを表示
HTML
<div class="box10">
    <p>ここに文章</p>
</div>
CSS
.box10 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #00BCD4;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box10 p {
    margin: 0; 
    padding: 0;
}

11. スマートなデザインに

枠線ではなく影によりボックス領域が分かるようにしています。上の線は左に配置しても良いでしょう（border-topをborder-leftに入れ替え）。

コードを表示
HTML
<div class="box11">
    <p>ここに文章</p>
</div>
CSS
.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

12. 分厚いボード風

背景より少し暗めの下線をつけることで、厚みを表現しています。少しボタンに見えてしまうのがネックですね。

コードを表示
HTML
<div class="box12">
    <p>ここに文章</p>
</div>
CSS
.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5989cf;
    background: #c6e4ff;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}

13. 影をつけた場合

影をつけてさらに立体感を出してみました。やや派手なので、本当に目立たせたい部分に使うと良いのかもしれません。

コードを表示
HTML
<div class="box13">
    <p>ここに文章</p>
</div>
CSS
.box13 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}

かわいいボックスデザイン

14. 布風

破線により布っぽさ・テープっぽさを表現してみました。かわいいデザインのブログやWebサイトに使うと良いでしょう。

コードを表示
HTML
<div class="box14">
    <p>ここに文章</p>
</div>
CSS
.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}

15. ピンクver

背景と線の色をピンクにして、角に大きめの丸みをつけると、さらにガーリーな印象のボックスデザインになります。

コードを表示
HTML
<div class="box15">
    <p>ここに文章</p>
</div>
CSS
.box15 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

16. ストライプ

背景を控えめな斜めストライプで塗りつぶしてみました。文字色を青〜水色っぽくしてもマッチするはずです。

コードを表示
HTML
<div class="box16">
    <p>ここに文章</p>
</div>
CSS
.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

おしゃれなデザイン

17. 交差線

縦と横の線が交差するデザインです。お好みで線の色をカラフルに変えても良いでしょう。

コードを表示
HTML
<div class="box17">
    <p>ここに文章</p>
</div>
CSS
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

18. 角に円形

ボックスの角でくるんと回転したような枠にしてみました。文字もカラフルな色にしても合うはずです。

コードを表示
HTML
<div class="box18">
    <p>ここに文章</p>
</div>
CSS
.box18{
    margin:2em 0;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0 3px 0;
}
.box18:before,.box18:after
{
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #ffcb8a;
    border-radius: 50%;
}
.box18:after {
    top:-12px;
    left:-12px;
}
.box18:before {
    bottom:-12px;
    right:-12px;
}
.box18 p {
    margin: 0; 
    padding: 0;
}

19. カギカッコ

大きめのカギカッコです。インタビューの名言などを強調するのに良いのではないでしょうか。

コードを表示
HTML
<div class="box19">
    <p>ここに文章</p>
</div>
CSS
.box19 {
    position: relative;
    padding:0.25em 1em;
}
.box19:before,.box19:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box19:before{
    border-left: solid 1px #5767bf;
    border-top: solid 1px #5767bf;
    top:0;
    left: 0;
}
.box19:after{
    border-right: solid 1px #5767bf;
    border-bottom: solid 1px #5767bf;
    bottom:0;
    right: 0;
}
.box19 p {
    margin: 0; 
    padding: 0;
}

20. 点線の大括弧

ボックスを点線の大カッコではさんだデザインです。CSSの「background:...」の部分をまるっと消せば背景を透明にすることができます。

コードを表示
HTML
<div class="box20">
    <p>ここに文章</p>
</div>
CSS
.box20 {
    position: relative;
    padding: 0.25em 1em;
    margin: 2em 0;
    top: 0;
    background: #efefef;
}
.box20:before, .box20:after{ 
    position: absolute;
    top: 0;
    content:'';
    width: 10px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.box20:before{
    border-left: dotted 2px #15adc1;
    border-top: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    left: 0;
}
.box20:after{
    border-top: dotted 2px #15adc1;
    border-right: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    right: 0;
}
.box20 p {
    margin: 0; 
    padding: 0;
}

21. グラデーション

橙から赤へのグラデーションで塗ってみました。かなり派手なので使いどころは限られそうです。

コードを表示
HTML
<div class="box21">
    <p>ここに文章</p>
</div>
CSS
.box21{
    padding: 0.5em 1em;
    background: linear-gradient(to right, #ffb03c, #ff708d);
    color: #FFF;
}
.box21 p {
    margin: 0; 
    padding: 0;
}

22. 紙風

画面上に紙が置かれているようなデザインです。一見「見出し」っぽいので使うときには注意が必要です。

コードを表示
HTML
<div class="box22">
    <p>ここに文章</p>
</div>
CSS
.box22{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #f4f4f4;
    border-left: solid 6px #5bb7ae;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
    margin: 0; 
    padding: 0;
}

23. 考えごと風

ぼんやりと考えごとをしているような吹き出しのデザインです。記事の内容を補足したいときに使うと効果的なはずです。

コードを表示
HTML
<div class="box23">
    <p>ここに文章</p>
</div>
CSS
.box23 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #fff0c6;
    border-radius: 30px;
}
.box23:before{content: '';
    display: block;
    border-radius: 50%;
    background: #fff0c6;
    position: absolute;
    width: 15px;
    height: 15px;
    left: -40px;
    bottom: 0;
}
.box23:after{
    content: '';
    display: block;
    border-radius: 50%;
    background: #fff0c6;
    position: absolute;
    width: 23px;
    height: 23px;
    left: -23px;
    bottom: 0;
}
.box23 p {
    margin: 0; 
    padding: 0;
}

24. 吹き出し

シンプルな吹き出しのボックスです。見出しとして使っても良いですね。

コードを表示
HTML
<div class="box24">
    <p>ここに文章</p>
</div>
CSS
.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}

25. めくれたテープ風

角がはがれかけたテープのようなデザインです。ゆるい雰囲気のサイトで使うのがおすすめです。

コードを表示
HTML
<div class="box25">
    <p>ここに文章</p>
</div>
CSS
.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}

タイトル付きボックス

26. 枠の途中にタイトル

POINT

ボックスの左上にタイトルを入れることができます。このタイトル部分が改行されるとデザインが崩れてしまうので、短めの文字にしましょう。

コードを表示
HTML
<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
CSS
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    font-family: Quicksand, sans-serif;
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

27. ラベルをつけたようなデザイン

POINT

タイトルラベルがボックスからはみ出るようなデザインです。重要なポイントなどを強調したいときに使うのがおすすめです。

コードを表示
HTML
<div class="box27">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
CSS
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    font-family: Quicksand, sans-serif;
    vertical-align: middle;
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

28. ボックス内にラベル

POINT

ラベルをボックス内の角に入れてみました。CSSの「left:~」という部分を「right:~」に書き換えればラベルを右上に配置することができます。

コードを表示
HTML
<div class="box28">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
CSS
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    font-family: Quicksand, sans-serif;
    vertical-align: middle;
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

29. タイトルを横いっぱいに広げた場合

POINT

タイトルの行をボックスの横いっぱいに広げるとより派手で目立つものになります。

コードを表示
HTML
<div class="box29">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>
CSS
.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-family: Quicksand, sans-serif;
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

30. さらに影をつけた場合

POINT

さきほどのものから配色を変えて、さらに影をつけてみました。POINTの左のチェックマークにはインラインSVGを使っています。

コードを表示
HTML
<div class="box30">
    <div class="box-title"><svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M9.37501 17.8127C9.11901 17.8127 8.86301 17.7147 8.66801 17.5197L4.29301 13.1448C3.90201 12.7538 3.90201 12.1217 4.29301 11.7308C4.68401 11.3398 5.31601 11.3398 5.70701 11.7308L9.37501 15.3988L18.293 6.48075C18.684 6.08975 19.316 6.08975 19.707 6.48075C20.098 6.87175 20.098 7.50375 19.707 7.89475L10.082 17.5197C9.88701 17.7147 9.63101 17.8127 9.37501 17.8127Z"/></svg> ここにタイトル</div>
    <p>ここに文章</p>
</div>
CSS
.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-family: Quicksand, sans-serif;
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}
.box30 .box-title svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
}

こちらの記事もどうぞ

ここまでボックスデザインを30個紹介してきました。よかったら以下の記事にも是非目を通してみてくださいませ。

あわせて読みたいコピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）