CSS3で作るボックスデザイン

ブログをテキストばかりで書いていると閲覧者に「読みづらい」と思われてしまう事もあるでしょう。そんな時に、文章にメリハリをつける活躍するのが段落、見出し、ボックスです。今回は、これまで作ってきたボックスが溜まってきたので、まとめて掲載します。気に入ったボックスがあれば、使って頂けると幸いです。

【HTML】

[html]

<div class="box_1">
<div class="main_contents">
<p class="box_mg_t_30">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
</div>

[/html]

【CSS】

[css]

.box_1 {
width: 500px;
margin: 60px auto;
padding: 15px;
background-size: 10px 10px;
background-color: #E6E6EA;
background-image: linear-gradient(45deg,#009FB7 25%,transparent 25%,transparent 50%,#009FB7 50%,#009FB7 75%,transparent 75%,transparent);
}
.main_contents {
background: #fff;
padding: 25px;
}

[/css]

【HTML】

[html]

<div class="box_2">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_2{
width: 500px;
margin: 60px auto;
padding: 20px;
background: #E6E6EA;
box-shadow: 0px 0px 0px 10px #E6E6EA;
border: dashed 2px #009FB7;
}

[/css]

【HTML】

[html]

<div class="box_3">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_3{
position: relative;
background: #E6E6EA;
box-shadow: 0px 0px 0px 5px #E6E6EA;
border: dashed 2px #009FB7;
width: 500px;
margin: 60px auto;
padding: 20px;
}
.box_3:after{
position: absolute;
content: ”;
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #88949B #fff #88949B;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

[/css]

【HTML】

[html]
<div class="box_4">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
[/html]

【CSS】

[css]

.box_4{
width: 500px;
margin: 60px auto;
padding: 20px;
background: -webkit-repeating-linear-gradient(-45deg, #8EEAFF, #8EEAFF 3px,#ABEEFC 3px, #ABEEFC 7px);
background: repeating-linear-gradient(-45deg, #8EEAFF, #8EEAFF 3px,#ABEEFC 3px, #ABEEFC 7px);
}

[/css]

【HTML】

[html]

<div class="box_5">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_5{
width: 500px;
margin: 60px auto;
padding: 20px;
background: -moz-linear-gradient(#28B6D6, #44BBA4);
background: -webkit-linear-gradient(#28B6D6, #44BBA4);
background: linear-gradient(to right, #28B6D6, #44BBA4);
color: #FFF;
}

[/css]

【HTML】

[html]

<div class="box_6">
<span class="box-title">TEXT</span>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_6 {
width: 500px;
margin: 60px auto;
padding: 20px;
position: relative;
border: double 3px #009FB7;
}

.box_6 .box-title {
position: absolute;
display: inline-block;
top: -10px;
left: 210px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #009FB7;
font-weight: bold;
}

[/css]

【HTML】

[html]

<div class="box_7">
<span class="box-title_2">TEXT</span>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_7 {
width: 500px;
margin: 60px auto;
padding: 20px;
position: relative;
border: solid 3px #009FB7;
}
.box_7 .box-title_2 {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #009FB7;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}

[/css]

【HTML】

[html]

<div class="box_8">
<span class="box-title_3">BOX TITLE</span>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_8 {
width: 500px;
margin: 60px auto;
padding: 20px;
background: #E6E6EA;
}
.box_8 .box-title_3 {
font-size: 1.2em;
background: #009FB7;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}

[/css]

【HTML】

[html]

<div class="box_9">
<div class="box-title_5">BOX TITLE</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]
.box_9 {
width: 500px;
margin: 60px auto;
background: #E6E6EA;
}
.box_9 .box-title_5 {
font-size: 1.2em;
background: #009FB7;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box_9 p {
padding: 15px 20px;
margin: 0;
}

[/css]

【HTML】

[html]

<div class="box_10">
<h3 class="box_title_10">BOX TITLE</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

[/html]

【CSS】

[css]

.box_10{
width: 500px;
margin: 60px auto;
padding: 0 20px 20px 20px;
background: #E6E6EA;
box-shadow: 0px 0px 0px 10px #E6E6EA;
border: dashed 2px #009FB7;
}

.box_title_10{
position: relative;
display: inline-block;
margin: 20px 0 30px !important;
font-size: 24px;
line-height: 28px;
color: #222;
text-align: center;
display: block;
padding: 0;
font-weight: 700;
}

.box_title_10:before {
content: ”;
position: absolute;
left: 50%;
bottom: -10px;
display: inline-block;
width: 50px;
height: 1px;
-moz-transform: translateX(-38%);
-webkit-transform: translateX(-38%);
-ms-transform: translateX(-38%);
transform: translateX(-38%);
background-color: #555;
border-radius: 2px;
}

.box_title_10:after {
content: ”;
position: absolute;
left: 48%;
bottom: -5px;
display: inline-block;
width: 70px;
height: 1px;
-moz-transform: translateX(-27%);
-webkit-transform: translateX(-27%);
-ms-transform: translateX(-27%);
transform: translateX(-27%);
background-color: #555;
border-radius: 2px;
}

[/css]

まとめ

これまでに実装したボックスを10個掲載致しましたが、いかがだったでしょうか。掲載したコードをカスタムして頂けると応用もできると思いますので、ぜひトライしてみられてください。ボックスはウェブサイトのパーツの1部ですが重要なパーツです。掲載させて頂いたボックスがお役に立つと嬉しく思います。