今回はHTMLと共にウェブページを形成するCSSの基本まとめです。
基本といえども侮るなかれ。私がウェブの世界に足を踏み入れたことはCSSはほとんど用いられておらず、HTMLタグだけでウェブページを作っていました。なので、ウェブページの「記述はHTMLで、外観はCSSで」となってからもCSSの理解をおざなりにして、プログラムが動的に生成するHTMLの解釈が混乱した時期がありました。ですので、基本ですが重要なCSSのセレクタについてここでおさらいしましょう。
「セレクタ」とは「どのHTMLタグに対してCSSを適用するか」を「選択(セレクト)」する役割を持つ記述です。HTMLファイルの中では同じHTMLタグが複数回使われることが多くありますが、それらのうちのどれかを選択するセレクタの書き方には様々な便利な方法があります。
<html> <head> <title>ドキュメントのタイトル</title> <style type="text/css"> セレクタ記述 { CSSで書いた様々な属性指定; } </style> </head> <body> セレクタをタグの中に含むHTMLで書いた様々な記述 </body> </html>
1. セレクタの種類(idとclass)
セレクタの書き方(=つまり、HTML記述の中のどのタグかを選択する書き方)は下記を例とするように様々で便利な書き方があります。
セレクタの種類には「id(アイディー)」と「class(クラス)」があります。前者は1つのHTMLドキュメント内に1つだけ固有に存在するもので、後者は複数あっても構いません。学生時代を思い出してもらうと分かりやすく、1つの学校という「HTML」にA組という「クラス」は1年A組や2年A組のように同じA組が複数あっても構いませんが、同じ学生番号である「アイディー」が2つ以上あると問題です。そのような理解です。
2. セレクタの使い方
セレクタ記述 | 意味 |
* | 全ての要素に適用 |
.class | クラス名がclassである要素に適用 |
tag.class | クラス名がclassである要素tagに適用 |
#id | 指定したID名がある要素に適用 |
tag1 tag2 | 要素tag1の下の階層にある要素tag2にスタイルを適用 |
tag1.class tag2 | クラス名がclassである要素tag1の下にある要素tag2にスタイルを適用 |
tag1 > tag2 | 要素tag1の直下の階層にある要素tag2にスタイルを適用 |
tag1.class > tag2 | クラス名がclassである要素tag1の直下にある要素tag2にスタイルを適用 |
tag1 + tag2 | 要素tag1に隣接している要素tag2にスタイルを適用 |
tag1 ~ tag2 | 要素tag1の後ろにある要素tag2にスタイルを適用 |
tag[property] | 属性propertyを持つ要素tagに適用 |
tag[property=value] | 値がvalueである属性propertyを持つ要素tagに適用 |
tag[property^=value] | 値がvalueで始まる属性propertyを持つ要素tagに適用 |
tag[property$=value] | 値がvalueで終わる属性propertyを持つ要素tagに適用 |
tag[property*=value] | 値がvalueを含む属性propertyを持つ要素tagに適用 |
tag:first-letter | 要素tagが囲む文字列の最初に現れる文字列にだけ適用 |
tag:first-line | 要素tagが囲む文字列の最初に現れる行にだけ適用 |
tag:first-child | 要素tagが囲む最初に現れる要素にだけ適用 |
tag:nth-of-type(n) | n番目に現れる要素tagに適用 |
tag:nth-of-type(odd) | 奇数番目の要素tagに適用 |
tag:nth-of-type(2n+1) | 奇数番目の要素tagに適用 |
tag:nth-of-type(even) | 偶数番目の要素tagに適用 |
tag:nth-child(2n) | 偶数番目の要素tagに適用 |
tag:nth-of-type(3n) | 3,6,9,12…番目の要素tagに適用 |
tag:nth-of-type(3n+1) | 1,4,7,10…番目の要素tagに適用 |
tag:nth-last-of-type(n) | 後ろからn番目の要素tagに適用 |
tag1:not(tag2/.class/#id) | 特定のtag2/class/idに該当しない場合に適用 |
tag.onmouse:hover | tagが指し示す領域がオンマウス時に適用 |
input[type=radio]:checked | そのラジオボタンがチェックされている場合に適用 |
.class:focus | クラスclassがフォーカスされた場合に適用(inputなど) |
input:invalid | フォームに入力されている値のvalidationで無効な入力である場合に適用 |
input:valid | フォームに入力されている値のvalidationで有効な入力である場合に適用 |
input:required | フォームに入力が必須である場合に適用 |
基本とされるCSSですがHTMLの解釈においてはとても大事です。上記は静的に生成されたHTMLとの協動を前提にしていますが、JavaScriptと併用してCSSではじめに規定した属性値を変える(例:特定の画面操作を受けてCSSが指定していた属性値を変える)こともできます。奥が深いです。