記事内に商品プロモーションが含まれる場合があります
今回はWebページ用のおしゃれなボックスデザイン例を30個紹介します。どれもレスポンシブ対応で、HTMLとCSSのコピペで使うことができます。
CSSがうまく反映されないときはこちらの記事を参考にしてみてください。
使い方
HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。
スキップ
手順1：CSSをコピペ
のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。
link rel〜を貼る場所
- WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK
- はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け
- アメブロ[マイページ][デザインの変更][CSSの編集]
- Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS]
- FC2ブログ[設定][テンプレートの設定][スタイルシートの編集]
- Blogger[テーマ][カスタマイズ][上級者向け][CSSを追加]
※ブログサービスのアップデートによりCSSの編集場所が変わっている場合があります。
なお、CSSファイル内の下に貼り付けるほど、適用の優先順位が高くなります。※「同じ部分に対して複数のデザイン指定があった場合にどちらが適用されるか」という話です。他にも何かと基準はありますが…。
手順2：挿入したい部分にHTMLを貼付け
記事内にボックスを挿入したいときには、HTML編集モードなどにしたうえで、HTMLタグをまるっと貼り付けます。これでボックスが表示されるかと思います。余白などのバランスが崩れてしまったときは、以下の記事を参考にCSSを修正してみてください。
シンプルな囲み枠
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;
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: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
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: -webkit-calc(100% + 20px);
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: -moz-linear-gradient(#ffb03c, #ff708d);
background: -webkit-linear-gradient(#ffb03c, #ff708d);
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{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #fff0c6;
}
.box23:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #fff0c6;
}
.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: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
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 {
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 {
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-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の左のチェックマークはFontAwesomeのアイコンフォントで表示しています。
コードを表示
HTML
<div class="box30">
<div class="box-title">ここにタイトル</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-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;
}
こちらの記事もどうぞ
ここまでボックスデザインを30個紹介してきました。よかったら以下の記事にも是非目を通してみてくださいませ。
