CSSレイアウト[TIPS]
セレクタとは
下記のようにCSSの指定の{ }の前にある、言わば名前のような部分を「セレクタ」と言い、
セレクタ { プロパティ : 値 ; } というカタチで使用する。
{ }内の最後の「; (セミコロン)」はプロパティ値指定の終了を表わし、1つのセレクタに対し、複数のプロパティの指定をする時これで区切る。
（例) h1 { color : blue ; } ←h1がセレクタ
セレクタには下記のような種類がある。HTMLの要素
body, div, span, h1〜6, a, p, ul, li, dl, dt, imgなど、HTMLで用意されている要素。
id属性
idで呼び出すセレクタ。先頭に「# (シャープ)」を付けます。1HTMLに1度しか呼び出せない。ユーザが好きな名前を付けられる。使える文字は、アルファベット・数字・ハイフン(-)・アンダーバー(_)。
※アンダーバー(_)はNN4.7では無効になるので使わない方が無難。
※数字は、例えば「#2column01」のように2箇所に使うと無効。「#twocolumn01」ならOK。
class属性
classで呼び出すセレクタ。先頭に「. (ピリオド)」を付けます。1HTMLに何度でも呼び出せる。ユーザが好きな名前を付けられる。使える文字は、アルファベット・数字・ハイフン(-)・アンダーバー(_)。
※アンダーバー(_)はNN4.7では無効になるので使わない方が無難。
※数字は、例えば「.2column01」のように2箇所に使うと無効。「.twocolumn01」ならOK。
疑似クラス
リンクに関する疑似クラスは4つある。
a:link（未訪問リンク）
a:visited（訪問済リンク）
a:hover（ロールオーバー時）
a:active（クリック中）
「a」や疑似クラスに関する詳細はこちら→「リンクの指定」
ほかに、言語に関する疑似クラス（例えば「:lang(en)」）、:first-child疑似クラス（ある要素内の初めてでてくる子要素に適用される）がある。
条件付きセレクタ
「#side #sidespace li a」のように「何々の中の何々」と、条件を指定したもの。「CSSの記述の優先度」の[条件付きセレクタ]での説明の通り、条件の多いものほど優先度が高くなる。
※条件付きセレクタで、例えば下記のように書くものは、
<h2 id="pankuzu">〜</h2>
他にも使用しているh2の中で、これだけをid指定で特定したいときに使用する。
CSSのセレクタは、このようになっている。
#main h2#pankuzu {}
h2のあとに「スペース」が無い事に注目。「スペース」を入れてしまうと反映されないので要注意。
<h2 id="pankuzu">〜</h2>
他にも使用しているh2の中で、これだけをid指定で特定したいときに使用する。
CSSのセレクタは、このようになっている。
#main h2#pankuzu {}
h2のあとに「スペース」が無い事に注目。「スペース」を入れてしまうと反映されないので要注意。