商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

CSSだけで作るちょっとだけカッコいいテーブルデザイン

昔(といっても4,5年前まで)は、テーブルでのレイアウトが主流だったWEBデザイン。今ではすっかりcssに取って代わられたイメージがありますよね。
じゃあ、テーブルなんて必要ないじゃん!と思う方もいらっしゃるかもしれませんが、いやいや、表組みなんかはテーブルが大事。
cssだけで無理やり表組みを作るより、きちんと目的に合っていればテーブルを使うほうが良いんですよ。
というわけで、cssだけでちょっとかっこいいテーブルを作ってみませんか?

◎ワンポイントメモ
※ブラウザによって若干表示が異なることがあります。(点線の認識とか表示、左右ボーダーの太さと表幅の関係などなど)
※各スタイル表記に関しては、TAGindexさんなどを参考にしてみてください。

::::: SAMPLE01 :::::
SAMPLE01 THの頭にオレンジのラインを付けて、上下のボーダーを点線で囲ってみました。
項目とか テキストとか。
<CSS表記>

.table_01 {
width:100%;margin:0px 0px 10px 0px;padding:0px;
border-collapse:collapse;
border-top:1px dotted #999999;
}
.table_01 th {
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#666666;
background-color:#EEEEEE;
border-bottom:1px dotted #999999;border-left:5px solid #FF9900;
}
.table_01 td {
padding:4px 2px 2px 4px;
border-bottom:1px dotted #999999;border-left:3px double #CCCCCC;
}

<HTML表記>

<table class="table_01">
<tr>
<th>SAMPLE01</th>
<td>THの頭にオレンジのラインを付けて、上下のボーダーを点線で囲ってみました。</td>
</tr>
<tr>
<th>項目とか</th>
<td>テキストとか。</td>
</tr>
</table>

::::: SAMPLE02 :::::
SAMPLE02 セル間を1pxだけ開けて、項目部分ははっきりボーダー、テキスト部分は点線で囲ってあります。
項目とか テキストとか。
<CSS表記>

.table_02 {
width:100%;margin:0px 0px 10px 0px;padding:0px;
border-collapse:separate;
border-spacing:1px;
}
.table_02 th {
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#339966;
background-color:#D8FEDA;
border:1px solid #BBBBBB;
}
.table_02 td {
padding:4px 2px 2px 4px;
border:1px dotted #999999;
}

<HTML表記>

<table class="table_02">
<tr>
<th>SAMPLE02</th>
<td>セル間を1pxだけ開けて、項目部分ははっきりボーダー、テキスト部分は点線で囲ってあります。</td>
</tr>
<tr>
<th>項目とか</th>
<td>テキストとか。</td>
</tr>
</table>

::::: SAMPLE03 :::::
SAMPLE03 セル間隔を開けずに、1pxのラインで囲ったテーブルです。一番シンプルでキレイかも。
項目とか テキストとか。
<CSS表記>

.table_03 {
width:100%;margin:0px 0px 10px 0px;padding:0px;
border-collapse:collapse;
}
.table_03 th {
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#3366CC;
background-color:#99CCFF;
border:1px solid #6699CC;
}
.table_03 td {
padding:4px 2px 2px 4px;
background-color:#EEEEEE;
border:1px solid #6699CC;
}

<HTML表記>

<table class="table_03">
<tr>
<th>SAMPLE03</th>
<td>セル間隔を開けずに、1pxのラインで囲ったテーブルです。一番シンプルでキレイかも。</td>
</tr>
<tr>
<th>項目とか</th>
<td>テキストとか。</td>
</tr>
</table>

::::: SAMPLE04 :::::
SAMPLE04 セル間隔は2px、ボーダーを組み合わせて窪んだボタンっぽく作ってあります。ボーダーを太めにするともう少し感じがでるかも。
項目とか テキストとか。
<CSS表記>

.table_04 {
width:100%;margin:0px 0px 10px 0px;padding:0px;
border-collapse:separate;
border-spacing:2px;
}
.table_04 th {
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#FFFFFF;
background-color:#33CC33;
border-top:1px solid #006666;border-left:1px solid #006666;
border-right:1px solid #99CC66;border-bottom:1px solid #99CC66;
}
.table_04 td {
padding:4px 2px 2px 4px;
background-color:#F5F5F5;
border-top:1px solid #999999;border-left:1px solid #999999;
border-right:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;
}

<HTML表記>

<table class="table_04">
<tr>
<th>SAMPLE04</th>
<td>セル間隔は2px、ボーダーを組み合わせて窪んだボタンっぽく作ってあります。ボーダーを太めにするともう少し感じがでるかも。</td>
</tr>
<tr>
<th>項目とか</th>
<td>テキストとか。</td>
</tr>
</table>

::::: SAMPLE05 :::::
SAMPLE05 チョコ色のかわいらしいテーブルです。組み合わせ次第で様々な雰囲気が出せますね!
項目とか テキストとか。
<CSS表記>

.table_05 {
width:100%;margin:0px 0px 10px 0px;padding:0px;
border-collapse:separate;
border-spacing:0px;
border-top:1px solid #663300;
border-left:1px solid #663300;
empty-cells:show;
}
.table_05 th {
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#FFFFFF;
background-color:#996633;
border-top:1px solid #FFE7CE;border-left:1px solid #FFE7CE;
border-right:1px solid #663300;border-bottom:1px solid #663300;
}
.table_05 td {
padding:4px 2px 2px 4px;
background-color:#FFE7CE;
border-right:1px solid #663300;
border-bottom:1px solid #663300;
}

<HTML表記>

<table class="table_05">
<tr>
<th>SAMPLE05</th>
<td>チョコ色のかわいらしいテーブルです。組み合わせ次第で様々な雰囲気が出せますね!</td>
</tr>
<tr>
<th>項目とか</th>
<td>テキストとか。</td>
</tr>
</table>

以上、とりあえず左項目レイアウトのものを5コ。
応用次第でそりゃもう無限大。適当にかまってみて下さい。

更新日:2011.01.23 Category:CSSサンプル
HOMEへ このページのTOPへ