ボックス

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

シンプルなボックスデザインです。少し濃い目のカラーを使って見出しを白くするのがポイントです。

HTML

<div class="box1">
<h3>シンプルなボックスデザイン</h3>
<div class="inner">
シンプルなボックス～
</div>
</div>

CSS

.box1{
border: 2px solid #0094D6;
}
.box1 h3{
background: #0094D6;
color: #FFF;
text-align: center;
margin: 0;
}
.box1 .inner{
padding: .5em;
}



角丸デザイン

border-radiusプロパティを使って角丸に。全体の印象が丸くなります。

HTML

<div class="box2">
<h3>角丸デザイン</h3>
<div class="inner">
border-radiusプロ～
</div>
</div>

CSS

.box2{
border: 2px solid #0094D6;
border-radius: 10px;
}
.box2 h3{
background: #0094D6;
color: #FFF;
text-align: center;
margin: 0;
}
.box2 .inner{
padding: .5em;
}



カラーインデックス風

タイトルをカラーインデックス風にしたボックスデザイン。

HTML

<h3 class="box_header">カラーインデックス風</h3>
<div class="box3">
<div class="inner">
タイトルをカラーインデ～
</div>
</div>

CSS

.box3{
border: 2px solid #0094D6;
}
h3.box_header{
background: #0094D6;
color: #FFF;
margin: 0;
display:inline-block;
padding: .3em .5em;
border-radius: 10px 10px 0 0;
}
.box3 .inner{
padding: .5em;
}



上下ストライプ

ボックスだからといって、四方を囲まなくてもいいかもというときに使いたいストライプを使ったボックスデザイン。

HTML

<div class="box4">
<div class="box_inner">
<h3>上下ストライプ</h3>
ボックスだからといって、四方～
</div>
</div>

CSS

.box4{
position: relative;
}
.box_inner{
padding: .5em;
}
.box4::before,
.box4::after{
content:"";
position: absolute;
width: 100%;
height: 8px;
background: linear-gradient(
-45deg,
#fff 25%, #d8e0ff 25%,
#d8e0ff 50%, #fff 50%,
#fff 75%, #d8e0ff 75%,
#d8e0ff
);
background-size: 8px 8px;
}
.box4 h3{
margin: 0;
}
.box4 h3:first-letter{
font-size: 1.4em;
color: #0094D6;
}



ストライプボックス

ストライプを使ったボックスデザイン。

HTML

<div class="box5">
<div class="box_inner">
<h3>ストライプボックス</h3>
ストライプを使った～
</div>
</div>

CSS

.box5{
position: relative;
background: linear-gradient(
-45deg,
#fff 25%, #fbc6cc 25%,
#fbc6cc 50%, #fff 50%,
#fff 75%, #fbc6cc 75%,
#d8e0ff
);
background-size: 8px 8px;
padding: 8px;
}
.box_inner{
background: #FFF;
padding: .5em;
}
h3{
color: #f34f61;
margin: 0 0 .5em;
}