For reference when creating a website
MK-BLOG
ホーム > MK-BLOG：ホームページ制作の参考に > Web制作技術（HTML/CSS/JS） > さらにイケてるtableデザインスタイル

さらにイケてるtableデザインスタイル：css Tips4

tableデザインスタイル

さらにイケてるtableデザインスタイル：css Tips4

前回は、見やすいテーブルデザインについて、CSSのテンプレートサンプルを交えご説明いたしました。

実際の制作現場で私が最も重点を置いている点は、やはり見やすさ、読みやすさですね！！ また、見やすさ、読みやすさの事を考慮いたしますと、 CSSでスタイルをデザインすることは、非常に重要な事に思えます。

HTMLのtableタグ、覚えてしまえば非常に簡単なタグになりますので、 まとまったテキストデータなどを表示する際には、ぜひともtableを使い、 CSSでデザインをおこなうことをオススメいたします。

それでは今回はッ、

Menu

上記について記載していこうと思います...。

背景画像でリッチなビジュアルを表現

tableの背景に画像を指定することで見た目の良いビジュアルの、テーブルを表現することが出来ます。

ここでは、table要素全体に対して薄い紺色の背景画像を指定し、 th要素には濃い紺色の背景画像を指定してみます。

どちらも90度方向のグラデーションになりますので、横幅1pxの画像をx軸方向にリピートさせて表示することが出来ます。

薄い紺色の画像をtable要素に対して指定することで、グラデーションが行をまたがって、 途切れることなく続けて表示させることが出来ます。

tableサンプル4

<!-- CSS -->
table.style1 {
border-collapse: separate;
border-spacing: 0;
background: url(images/back1.gif) repeat-x left bottom;
border-left: 1px solid #4c5482;
}
table.style1 th {
background: #c4cdfd url(images/back2.jif) repeat-x left bottom;
font-weight: normal;
color: #fff;
}
table.style1. th,table.style1. td{
padding: 10px 5px;
tex-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #aaa;
}

※table要素とth要素に対して、横幅1pxの画像をx軸方向にリピートさせています。 th要素とtd要素では左右に別々の色のボーダーを指定しています。

見やすいシンプルなスタイルのテーブルデザイン

実際のウェブ制作現場において、企業サイトなどの中で表組みを制作する際は、 あまり凝った装飾を施したスタイルよりも、シンプルで見やすいスタイルのほうが良い場合などもございます。

そのなかでも、かなりシンプルといえるスタイルのテーブルサンプルをご紹介します。

サンプルの表では、左側1列がth要素になっており、そこだけ薄い背景色を指定しています。

ボーダーは表示させておらず、実際のCSS上の指定では、 th要素の上下の区切りのために白1pxのボーダーで指定しています。

このようなスタイルは小さなテーブルであれば、何ら問題ございませんが、 情報量が多くなると、上下の行の区別がつきにくく、見出し「th要素」に対応する値「td要素」が 分かりづらくなってしまうので、注意が必要です。

tableサンプル5

<!-- HTML -->
<table cellspacing="0" class="style1">
<tr>
<th>title1</th>
<td>HTML</td>
<td>CSS</td>
<td>jQuery</td>
</tr>
<tr>
<th>title2</th>
<td>トヨタ</td>
<td>日産</td>
<td>スバル</td>
</tr>
<tr>
<th>title3</th>
「以下省略」

<!-- CSS -->
table.style1 {
border-collapse: separate;
border-spacing: 0;
}
table.style1 th {
background: #b3beff;
font-weight: normal;
text-align: left;
}
table.style1 th,table.style1 td {
padding: 5px 10px;
border-bottom: 1px solid #fff;
}

※th要素には薄い色の背景色を指定してあります。 上下のth要素の区切り線とするために白1pxのボーダーが指定してあります。

セルに:hover疑似クラスを指定！

それでは、分かりやすいテーブルにするために、セルに:hover疑似クラスを指定する方法をご紹介。

