スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3でクールなテーブルデザインを作る方法

CSS3でクールなテーブルデザインを作る方法

投稿日:2013年3月19日   レベル:初心者    ソフトウェア:

このチュートリアルではCSS3でクールなテーブルデザインを作る方法について紹介します。


Step1:はじめに

このテーブルはデータ処理やデータ表示に使用できます。

古いテーブルコードとちょっとしたCSS3のテクニックを使い、古いテーブルを使っているとは気づかない見た目を目指します。

Step2:HTML

以下のコードをエディター(自分にとってはDreamweaverですが)でコピーアンドペーストします。

マークアップを開始

<table border="0">
<tr>
<th>Payment Number</th>
<th>Client</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr>
<td>0524/0156643435891</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
<tr>
<td>0524/45645853011</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
<tr>
<td>0524/0343432453423211</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
</table>

ご覧の通りテーブルにはダミーデータを入れていますが、このチュートリアルの主目的はデザインです。
以下の画像はデザインなしで出力されるブラウザ上のテーブルです。

デザインなしで出力されるブラウザ上のテーブル




Step3:CSS3

これからテーブルに必要な、ヘッダー、ボディー、フッターを作ります。
このチュートリアルではテーブルをデータストレージとして使います。
ご覧の通りデザインを使わなければ、この処理は1秒で行われます。

インラインCSS(製造現場ではお勧めしません)を使ったチュートリアルのために、「<head>」タグの内側に「<style>」タグを挿入し、以下のCSSコードを「<style>」タグの内側にコピーアンドペーストし、「<style>」を閉じます。

CSS3デザイン

table{
width:100%;
border:5px solid #386977;
border-collapse: collapse;
border-spacing: 0;
}
tr, td{
font-size:14px;
color:#222222;
text-shadow:0 1px 1px #fff;
padding:5px;
text-align:center;
border-bottom:1px solid #D3DDE2;
border-right:1px dashed #D3DDE2;
background: #feffff; /* Old browsers */
background: - moz - linear-gradient(top, #feffff 0%, #e6f1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e6f1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* IE10+ */
background: linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e6f1f7',GradientType=0 ); /* IE6-9 */
}
th{
color:#097799;
text-shadow:0 1px 1px #fff;
font:bold 16px Arial, Helvetica, sans-serif;
padding:10px 15px;
background:#090;
border-bottom:1px solid #0591BC;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
Step4:完成

テーブルの出力結果は次の通りですが、グラデーションや余白を使ってテーブルを見た目良くすっきりと仕上げます。
これでテーブルをデータ処理やプレゼンテーションに使う準備が整います。

完成

正直に言うと、これといった説明は本来必要ありません。
プレーンなCSSとグラデーションはColorZillaのグラデーションジェネレータを使って「<th>」タグと「<tr>」タグにペーストしただけなのです。
とはいえデベロッパーにとってこの方法はデータ処理やデータ表示に役立ちます。
結局のところ、最近のクライアントはクールなGUIを好むのです。

引用:Web Design Library  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング