試行錯誤している時間が、リソースを食い潰す無視できない割合となってきているので、メモにまとめておく。
<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を包含する
マスの背景色づけの例をネットで漁っていて、同じ動作の２通りの記述を見つけた。
普段は、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>
| AAA | BBB | CCC | DDD |
|---|
| EEE | FFF | GGG | HHH |
|---|
この書き方では、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>
:nth-childが格好いい
表も大きくなると、縦横の位置関係が見づらくなる。簡単に１マス毎１段毎に塗り分ける方法がある。
昨日の記事でも使ってみたが、やはり格段に見やすくなる。
<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>
| AAA | BBB | CCC | DDD | EEE |
nth-childは、セレクタの中の擬似クラスと呼ばれるもの。ほかにも様々なものがある。
互換性の問題ははらみつつも、対応していればきれいに表示される、というだけなのでどんどん使いたい。
0 件のコメント:
コメントを投稿
.