since 2007.8 by K-ichi

ときどき表を掲げて<table>を使っているが、なんだか毎度毎度つまづいている気がする。
試行錯誤している時間が、リソースを食い潰す無視できない割合となってきているので、メモにまとめておく。

<style>は<body>内に置いてもよい

tableなどを装飾する際、タグのstyle属性で直接CSS(Cascading Style Sheets)を書くこともある。が、基本的にはstyleタグでまとめておきたい。
ところがネットで調べると、styleは必ずhead内に置け、とある。記事を書いていて「ここはちょっとキメたい」ときには使えないことになる。
表、文章、画像など表示されるブツ自体はbody内に置かれているので、その中で完結できればそれに越したことはない。
外部ファイルにしておいてheadで読み込ませ、記事を書く毎にそれもアップデートすれば可能ではあるが、いろいろと面倒が多い。世の中はどうかと調べてみると……

・実動上は、<body>内に書いても問題ない。 → <body>内に<style>を設定したときの動作仕様
・HTML5ではstyleタグにscoped属性が追加され、body内の特定範囲内でstyleを利かすことができる。 → 特定の範囲内にのみスタイルを適用できる scoped 属性
・実際問題としてブラウザが対応しないので、なかったことになっている? → ★HTML5タグリファレンス <style> …… スタイルシートを記述する
・じつは仕様が変わったので、body内で使ってもよくなった。 → CSSファイルを<head>内ではなく</body>直前で読み込む(コメント)

なお、複数のtableがあって飾り分けたいときは、tableタグにclass属性、id属性など追加して、CSS内で指定する。

backgroundはbackground-colorを包含する

マスの背景色づけの例をネットで漁っていて、同じ動作の2通りの記述を見つけた。
普段は、background-colorプロパティを使っていたのだが、background:#000;のようなページも多く見かける。
どうやら後者は、複数の値をまとめて記述できる形式らしい。 → 【CSS】background-colorとbackgroundの違い

backgroundでは、background-color、background-image、background-repeat、background-position、background-attachmentが一括指定できる。
boderやmargin、fontなどにも、似た関係のプロパティがある。

グループ化したセレクタは親要素から書く

CSSのセレクタ(適用するタグやclassなど)は、スペースで区切って親子関係を表す。
まったく同じスタイルを別の場所にも適用したければ、その場所をコンマで区切って列挙する。
<style>
table.hyo1 td,th {
   border : 1px solid black;
}
</style>
<table class="hyo1">
<tr>
<th>AAA</th><td>BBB</td><td>CCC</td><td>DDD</td>
</tr>
</table>
<table class="hyo2">
<tr>
<th>EEE</th><td>FFF</td><td>GGG</td><td>HHH</td>
</tr>
</table>
hyo1テーブル配下のtdとthに罫線を表示させるつもりが……
AAABBBCCCDDD
EEEFFFGGGHHH

この書き方では、thセレクタは親要素を持ってない。つまり、存在するすべてのthタグに適用される。
styleの中身は、正しくは以下のように記述する。
<style>
table.hyo1 td,
table.hyo1 th {
   border : 1px solid black;
}
</style>

マスの隙間対策はtableにCSSを適用する

昔のブラウザでは、tableを使えばマスが表示されたと記憶するが、モダンブラウザでは何も出ない。
上記の例のように、borderで罫線をかけてやっても、表ではなくタイル貼りになってしまう。
この隙間を無くすには次のようにする。
<style>
table {
  border-collapse : collapse;
  border-spacing : 0;
}
</style>
trでもtdでもなく、tableに対して指定する。

:nth-childが格好いい

表も大きくなると、縦横の位置関係が見づらくなる。簡単に1マス毎1段毎に塗り分ける方法がある。
昨日の記事でも使ってみたが、やはり格段に見やすくなる。
<style>
table#id_20180325222020 td:nth-child(odd) {
  background-color : aqua;
}
</style>
<table id="id_20180325222020">
<tr>
<td>AAA</td><td>BBB</td><td>CCC</td><td>DDD</td><td>EEE</td>
</tr>
</table>
この例では、対象idの付いたテーブルの、td要素の兄弟要素(同じ深さにいるtdタグら)の奇数番目(odd)が、水色に塗られる。
AAABBBCCCDDDEEE

nth-childは、セレクタの中の擬似クラスと呼ばれるもの。ほかにも様々なものがある。
互換性の問題ははらみつつも、対応していればきれいに表示される、というだけなのでどんどん使いたい。

0 件のコメント:

コメントを投稿

.

関連記事


この記事へのリンク by 関連記事、被リンク記事をリストアップする」記事

ブログ アーカイブ