CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン

更新日 2021/08/22
カテゴリー CSSデザイン

CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルをご紹介します。

ブログ記事の主役はテキストですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさも改善されます。

ボックスがあるとおしゃれな雰囲気になるだけでなく、読者の目を引くことができますね

コピペだけで使えるので、ぜひ試してみてください。

Headline

コピペで使えるおしゃれなCSSボックスサンプル
まとめ

コピペで使えるおしゃれなCSSボックスサンプル

基本形はクラス名をつけた <div> のみです。

<div class="sample-box-1"> div 要素に囲まれた部分がボックスになります！ </div>

コピペ用の CSS コードをつけてご紹介していきますので、ブログのデザインに合わせてお好みで調整してください。

クラス名は sample-box-○ の数字だけ変更していきます。

背景色のみのシンプルなデザイン

まずは背景色がついただけのシンプルなボックスです。余白が少ないとギュウギュウした感じで読みづらいので、padding を多めにするとよいですよ。

.sample-box-1 {
    background-color: #eee;
    margin: 2em 0;
    padding: 2em;
}

シンプルなのでどんなデザインにも合います

背景と文字を同系色にしたデザイン

カラーを調整する場合は、背景と文字を同系色にするとおしゃれ感が増します。

.sample-box-2 {
    background-color: #e7efff;
    color: #1c66fe;
    margin: 2em 0;
    padding: 2em;
}

背景を薄い青、文字を濃い青にするとこうなります

0 to 255 というジェネレーターを使うと、同系色のコードが簡単にわかるので便利！

Color Picker Tool | 0to255

Choose colors for your logo, website, business, room, or print design project. Adjust colors quickly and easily.

www.0to255.com

borderで枠線をつけたデザイン

つづいて、枠線をつけたオーソドックスなボックスです。

border の種類を solid から double などに変えるだけでも雰囲気が違います。

.sample-box-3 {
    border: 4px double #ddd;
    margin: 2em 0;
    padding: 2em;
}

border に double を指定した囲み枠

背景色＋枠線のデザイン

背景色をつけて border を左側だけにつけるデザインもよく見ますね。

.sample-box-4 {
    background-color: #fbeefc;
    border-left: 8px solid #c92ad2;
    color: #c92ad2;
    margin: 2em 0;
    padding: 2em;
}

背景色＋左ボーダーのデザイン

ボックスではなく、見出しで使うのもありです。

枠線をボックスから少し離したようなデザイン

背景色をつけたボックスと枠線の間を少し空けたいときは、box-shadow を使ってみましょう。

.sample-box-5 {
    background-color: #cafbce;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #cafbce;
    color: #0a8915;
    margin: 2em 0;
    padding: 2em;
}

枠線が少し離れているのでおしゃれに見えます

余白に見える部分は白の border です。border と box-shadow の太さを同じにするとキレイに仕上がります。

可愛さを演出するステッチ風デザイン

最近よく見かけるようになったステッチ風デザインも、border と box-shadow を組み合わせて作ることができます。

.sample-box-6 {
    background-color: #8d1e47;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #8d1e47;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
}

女子ブログにピッタリなステッチ風ボックス

border-radius でちょっとだけ角を丸くするのがポイント。色を変えるときは、background-color と box-shadow の色をそろえてください。

紙の端を折り返したようなドッグイヤー風デザイン

::after という疑似要素を使ってドッグイヤー風のボックスを作ってみましょう。

.sample-box-7 {
    background-color: #c85d05;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-7::after {
    content: "";
    border-color: #853e04 #fff #fff #853e04;
    border-style: solid;
    border-width: 0 0 24px 24px;
    bottom: 0;
    position: absolute;
    right: 0;
}

右下の折り返しがアクセントになりますね

要素を重ねるときに必ず出てくる positon の使い方は以下の記事をご覧ください。

CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されているテキストを検索エン…

折り返しの大きさを変えたいときは、疑似要素の border-width を調整すれば OK です。

box-shadow を複数指定して立体感を出したデザイン

box-shadow を複数指定することで立体感のあるボックスを作ることができます。

.sample-box-8 {
    background-color: #190b56;
    border: 1px solid #210e75;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset,
                0 0 4px rgba(0, 0, 0, .8) inset,
                2px 2px 2px rgba(0, 0, 0, .4);
    color: #fff;
    margin: 2em 0;
    padding: 2em;
}

立体感があるのでボタンにも使えます

シャドウはさりげなくかけるのがコツです！

グラデーションをかけたビジネスサイト風デザイン

ビジネスサイトでよく見かけるボックスにはグラデーションが欠かせません。

.sample-box-9 {
    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
    border: 1px solid #ccc;
    border-top: 4px solid #1c66fe;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
    margin: 2em 0;
    padding: 2em;
}

グラデーションをかけるとおしゃれ感倍増です

グラデーションはジェネレーターを使うと楽ですよ！

Ultimate CSS Gradient Generator – ColorZilla.com

グラデーションを使った斜めストライプデザイン

linear-gradient を駆使すると、CSS だけで斜めストライプのボックスも作れちゃいます。

.sample-box-10 {
    background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
    margin: 2em 0;
    padding: 2em;
}

画像を使わなくてもストライプが作れる！

ストライプの向きを変えたいときは、「-45deg」を「45deg」に変更してください。

背景をちょっとずらした透明感のあるデザイン

ありきたりなボックスじゃなく、人とちょっと違うデザインにしたい！というときは、背景をずらしてしまいましょう。疑似要素を 2 つ使って透明感を出します。

.sample-box-11 {
    background-color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
    z-index: 1;
}
.sample-box-11::before,
.sample-box-11::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.sample-box-11::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.sample-box-11::after {
    background-color: #a4f5c8;
    top: 5px;
    left: 5px;
    z-index: -2;
}

背景がずれているので思わず見てしまいますね

「疑似要素」と聞くと難しく感じるかもしれませんが、コピペして少しずつオリジナルに変えてみてください。

手書き風デザイン

きっちりかっちりしたボックスを並べるのも良いですが、手書き風デザインにすると “味” が出ます。

.sample-box-12 {
    border: 4px solid #82636b;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 2em 0;
    padding: 2em;
}

和風デザインのサイトに合うボックス

複雑な指定かと思いきや、border-radius だけで実現できてしまいます。数値を適当に変更して遊んでみましょう。

ボックスのタイトルをプラスしたデザイン

「POINT」や「PICK UP」など、ボックスの内容をあらわすタイトルを CSS で表示することができます。

.sample-box-13 {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-13::before {
    background-color: #fff;
    color: #da4033;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

CSS を覚えるとデザインの幅が広がります

content の値（ POINT ）はお好みで変更してください。あまりに長いと、スマホで見たときに表示が崩れるので注意しましょう。