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

更新日 2023年8月19日
カテゴリーブログ基礎

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

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

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

コピペだけで使えるので、ぜひ試してみよう。

ブログ運営に役立つヒントを定期的にお届けします。購読者のみ閲覧できる限定コンテンツも無料配信中。

無料登録

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

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

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

以下、コピペだけで使える CSS コードを 13 パターン紹介していくので、ブログのデザインに合わせて調整しよう。

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

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

まずは背景色がついただけのシンプルなボックス。余白が少ないと読みづらいため、padding を多めにするとよい（ 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 を覚えるとデザインの幅が広がる