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

2024/09/09

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

ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。

ボックスがあるだけで、おしゃれな雰囲気にもかっこいい雰囲気にも

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

コピペで使える CSS ボックスサンプル

基本形は、class をつけた <div> のみ。

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

以下、コピペだけで使える CSS コードを 13 パターン紹介していきますので、ブログのデザインに合わせて調整していただければと思います。

class は sample-box-n の数字だけ変更した形になっています。

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

まずは背景色がついただけのシンプルなボックス。余白が少ないと読みづらいため、padding を多めにするとよいですね（ 1 ～ 2 文字分ほど）。

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

シンプルでどんなデザインにも合う

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

背景と文字を同系色にするとおしゃれ感が増します。

同系色を調べるのは 0 to 255 というオンラインツールがおすすめ。コントラスト比が低いと見づらくなるので注意しましょう。

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

薄い青と濃い青を組み合わせたボックス

03. 枠線をつけたデザイン

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

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

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

border に double を指定したボックス

04. 背景色＋枠線のデザイン

背景色をつけて border を左側だけにつけるデザインもよく見られます。これも同系色にするとおしゃれ感が増します。

強調ではなく、見出しや引用で使うケースが多いかもしれません。

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

背景色・枠線・文字色を同系色でまとめたボックス

05. 枠線をボックスから少し離したデザイン

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

白い部分は border で、外側の枠線を 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;
}

枠線を離すだけでおしゃれに見える

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

ステッチ風デザインも、border と box-shadow の組み合わせで作れます。さらに border-radius で角を丸くするのがおすすめ。

ハンドメイド関連のブログにマッチしそうなパターンですね。

.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;
}

背景色を変えてステッチ風だけで統一するのもあり

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

疑似要素 ::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;
}

右下の折り返しがポイント

08. 立体感のあるデザイン

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;
}

box-shadow の数値を変えると、雰囲気が変わる

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

グラデーションをかけると、ビジネスサイトでよく見るようなかっこいい雰囲気のボックスに。

グラデーションの調整は、Ultimate CSS Gradient Generator などのオンラインツールを使うと簡単です。

.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;
}

信頼感を出したいときにおすすめのパターン

10. 斜めストライプデザイン

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 の部分で調整

11. 背景を少しずらした透明感のあるデザイン

上にガラスプレートを乗せたような透明感のあるデザインは、疑似要素 ::before と ::after を使って表現できます。

.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;
}

数行のお知らせなどにも使えるデザイン

12. 手書き風デザイン

border-radius の指定だけで、角丸だけではなく手書き風デザインに早変わり。フォントを明朝体や筆文字書体にするとマッチしそうですね。

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

和風サイトで使いたくなるデザイン

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

「POINT」や「PICK UP」など、ボックスのタイトルをつけたデザインも CSS のみで表現可能。

content の値を自由に変更して使ってみてください。

.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 を覚えるとデザインの幅が広がる