2016/08/26  664 Shares

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

デザイン

ブログ記事の主役はテキストですが、文字のかたまりが並んでいるだけで「読みづらいな」と思われることもしばしば。

段落を意識して画像や見出しを適度に使えば読みづらさは軽減されますが、こんなボックスを使ってアクセントを入れるとおしゃれで読みやすいブログになります。

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

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 というジェネレーターを使うと、同系色のコードが簡単にわかるので便利!

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 の使い方はこちら をご覧ください。

折り返しの大きさを変えたいときは、疑似要素の 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

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

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 )はお好みで変更してください。あまりに長いと、スマホで見たときに表示が崩れるので注意しましょう。

まとめ

CSS だけでいろいろなボックスが作れますね。

色やサイズを変えるだけでまた違った雰囲気になりますから、気に入ったものをコピペしてアレンジしてみてください。見出しやリンクに応用するのも良いと思います。

ブログがおしゃれになると、記事を書くのがもっと楽しくなるかもしれませんよ!

それでは、また。