「シマシマのテーブルを作る。」の編集履歴（バックアップ）一覧はこちら
「シマシマのテーブルを作る。」(2015/07/25 (土) 20:22:36) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
テーブルのデザインでよくシマシマのものを見かけます。これは行や列にclassを指定してもできるのですが、今回は&color(red){疑似要素:nth-child}を使って行っていきたいと思います。7月25日記事
~
~
イメージ
~
縦方向
#image(width=300,tate.png)
横方向
#image(width=300,yoko.png)
~
~
目次
#contents
~
~
----
~
*シマシマは横方向と縦方向？
シマシマにするには疑似要素:nth-childを使っていきます。これは、n番目の子となる要素に、スタイルを適用していくというものです。
n番目ということは縦のシマシマ(td)にもできそうですし、横のシマシマ(tr)にもできそうです。
ということで両方やってみます。
~
~
*コード
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>点数リスト</title>
</head>
<body>
<div id="yoko">
<table class="sample1">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
<div id="tate">
<table class="sample2">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
</body>
</html>
基本のタグはこちらでかまいません。
しかし、CSSのほうではtrのほうで、奇数用と偶数用でtr:nth-child(2n+0)やtr:nth-child(2n+1)と指定します。nは0から始まります。
~
~
CSS部
@charset "utf-8";
/* CSS Document */
#yoko{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample1{
border-collapse: collapse;/*これはテーブルのクラスへ*/
}
table.sample1 th,table.sample1 td{
font-size:30px;
border:1px solid #000;/*これはth,tdの方へ記述*/
}
table.sample1 tr:nth-child(2n+1){/*もし先頭行(th)を指定色でぬりつぶさない場合は2n+3*/
background: #0FF;
}
table.sample1 tr:nth-child(2n+0){
background: #FF0;
}
#tate{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample2{
border-collapse: collapse;
}
table.sample2 th,table.sample2 td{
border:1px solid #000;
font-size:30px;
}
table.sample2 td:nth-child(2n+1){
background: #0FF;
}
table.sample2 td:nth-child(2n+0){
background: #FF0;
}
ちょっとテーブルの線作りはややこしいですが、&color(red){隙間（border-collapse:）はtableのクラスの方へ、線（border:）はtr,th,tdの方へ記述}してください。
*まとめ
子要素のn番目ということでその他にliやdtやddにも使えたりします。デザイン的には（白と灰色）、（白と薄い水色）のペアなどにすれば綺麗に見えるようになります。
~
~
以上
テーブルのデザインでよくシマシマのものを見かけます。これは行や列にclassを指定してもできるのですが、今回は&color(red){疑似要素:nth-child}を使って行っていきたいと思います。7月25日記事
~
~
イメージ
~
横方向
#image(width=300,yoko.png)
縦方向
#image(width=300,tate.png)
~
~
目次
#contents
~
~
----
~
*シマシマは横方向と縦方向？
シマシマにするには疑似要素:nth-childを使っていきます。これは、n番目の子となる要素に、スタイルを適用していくというものです。
n番目ということは縦のシマシマ(td)にもできそうですし、横のシマシマ(tr)にもできそうです。
ということで両方やってみます。
~
~
*コード
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>点数リスト</title>
</head>
<body>
<div id="yoko">
<table class="sample1">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
<div id="tate">
<table class="sample2">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
</body>
</html>
基本のタグはこちらでかまいません。
しかし、CSSのほうではtrのほうで、奇数用と偶数用でtr:nth-child(2n+0)やtr:nth-child(2n+1)と指定します。nは0から始まります。
~
~
CSS部
@charset "utf-8";
/* CSS Document */
#yoko{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample1{
border-collapse: collapse;/*これはテーブルのクラスへ*/
}
table.sample1 th,table.sample1 td{
font-size:30px;
border:1px solid #000;/*これはth,tdの方へ記述*/
}
table.sample1 tr:nth-child(2n+1){/*もし先頭行(th)を指定色でぬりつぶさない場合は2n+3*/
background: #0FF;
}
table.sample1 tr:nth-child(2n+0){
background: #FF0;
}
#tate{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample2{
border-collapse: collapse;
}
table.sample2 th,table.sample2 td{
border:1px solid #000;
font-size:30px;
}
table.sample2 td:nth-child(2n+1){
background: #0FF;
}
table.sample2 td:nth-child(2n+0){
background: #FF0;
}
ちょっとテーブルの線作りはややこしいですが、&color(red){隙間（border-collapse:）はtableのクラスの方へ、線（border:）はtr,th,tdの方へ記述}してください。
*まとめ
子要素のn番目ということでその他にliやdtやddにも使えたりします。デザイン的には（白と灰色）、（白と薄い水色）のペアなどにすれば綺麗に見えるようになります。
~
~
以上
