Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

 

CSSの記述法

CSSの基本書式

p {color:red;}

主なセレクタ

ユニバーサルセレクタ *

セレクタに、*(アスタリスク)を指定すると、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 名でもよい。

HTML

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

CSS

#contact {

background-color: #0000ff;

}

CSS

#menu li {   }

 

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

CSS

ul#menu

 

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

子孫セレクタ a b

親要素の中の要素(子孫要素)に対するセレクタ。

親要素 子孫要素

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

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

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

<div>

<p>陸上競技</p>

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

 <span>マラソン</span>

</div>

 

div span {

background-color: #0000ff;

}

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

子供セレクタ a>b

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

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

main>p {

background-color: #0000ff;

}

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

隣接セレクタ a+b

隣接する兄弟要素を同時に設定するセレクタ。

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

header + main {

background-color: #0000ff;

}

 

疑似クラス

ある要素が特定の条件下にある時だけのセレクタを作るためのもの。

:link 未訪問のリンク。
:hover リンクにカーソルが重なっている時。
:active リンクをクリックしている時。
:visited 訪問済みのリンク。
:focus リンクにフォーカスしている時。
:first-child 要素の中の最初の子要素
: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 要素のみ)

CSS3疑似要素

::first-line 要素の最初の1行
::first-letter 要素の最初の1文字
::before 要素の先頭の生成コンテンツ
::after 要素の末尾の生成コンテンツ
::selection ユーザーが選択した領域

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

span 要素

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

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

疑似要素

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

:first-letter 要素の最初の1文字
:first-line 要素の最初の行
:before 要素内の先頭にコンテンツを生成
:after 要素内の末尾にコンテンツを生成

:before 疑似要素と :after 疑似要素は、要素の存在しない箇所に、そこにまるで要素が存在するように振る舞わせることができる。

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

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

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

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

セレクタの優先度

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

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

セレクタの詳細度

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

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

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

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

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

詳細度の高低の判定

基本法則

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

!important

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

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

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

【参照】

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

コメントを残す