divボックスのデザイン

基本デザイン

背景色

background: 色指定;

画像背景

background: url("背景画像URL")

線背景

background: repeating-linear-gradient(角度deg, 開始色位置px, 途中色位置px, 終了色位置px);

画像色透過

background: rgba(255, 255, 255, 0.5);
r:red、g:green、b:blue、a:alpha（透明度）

枠

border: 色太さpx 線の種類;
一本線:solid/破線:dashed/ドット線:dotted/二重線:double

角を丸める

border-radius: 丸めるサイズpx;

影

box-shadow:右px 下方向px ぼかしpx 広がりpx 色;

適当に使いやすいデザインを考えてみた。

共通html

<div class="box">ここに内容</div>

影付き丸角

影付き丸角の
テーブルのサンプル。

css

.box{
border-radius: 10px;
box-shadow: 2px 3px 8px #999;
padding: 6px 14px;
}

上下線

上下線付きの
テーブルのサンプル。

css

.box{
color: #fff;
background: #000;
border: #fff 2px solid;
box-shadow: 0 0 0 4px #000;
padding: 6px 10px;
}

ドット画像のテーブル

画像の使用は自分のサイトのみでお願いします。ジャンルは問いません。
再配布等はご遠慮ください。

シンプル

シンプルなテーブルのサンプル。
使用した画像はシンプル使用画像

html

<div class="box">
<div>ここに内容</div>
</div>

css

.box{
color: #987251;
background: #b5e895 url("画像URL.png");
border: solid 1px #987251;
}
.box div{
padding: 10px;
background: rgba(255, 255, 255, 0.25);
}

太枠

太枠テーブルのサンプル。
使用した画像は太枠使用画像

html

<div class="box">
<div>ここに内容</div>
</div>

css

.box{
color: #987251;
background: #a7e49b url("画像URL");
padding: 16px;
border-radius: 30px;
}
.box div{ 
padding: 12px 26px;
background: rgba(255, 255, 255, 0.8);
border-radius: 30px;
}

タイトル付き

タイトル

タイトル付きテーブルのサンプル。
使用した画像は太枠使用画像

html

<div class="box">
<div class="title">タイトル</div>
<p>ここに内容</p>
</div>

css

.box{
color: #987251;
border: solid 2px #987251;
}
.box .title{
font-weight: bold;
background: #ffab84 url("画像URL");
border-bottom: solid 1px #987251;
margin: 0;
padding: 5px 10px;
}
.box p{
padding: 8px 10px;
}