この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
テーマ：【テーブルをcssで立体的にアレンジする】
使用：【XHTML/CSS photoshop 透過png】
それでは早速やってみます。 >
使用するhtmlはこちら。<table>
<caption><span></span>テーブルのデザインアレンジ</caption>
<tr>
<th></th>
<th>セレス</th>
<th>パラス</th>
<th>ジュノー</th>
<th>ベスタ</th>
</tr>
<tr>
<td class=”row”>火星</td>
<td>opposition</td>
<td>square</td>
<td>trian</td>
<td>trian</td>
</tr>(ーーーー以下くりかえし)
</table>
これによく使うcssをはめ込んでみます。
caption {
padding: 2px 0 2px 8px;
margin-bottom: 5px;
border-left: 5px solid #d94800;
text-align: left;
font-weight: bold;
}
table {
width: 506px;
border-collapse: collapse;
font-family: Georgia, “Verdana”, “MS Pゴシック”, sans-serif;
color: #333333;
}
th {
width: 100px;
padding: 0.5em;
border: 1px solid #cccccc;
background: #739999;
color: #ffffcc;
}
td.row {
width: 100px;
padding: 0.8em 0.5em;
border: 1px solid #cccccc;
background: #e2e2e2;
font-weight: bold;
color: #333333;
}
td {
width: 100px;
padding: 0.8em 0.5em;
border: 1px solid #cccccc;
text-align: center;
font-weight: bold;
color: #d94800;
}
この状態でブラウザを見ると、
普通ですね。
では、少し工夫を加えたcssにしてみます。
caption {
position: relative;
padding: 5px 0 5px 45px;
background: url(../img/caption.png) no-repeat left top;
/* 背景に双葉の形をした画像を指定 */
text-align: left;
font-size: 18px;
font-weight: bold;
color: #333333;
}
caption span { /* テキストに透過pngを使ってグラデーションをつける */
background: url(../img/touka.png) repeat-x left top;
position: absolute;
display: block;
width: 100%;
height: 30px;
}
table {
width: 506px;
border: 3px solid #e2e2e2;
border-collapse: separate;
border-spacing: 0; /* ボーダー同士の隙間をなくす */
font-family: Georgia, “Verdana”, “MS Pゴシック”, sans-serif;
background: url(../img/table.png) repeat-x left top;
/* 背景にグラデーションの画像をひいてテーブル全体に変化をつける */
color: #333333;
}
th {
width: 100px;
padding: 0.5em;
border: 1px solid;
border-color: #a3cccc #558080 #558080 #a3cccc;
/* borderの４辺の色指定をそれぞれ違う色にし立体的にみせる */
background: #ffcccc url(../img/th.png) repeat-x left top;
/* 背景に画像をひく */
color: #ffffcc;
}
td.row {
width: 100px;
padding: 0.8em 0.5em;
border: 1px solid;
border-color: #e2e2e2 #b3b3b3 #b3b3b3 #e2e2e2;
background: #ffcccc url(../img/td.png) repeat-x left top;
font-weight: bold;
color: #333333;
}
td {
width: 100px;
padding: 0.8em 0.5em;
border: 1px solid;
border-color: #e2e2e2 #bfbfbf #bfbfbf #e2e2e2;
text-align: center;
font-weight: bold;
color: #d94800;
}
これをブラウザで見ると、
立体的になりました。
こんな風に簡単に、ｃｓｓを使って単調なテーブルを美しくみせることができます。
少しでもユーザーにとって心地の良い見た目に近づけられればいいかなーと思います。
以上、【テーブルをcssで立体的にアレンジする】でした。
