[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

CSSの記述法

CSSの基本書式

p {color:red;}

セレクタ

具体的に、どの箇所にCSSを適応させるのかを明確に指示させるもの。

主なセレクタ

ユニバーサルセレクタ *

セレクタに、*(アスタリスク)を指定すると、HTML文書の全ての要素にスタイルが適用される。

* {

background-color: #0000ff;

}

タイプセレクタ

タイプセレクタとは、HTMLファイルのp,h1,h2など各要素に対するセレクタである。

指定した要素に、スタイルが適用される。

h1 {

background-color: #0000ff;

}

クラスセレクタ

HTMLに、class 属性を指定した要素に、スタイルを適用する。

大文字と小文字は、区別される。

HTML

先頭を数字で始めることはできない。

CSS

[要素名.class属性名]と記述するが、要素名を省略できる。

[要素名.class属性名]の場合

その要素限定に適応するclass属性となる。

要素名を省略した場合。.class属性名

どの要素でも利用可能な汎用class となる。

HTML

<p class=”points”>クラスセレクタ</p>

CSS

.points {

background-color: #0000ff;

}

.classA.classB

classAであり、かつclassB を表わす。

IDセレクタ

HTML内でid属性が指定されている要素にスタイルを適用する。

id属性

リンクの移動先やJavaScriptで要素を特定する場合にも機能する。

  • 1ページ内に1つしか設定できない。
  • 数字で始めることはできない。
  • 大文字と小文字を区別する。

1.<section id=”Profile”>~</section>

2.<section id=”profile”>~</section>

1と2では、同じとは認められない。

CSSでは、[要素名#id名」とするが、単に、#id 名でもよい。




class 名も含めて、後のサイト編集などを行うコーダーのためにも、パッと見てわかる、誰でもわかりやすい名前を付けるよう心懸ける。

HTML

<p id=”contact”>IDセレクタ</p>

CSS

#contact {

background-color: #0000ff;

}

CSS

#menu li {   }

この場合、menuというID名が付けられた要素の下にあるli要素にCSSを適応する。

CSS

ul#menu

menu というIDセレクタ名を付けられたul要素。

属性値セレクタ

input[type=”属性値”]

セレクタの組み合わせ

子孫セレクタ 親要素 子要素

親要素の後に、子要素を半角スペースを入れて、配置。

左のセレクタの適用対象の要素に含まれる右のセレクタの適用対象に、CSS が適用される。

親要素 子孫要素

半角スペースでセレクタを繋ぐ。

ex) [div p] div要素内のp要素に、スタイルが適用される。

[div p strong …] というように、要素を絞り込むことができる。

<div>

<p>陸上競技</p>

<p><span>水泳</span></p>

 <span>マラソン</span>

</div>

 

div span {

background-color: #0000ff;

}

この場合、「水泳」と「マラソン」に、背景色がつく。

要素セレクタclass セレクタ

要素セレクタに続けて、class セレクタを記述すると、「その要素の中の、その class 名がついたもの。」に、CSSを適用できる。

セレクタ,セレクタ

セレクタをカンマで区切り、並列する。

複数のセレクタに、同時に、スタイルを適用させることができる。

子供セレクタ a>b

特定の親要素の子要素にのみ、スタイルを適用する。

親要素の後に、「>」を付けて指定する。

main>p {

background-color: #0000ff;

}



子孫セレクタでは、子要素、孫要素全てに指定されてしまうのに対し、子供セレクタは、指定した要素の直下の子要素のみを指定し、孫要素以下の要素には、スタイルが適応されない。

隣接セレクタ a+b

同じ親要素を持ち、隣接する兄弟要素を同時に設定するセレクタ。

要素間に、「+」を付けて、複数の要素を指定する。

header + main {

background-color: #0000ff;

}

 

疑似クラス

ある状況の要素を対象にした限定的なセレクタを作るためのもの。

サイトに、動的な効果を与えることができる。

[要素名:状態]という形で記述する。

[:] の前後にスペースを入れない。

