コピペでできるボックスデザインサンプル13とビジュアルエディタへのボタン追加方法（CSS）

ボックスとは

このように、文字を色の付いた枠で囲んだもの全般を、ボックス（囲み枠）と言います。

ボックスの作り方

(CSS)
.grey-box{
 background-color: #f6f6f6;
 padding:20px;
 margin-bottom:1em;
}

(HTML) 
<div class="grey-box">
グレーボックス
シンプルなグレーボックスの表示例です。
</div>

グレーボックス
シンプルなグレーボックスの表示例です。

ボックスデザイン例

１．枠線付きのボックス

枠線付きのボックス
背景色の他に枠線もつけました。

.box-style1{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border:1px solid lightgrey;
 }

２．枠線のみのボックス

枠線のみのボックス
背景色はなしで、枠線のみのボックスです。

.box-style2{
 padding: 20px; 
 margin-bottom: 1em;
 border:1px solid lightgrey;
 }

３．枠線太めのボックス

枠線がすこし太めのボックス
背景色はなしで、枠線のみのボックスです。

.box-border-bold{
 padding: 20px;
 margin-bottom: 1em;
 border: 7px solid #f6f6f6;
 }

４．角を丸めたボックス

角を丸めたボックス
四隅の角を丸くしました。

.box-style3{ 
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-radius:5px;
 }

５．二重枠線のボックス

二重枠線のボックス
枠線を二重線にしました。

.box-style4{ 
 padding: 20px;
 margin-bottom: 1em;
 border:3px double lightgrey;
 }

６．上だけ太線

上だけ太線
上にだけ太めの線をつけました。

.box-style5{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-top:5px solid lightgrey;
 }

７．上下ストライプ

上下ストライプのボックス

.box-style6{
position:relative;
}
.box-style6:before,
.box-style6:after{
content: "";
position: absolute;
left: 0;
top:0;
width:100%;
height: 4px;
background: repeating-linear-gradient(-45deg, #fff, #fff 1px, #b4b4b4 1px, #b4b4b4 2px);
}
.box-style6:after{
top:auto !important;
bottom:0;
}

８．上下線

上下線のボックスのタイトル

上下線ボックスの内容。タイトル付きのボックスです。

.box-style7{
border-top:1px solid #353C42;
border-bottom:1px solid #353C42;
width:95%;
margin-left:auto;
margin-right:auto;
padding:1.2em;
}
.box-style7-label{
text-align:center;
margin-bottom:1.5em;
font-size:.9em;
}

FontAwesomeを使ったボックスデザイン例

→現在はSimplicityの後継であるCocoonを利用しています。

補足情報（i）

補足情報（?）

補足情報（!）

９．チェックボックス

.check-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.check-box::before{
 font-family: "FontAwesome";
 content: '\f058';
 font-size: 40px;
 position: absolute;
 top: 20px;
 left: 8px;
 color:#d9d9d9;
}

１０．シェプロンボックス

シェプロンボックス

.chevron-box{
background-color:#cfddd9;
color:#366c73;
padding: 20px 20px 20px 50px;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.chevron-box::before{
font-family: "FontAwesome";
content: '\f138'' ';
color:#285750;
font-size: 40px;
position: absolute;
top: 20px;
left: 8px;
}

１１．矢印ボックス

矢印ボックス

.arrow-right{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.arrow-right::before{
 font-family: "FontAwesome";
 content: '\f0a9';
 font-size: 40px;
 position: absolute;
 top: 0px;
 left: 8px;
 color:#d9d9d9;
}

１２．フラッグボックス

フラッグボックス

.flag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.flag-box::before{
 font-family: "FontAwesome";
 content: '\f024';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}

１３．タグボックス

タグボックス

 .tag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.tag-box::before{
 font-family: "FontAwesome";
 content: '\f02b';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}