Box Design

Boxのデザイン

WEBページでよく使うボックス
サンプルを参考に色々アレンジして作ってみましょう。

01

ここに文章

CSS

.box1 {
padding: 0.5em 1em;
margin: 2em 0;
background: #FFF;
border: solid 3px #ff8c00;
border-radius: 10px;
}
.box1 p {
margin: 0;
padding: 0;
}

HTML

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

02

ここに文章

CSS

.box2{
padding: 8px 19px;
margin: 2em 0;
color: #2c2c2f;
background: #ffe4e1;
border-top: solid 5px #f09199;
border-bottom: solid 5px #f09199;
}
.box2 p {
margin: 0;
padding: 0;
}

HTML

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

03

ここに文章

CSS

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
border: double 5px #99cc33;
}
.box3 p {
margin: 0;
padding: 0;
}

HTML

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

04

ここに文章

CSS

.box4 {
padding: 0.5em 1em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
.box4 p {
margin: 0;
padding: 0;
}

HTML

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

05

ここに文章

CSS

.box5 {
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);
}
.box5 p {
margin: 0;
padding: 0;
}

HTML

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

06

ここに文章

CSS

.box6{
padding: 0.5em 1em;
margin: 2em 0;
color: #716246;
background: #faebd7;
border-bottom: solid 6px #f5deb3;
border-radius: 9px;
}
.box6 p {
margin: 0;
padding: 0;
}

HTML

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

07

ここに文章

CSS

.box7 {
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656;
background: #d6ebff;
box-shadow: 0px 0px 0px 10px #d6ebff;
border: dashed 2px white;
border-radius: 8px;
}
.box7 p {
margin: 0;
padding: 0;
}

HTML

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

08

ここに文章

CSS

.box8{
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);
}
.box8 p {
margin: 0;
padding: 0;
}

HTML

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

09

ここにタイトル

ここに文章

CSS

.box9 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box9 .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;
}
.box9 p {
margin: 0;
padding: 0;
}

HTML

<div class="box9">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

10

ここに文章

CSS

.box10 {
color: #90660c;
background-color: #f4c55f;
box-shadow: 0 0 20px 20px #f4c55f;
padding: 15px;
margin: 30px;
border-radius: 20px;
}

HTML

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

11

バックグラウンドにパターンを入れる／参考：WEB2-D18 Pattern02
CSS Background Patterns　のサイトからパターンデザインを決めてCSSへペーストする

ここに文章

CSS

.box11 {
padding: 15px;
margin: 30px;
background-color: #ebf8f7;
opacity: 0.8;
background-image: repeating-linear-gradient(45deg, #96e0fa 25%, transparent 25%, transparent 75%, #96e0fa 75%, #96e0fa), repeating-linear-gradient(45deg, #96e0fa 25%, #ebf8f7 25%, #ebf8f7 75%, #96e0fa 75%, #96e0fa);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}

HTML

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

12

バックグラウンドに画像を入れる　参考：背景のCSS

ここに文章

CSS

.box12 {
padding: 20px;
background-image:url("bird.png");
border:3px solid #fff0f5;
}

HTML

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

bird.pngダウンロード
png画像で背景が透明の場合は、background-colorも設定できます

13

SNSのアイコンを並べるボックスの一例です。　※ソーシャルネットワーキングサービス（Social Networking Service）
display: flex;の下にjustify-content: ○○;を入れて並び方も指定できます。（センター、右寄せ、均等など）
下記で使用しているアイコンはダウンロードできます >>SNSアイコンDownload