ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング