【CSS】超簡単！コピペで作れるオシャレなボックスデザイン30選！

おはこんばんにちは！ノボルです。

ブログでボックスデザインを作りたいんだけど、どうやってするの？

という方のために、今回は、完全コピペで作れるボックスデザインを30個紹介します。全てレスポンシブ対応で、HTMLとCSSのコピペだけで使うことができます！

使い方
シンプルなボックスデザイン
かわいいボックスデザイン
おしゃれなボックスデザイン
タイトルつきボックスデザイン
最後に

使い方

CSSをコピペ

下で紹介するボックスデザインで好きなものがあればCSSをコピーします。これをブログやサイトのCSSファイルにコピペします。貼り付ける方法についてですが、ブログサービスによって違います。

※アップデートなどによりCSSの編集場所が変わっている場合もあります

CSSを貼り付ける場所

WordPress

[ダッシュボード] [外観] [テーマエディター] 右側のバーの[style.css]

はてなブログ

[デザイン] [] [デザインCSS]

アメブロ

[マイページ] [デザインの変更] [CSSの編集]

Livedoorブログ

[ブログ設定] [PC] [カスタマイズ] [CSS]

FC2ブログ

[カスタマイズ] [上級者向け] [CSSを追加]

挿入したい箇所にHTMLをコピペ

HTMLタグを、HTML編集モードなどにした上で、そのまま記事や固定ページ内にコピペしてください。指定のボックスデザインが表示されると思います。

シンプルなボックスデザイン

1. 線で囲んだだけ

少し太めの実線で囲んだだけのボックスデザインです。分かりやすさが強みです。ただ、派手な見た目にしたいときには少し物足りないかもしれません。

＋コードを表示

HTML



<div class="box1">
    <p>ここに文章</p>
</div>

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

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

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

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

<p>ここに文章</p>

</div>

CSS



.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

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

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

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

<p>ここに文章</p>

</div>

CSS



.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

.box5 {

padding: 0.5em 1em;

margin: 2em 0;

border: double 5px #4ec4d3;

}

.box5 p {

margin: 0;

padding: 0;

}

6. 破線

ボーダーを破線にしたボックスデザインです。線の太さは、好みで変えてください。［border:dashed 2px］の値を変えるだけです。

＋コードを表示

HTML



<div class="box6">
    <p>ここに文章</p>
</div>

<p>ここに文章</p>

</div>

CSS



.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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