:link 未訪問のリンク。
:hover リンクにカーソルが重なっている時。
:active リンクをクリックしている時。
:visited 訪問済みのリンク。
:focus リンクにフォーカスしている時。
:first-child 要素の中の最初の子要素
nth-child n 番目の子要素
:lang() 要素にその言語コードが指定されている場合

CSS3で追加されたセレクタ

IE9以上で利用できる。

間接セレクタ E`F

兄要素の後に続く全ての要素Fに、スタイルを設定するセレクタ。

CSS3 疑似クラス

構造疑似クラス E:last-child 最後の子要素であるE要素
E:nth-child(n) n番目の子要素であるE要素
E:nth-last-child(n) 最後からn 番目の子要素であるE要素
E:only-child 唯一の子要素であるE要素
E:first-of-type 最初のE要素
E:last-of-type 最後のE要素
E:nth-of-type(n) n 番目のE要素
E:nth-last-of-type(n) 最後から n 番目のE要素
E:only-of-type 唯一のE要素
:root 文書のルート要素(html 要素)
E:empty 子を持たないE要素
否定疑似クラス E:not(s) セレクタ s ではない
ターゲット疑似クラス E:target ターゲットになるE要素
UI 疑似クラス E:enabled 入力可能状態なE要素(UI 要素のみ)
E:disabled 入力不可状態なE要素(UI 要素のみ)
E:checked 選択された状態のE要素(UI 要素のみ)

疑似要素

疑似要素とは?

実際には、要素が存在しないのに、擬似的に要素が存在するかのようにみなし、スタイルを設定するセレクタ。

例えば、要素の一部分を独立した要素として取り出したり、実際には存在しない要素を作り出したりすることができる。

疑似要素の記述の形式

:: 疑似要素

:(コロン)を2つ続けて記述する。

::first-line 要素の最初の1行にスタイルを適用
::first-letter 要素の最初の1文字にスタイルを適用
::before 要素の前にコンテンツを挿入
::after 要素の末尾にコンテンツを挿入
::selection ユーザーが選択した領域にスタイルを適用
::hover カーソルを要素の上に持ってきた場合のスタイルを適用
::visited 訪問済みのリンク要素のスタイルを適用

CSS3からは、先頭のコロンが1つから2つになった。

::before 疑似要素と ::after 疑似要素でコンテンツを生成させるためには、content プロパティを使う必要がある。

content プロパティでは、テキスト、画像、空のボックスを生成することが可能である。

生成された ::before 疑似要素と ::after 疑似要素は、通常の要素のように、色や背景、サイズ指定などができる。

情報としてではなく、あくまで装飾要素として用いる。

span 要素

文字要素の何もない領域に、スタイル要素を追加する。

そして、その span 要素に、class属性や id属性を追加することで、個別にスタイル設定していく。

 

セレクタの優先度

同じ場所の同じプロパティに対し、異なる値が指定された場合、「あとから記述されたものを優先」して、値が上書きされる。

ほかに、セレクタの詳細度によって、優先順位が変わってくる。

セレクタの詳細度




セレクタがどれだけ細かく指定されているかを示すもの。

詳細度が同じセレクタの場合

あとから記述されたセレクタが優先される。

詳細度が異なるセレクタの場合

記述され箇所に関わらず、詳細度の高いセレクタが優先される。

詳細度の高低の判定

基本法則

  1. [タグ<class < id ] の順に詳細度は高くなり、優先順位は上がる。
  2. 「外部参照<内部参照<インライン指定」の順に詳細度は高くなり、優先順位は上がる。
  3. 子孫セレクタ等でセレクタが複数になっている場合は、「より詳しく」指定されている方が優先される。

!important

プロパティの後ろに、[!important] と記述すると、詳細度を無視し、その指定が最優先される。

.main ( background-color: red !important; }

ただし、乱用は避けること。

【参照】

[amazonjs asin=”4797354437″ locale=”JP” tmpl=”Small” title=”Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)”]

[amazonjs asin=”4798142204″ locale=”JP” title=”HTML5&CSS3標準デザイン講座”]

(Visited 1,143 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

One thought on “主なセレクタの指定方法”

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください