さらにイケてるtableデザインスタイル：css Tips4
前回は、見やすいテーブルデザインについて、CSSのテンプレートサンプルを交えご説明いたしました。
実際の制作現場で私が最も重点を置いている点は、やはり見やすさ、読みやすさですね！！
また、見やすさ、読みやすさの事を考慮いたしますと、
CSSでスタイルをデザインすることは、非常に重要な事に思えます。
HTMLのtableタグ、覚えてしまえば非常に簡単なタグになりますので、
まとまったテキストデータなどを表示する際には、ぜひともtableを使い、
CSSでデザインをおこなうことをオススメいたします。
それでは今回はッ、
・見やすいシンプルなスタイルのテーブルデザイン
・セルに:hover疑似クラスを指定！
上記について記載していこうと思います…。
背景画像でリッチなビジュアルを表現
tableの背景に画像を指定することで見た目の良いビジュアルの、テーブルを表現することが出来ます。
ここでは、table要素全体に対して薄い紺色の背景画像を指定し、
th要素には濃い紺色の背景画像を指定してみます。
どちらも90度方向のグラデーションになりますので、横幅1pxの画像をx軸方向にリピートさせて表示することが出来ます。
薄い紺色の画像をtable要素に対して指定することで、グラデーションが行をまたがって、
途切れることなく続けて表示させることが出来ます。
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要素」が
分かりづらくなってしまうので、注意が必要です。
<!– 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>
「以下省略」
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デザインの画像と、
実際に使用しているリンク先を記載していきます。
<!– 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>
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デザインを記載して、
理解を深めることが、最短で覚えることが出来る方法かと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