今回は実際に、私が作成しましたtableデザインの画像と、 実際に使用しているリンク先を記載していきます。

tableサンプル6

地酒のかどや「燗酒特集」

<!-- html -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>お燗も色々</th>
<th>温　度</th>
<th>徳利などの温度のめやす</th>
<th>香り・味わい</th>
</tr>
<tr>
<td>飛びきり燗</td>
<td align="center">55度</td>
<td align="center">徳利を持つと熱いくらい</td>
<td align="center">シャープな香りで、より辛口になる</td>
</tr>
<tr>
<td>熱　燗</td>
<td align="center">50度</td>
<td align="center">徳利から湯気が生じる</td>
<td align="center">キレの良い辛口、香りが際立つ</td>
</tr>
<tr>
<td>上　燗</td>
<td align="center">45度</td>
<td align="center">注いだときに湯気が出る程度</td>
<td align="center">引き締まった香りを感じる</td>
</tr>
<tr>
<td>ぬる燗</td>
<td align="center">40度</td>
<td align="center">熱くはない程度</td>
<td align="center">香りがよく出る</td>
</tr>
<tr>
<td>人肌燗</td>
<td align="center">35度</td>
<td align="center">さわると温かく感じる</td>
<td align="center">味にふくらみがある、米や麹の良い香りがする</td>
</tr>
<tr>
<td>日向燗</td>
<td align="center">30度</td>
<td align="center">温度の高さを感じない</td>
<td align="center">ほんのり香りが引き立つ</td>
</tr>
</table>

<!-- css -->
table {
width:auto;
margin:5% 0 10%;
border-spacing:0;
font-size:0.7em;
}
table th {
color:#fff;
padding:0.8em;
background:#F47B1F;
background:-moz-linear-gradient(rgba(244,123,31,0.7), rgba(244,123,31,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(244,123,31,0.7)), to(rgba(244,123,31,0.9)));
font-weight:bold;
border-left:1px solid #F47B1F;
border-top:1px solid #F47B1F;
border-bottom:1px solid #F47B1F;
line-height:120%;
text-align:center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow:2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table th:first-child {
border-radius:5px 0 0 0;
}
table th:last-child {
border-radius:0 5px 0 0;
border-right:1px solid #F47B1F;
box-shadow:2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table tr td {
padding:0.5em 0.8em;
border-bottom:1px solid #F47B1F;
border-left:1px solid #F47B1F;
text-align:center;
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
line-height:1.6;
}
table tr td:last-child {
border-right:1px solid #F47B1F;
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr {
background:#fff;
}
table tr:nth-child(2n+1) {
background:#fff0e5;
}
table tr:last-child td {
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr:last-child td:first-child {
border-radius:0 0 0 5px;
}
table tr:last-child td:last-child {
border-radius:0 0 5px 0;
}
table tr:hover {
background:#ffdcc2;
cursor:pointer;
}

少しご説明いたしますと、今回のCSSは実際の制作現場のソースコードをそのまま記載いたしましたので、 CSS3なども記載されてございますが、それよりもここで大事なのは、 tr要素に対して:hoverを指定しているところになります。

カーソルを合わせた行全体にカラーの変化を与えるコードになっています。

このサンプルCSSでは、trのみ:hoverを指定していますが、 さらに、td要素に:hoverでマウスオーバー時のカラーを指定すれば、 行全体の背景色が変化しているなかで、カーソルを合わせたtd要素だけセルだけさらに別の色に 変化する表示結果とすることも可能になります。

という事で、前回と今回2回にわたりまして、テーブルデザインをCSSでおこなう方法を 詳しく記載してみました。

個人的には、シンプルなものも好きですが、サイトのデザインやイメージによって テーブルのデザインもあわせるような形で指定出来ればと思います。

そのためには、色々な指定方法を理解しておく必要があるかと思いますので、 初心者の方であれば、数回、実際にtebleデザインを記載して、 理解を深めることが、最短で覚えることが出来る方法かと思います。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。

ARCHIVES

CATEGORY