別の記事を下書き中にふと思いついたアイデアを試してみたらうまくいったので、記録しておきます。
先日の記事の全国小学生麻雀大会の点数表です。
タテの列ごとに文字の表示位置が違いますよね。左寄せ、中央、右寄せ、と三種類あります。
これ、何も指定しないとぜんぶ左に寄ってしまうので、セルごとにスタイル属性を指定しているわけです。
一行目、東家のデータの分だけソースを見てみましょう。
見易いように行分けします。
上の表はデータが四行なので、これと同じようなのを四回書く必要があるわけです。
実際にはコピペで作業するのでそう手間でもないんですが、ある列だけ表示位置を変えたい、と思ったら、データ数分だけ手作業で書き変えることになります(一括置換で済む場合もありますが)。
excelみたいにタテの列ごとにセルの表示設定ができれば楽なのに、と思いつつ、四行だけだから…と、この点数表に関しては不便を忍んできました。
でも、行数が増えるとそうも言ってられなくて…
この○番目の項目だけ指定できないかな…ん?
○番目 → n番目 → :nth-child が使えるんじゃね?
この<td>タグは、<tr>タグの子要素だから、こんな風に書けるんじゃないか。
NS史上滅多に無いぞ…?
HLML の方の<style>タグを外しても、文字はちゃんと中央に寄りました。
でも、この書き方だとページ内のすべての<tr>タグに効いてしまうし、クラス指定をするにしても<tr>タグは行数ぶんあるんだから手間が無くなるわけでもない…もっと上位のタグで一括指定できないか?
と、ダメもとでこんな書き方をしてみました。
<table>家の系図はこんな感じです。
孫の<tr>が何人もいますから、その系統ごとの<td>があり、td:nth-child(3)とはどこから数えて3なのか、CSS はちゃんと判断してくれるのだろうか、という懸念。
しかし、td:nth-child(3)は、その直上の親要素から見て3番目にあたる<td>、ということのようで、
しっかり意図したとおりに動いてくれました(幸)。
例えば上の表で、やっぱり選手名は中央寄せじゃなくて左寄せがいいなと思ったら、これまではいちいちすべての行にわたって style="text-align:center;" を削除するなり center を left に書き変えるなりしなければならなかったところ、
ちゃんと反映されました。
めでたしめでたし。
これは CSS擬似クラスなので、
ほぼ二年経っていますが、修正しておきました…
家 | 学校・学年 | 選手 | 開始時 | 得失点 | 終了時 |
---|---|---|---|---|---|
東家 | 湯町小6 | 慕 | 30000 | +12600 | 42600 |
南家 | 首里小6 | 若菜 | 32600 | -12600 | 20000 |
西家 | ? | めがね | 30000 | ±0 | 30000 |
北家 | ? | 遅刻少女 | 27400 | ±0 | 27400 |
先日の記事の全国小学生麻雀大会の点数表です。
タテの列ごとに文字の表示位置が違いますよね。左寄せ、中央、右寄せ、と三種類あります。
これ、何も指定しないとぜんぶ左に寄ってしまうので、セルごとにスタイル属性を指定しているわけです。
一行目、東家のデータの分だけソースを見てみましょう。
見易いように行分けします。
<tr> <td style="text-align: center">東家</td> <td>湯町小6</td> <td style="text-align: center">慕</td> <td style="text-align: right">30000</td> <td style="text-align: right">+12600</td> <td style="text-align: right">42600</td> </tr>「湯町小6」は左寄せなので何も指定していませんが、他はすべて style属性で text-align(文字の表示位置)を center とか right とか指定しています。
上の表はデータが四行なので、これと同じようなのを四回書く必要があるわけです。
実際にはコピペで作業するのでそう手間でもないんですが、ある列だけ表示位置を変えたい、と思ったら、データ数分だけ手作業で書き変えることになります(一括置換で済む場合もありますが)。
excelみたいにタテの列ごとにセルの表示設定ができれば楽なのに、と思いつつ、四行だけだから…と、この点数表に関しては不便を忍んできました。
でも、行数が増えるとそうも言ってられなくて…
この○番目の項目だけ指定できないかな…ん?
○番目 → n番目 → :nth-child が使えるんじゃね?
この<td>タグは、<tr>タグの子要素だから、こんな風に書けるんじゃないか。
tr td:first-child{ /* :first-child は :nth-child(1)と書いても同じ */ text-align: center; }これがなんと、一発でうまくいったんですよ(喜)。
NS史上滅多に無いぞ…?
HLML の方の<style>タグを外しても、文字はちゃんと中央に寄りました。
でも、この書き方だとページ内のすべての<tr>タグに効いてしまうし、クラス指定をするにしても<tr>タグは行数ぶんあるんだから手間が無くなるわけでもない…もっと上位のタグで一括指定できないか?
と、ダメもとでこんな書き方をしてみました。
.score td:nth-child(1), .score td:nth-child(3) { text-align: center; } .score td:nth-child(4), .score td:nth-child(5), .score td:nth-child(6) { text-align: right; }で、HTML の方は、<table>タグに上のCSSで定義した score というクラス名を与えます。
<table class="score" border="1">すると、いちばん上にご紹介したコードが、こんなにすっきり書けるようになりました。
<tr> <td>東家</td> <td>湯町小6</td> <td>慕</td> <td>30000</td> <td>+12600</td> <td>42600</td> </tr>これなら<td>タグを一行にまとめて書いても見づらくありませんね。
<td>東家</td><td>湯町小6</td><td>慕</td><td>30000</td><td>+12600</td><td>42600</td>懸念していたのは、クラス指定した<table>要素と、スタイル指定をしたい<td>要素とは直結の親子ではないので、果たして :nth-child が効くのか、ということでした。
<table>家の系図はこんな感じです。
<table>┳<caption><td>は<table>から数えて四代目、曾孫にあたるのです。
<table>┣<thead>━<tr>┳<th>
<table>┃<thead>━<tr>┣<th>
<table>┃<thead>━<tr>┗<th>
<table>┗<tbody>┳<tr>┳<td>
<table>┗<tbody>┃<tr>┣<td>
<table>┗<tbody>┃<tr>┗<td>
<table>┗<tbody>┣<tr>┳<td>
<table>┗<tbody>┃<tr>┣<td>
<table>┗<tbody>┃<tr>┗<td>
<table>┗<tbody>┗<tr>┳<td>
<table>┗<tbody>┣<tr>┣<td>
<table>┗<tbody>┣<tr>┗<td>
孫の<tr>が何人もいますから、その系統ごとの<td>があり、td:nth-child(3)とはどこから数えて3なのか、CSS はちゃんと判断してくれるのだろうか、という懸念。
しかし、td:nth-child(3)は、その直上の親要素から見て3番目にあたる<td>、ということのようで、
しっかり意図したとおりに動いてくれました(幸)。
例えば上の表で、やっぱり選手名は中央寄せじゃなくて左寄せがいいなと思ったら、これまではいちいちすべての行にわたって style="text-align:center;" を削除するなり center を left に書き変えるなりしなければならなかったところ、
.score td:nth-child(3) { text-align: left; }CSSを一行変えるだけで、これこのとおり
家 | 学校・学年 | 選手 | 開始時 | 得失点 | 終了時 |
---|---|---|---|---|---|
東家 | 湯町小6 | 慕 | 30000 | +12600 | 42600 |
南家 | 首里小6 | 若菜 | 32600 | -12600 | 20000 |
西家 | ? | めがね | 30000 | ±0 | 30000 |
北家 | ? | 遅刻少女 | 27400 | ±0 | 27400 |
ちゃんと反映されました。
めでたしめでたし。
【平成29年4月18日追記】
ブログのCSSメンテナンスをしていたら、この記事にnth-child
というキーワードが連発されているのに気づきました。これは CSS擬似クラスなので、
:nth-child
と、アタマにコロンをつけるのが正しい表記です。ほぼ二年経っていますが、修正しておきました…
コメント