【HTML５・CSS３】 CSSのセレクタやプロパティとは？初心者向けに解説

CSSとは、HTMLによって構造化された文書に対して、色を付けたり、文字を大きくするなどスタイルを指定する為の言語です。CSSを使用することで様々なデザインのWebページを作ることが出来ます！

CSSの基礎情報

リンクをコピーしました

この章では、CSSの基礎情報について解説します。

CSS (シーエスエス)

リンクをコピーしました

CSSは「シーエスエス」と読み、カスケーディング・スタイル・シート(Cascading Style Sheets)の略です。
スタイルシート(Style Sheets)とは、文書のスタイルを指定する技術全般の事です。Web上で圧倒的に使用されているスタイルシートの１つがCSSです。

※カスケーディング(Cascading)については、次の見出しで詳しく解説させて頂きます。

CSSの役割とは？

リンクをコピーしました

CSSは、HTMLと組み合わせて使用する言語です。HTMLとCSSそれぞれの役割は下記の通りです。

• HTML･･･HTMLタグを使って、コンピュータが理解出来る文書を定義する
• CSS･･･HTMLによって構造化された文書に対して、デザインを施して見た目を整える

つまり、Webページは、基本的にHTML(文書の構造) + CSS(見た目)で成り立っています。HTMLとCSSの役割を実際にブラウザで確認していきましょう！

※HTMLをもっと詳しく知りたいという方は、【HTML・CSS】HTMLを徹底解説！を参考にして下さい。

CSSの役割をブラウザで確認してみよう！

リンクをコピーしました

見た目を整えてくれるCSSが無くなると一体どの様な表示になるのでしょうか？「ピカわか！」のサイトを例に見ていきましょう。下記は「ピカわか！」のTOPページですが、CSSを取り除くと右側の表示になります。

CSSを取り除いた事によって、見た目を整えていたスタイル(装飾)が無くなり、HTMLで定義した文書だけが表示されているのが分かります。

Webページが上手く読み込まれていない時にも、上記の様な表示になる場合があります。

※サイトTOPにあるピカわかのロゴは、文字にスタイルを当てている訳ではなく、画像になります。

CSSの書き方

リンクをコピーしました

<h1>サイトのタイトル</h1>の文字の色を変更したい時、CSSでは下記の様に「セレクタ・プロパティ・値」でスタイルを指定する事が出来ます。

セレクタの種類

リンクをコピーしました

スタイルを適用させたい箇所をセレクタで指定しますが、セレクタには様々な種類があります。今回は、タグ・id・classのセレクタを指定する３つの方法を紹介します。

1. タグ･･･タグとは、HTMLタグ(h1など)のこと。セレクタにタグ名で指定します。
2. ID･･･CSSでは、#ID名。HTMLではタグの中にid="名前"で指定します。
3. class･･･CSSでは.class名。HTMLではタグの中にclass="名前"で指定します。

実際にコードで見る方が理解しやすいので、セレクタの指定方法を順番に見ていきましょう！

1
2
3
4
5
6
<!-- HTML -->

<div id="content"> ←ID指定
  <h2 class="top-h2">CSSの代表的なセレクタとは？</h2> ←class指定
    <p>Text</p> ←HTMLタグ指定
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS */

/* ID指定 */
#content { 
  background-color: green;
  padding: 10px;
}

/* class指定 */
.top { 
  color: white;
}

/* タグ指定 */
p { 
  font-size: 18px;
}

See the Pen arPodV by miyajima yuya (@pikawaka) on CodePen.

タグ指定は、汎用性のあるコードではなくなってしまうからです。他のページで同じタグを別のスタイルで使う時、必ず打ち消しのCSSを書かなければいけなくなります。

CSSの読み込まれる順番

リンクをコピーしました

CSSは、後から読み込まれるスタイルの優先順位が高くなります。

例えば、下記の様に文字の色を上から赤色、緑色、青色を指定していますが、スタイルが適用されるのは、後から読み込まれる青色になります。
他のスタイルは上書きされていきます。

1
2
<!-- HTML -->
<p>ここの文字の色は何色になるでしょうか？</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS */

/* 赤色 */
p {
  color: red;
}

/* 緑色で上書き */
p {
  color: green;
}

/* 青色で上書き */
p {
  color: blue;
}

See the Pen EBKVxZ by miyajima yuya (@pikawaka) on CodePen.

セレクタの読み込まれる順番

リンクをコピーしました

セレクタは、右から読み込まれます。複数の要素を指定する場合、タグを右側で指定すると、全てのタグを読み込んだ後に次の要素から探すので、効率が悪くなります。

この様なセレクタの記述をしてしまうと、レンダリング(ブラウザがWebページを表示すること)が遅くなってしまいます。レンダリングを最適化されたCSSを書くなら、セレクタにHTMLタグではなく、なるべくclassを使ってセレクタを指定することが好ましいです。

セレクタの詳細度

リンクをコピーしました

詳細度とは、スタイルを適用する際の優先度になります。
それぞれのセレクタが詳細度を持ち、同じ要素に対して複数のスタイルが宣言されている場合、詳細度によって適用されるスタイルが決まります。

セレクタの詳細度は、(A,B,C)の３段階で、A>B>Cの順番で評価されます。

表では、Aの詳細度を比べてみると[ID指定=1, class指定=0, 要素名=0]でID指定が優先されます。もし、それぞれのセレクタのAの詳細度が一緒だったらBの詳細度で優先度を決めます。そして、Bの詳細度も一緒だったらCで比べていきます。

下記の場合も、IDで指定したスタイルが適用され、文字が青色になります。

1
2
<!-- HTML -->
<p class="text" id="text">Text</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS */
/* (1, 0, 0) */
#text {
  color: bule; ←適用される!
}

/* (0, 1, 0) */
.text {
  color: pink;
}

/* (0, 0, 1) */
p {
  color: red;
}

また、複数の要素をセレクタで指定すると、詳細度が上がり優先度が高くなります。
詳細度の高さで文字の色は、赤色になります。

1
2
3
4
5
<!-- HTML -->

<div id="text">
  <p>Text</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* CSS */
/* (1, 0, 0) + (0, 0, 1) + (0, 0, 1)= (1, 0, 2) */
div#text p {
  color: red; ←適用される
} 

/* (0, 0, 1) + (0, 0, 1) = (0, 0, 2) */
div p { 
 color: yellow; 
}

/* (0, 0, 1) */
p {
  color: pink;
 }

詳細度の例外

リンクをコピーしました

詳細度が適用されない例外が下記の２つあります。

1.!important
強制的にスタイルを適用します。使用を避けるべき方法になるので注意しましょう。

1
2
3
4
/* CSS */
p { 
  color: red !important; 
}

2.HTMLへ直接スタイルを使用
CSSで指定したスタイルが無視されて、HTMLでスタイルを使用した方が適用される。

1
2
<!-- HTML -->
<p style="color: red ;">Text</p> 

▼ CSS初級者におすすめの１冊！HTMLやCSSを全く触れたことがない方でも手を動かしながらWebサイト制作が学べます。

HTML&CSSとWebデザインが 1冊できちんと身につく本

実際に手を動かして作りながらサイト制作のきほんが学べる!

楽天市場

Amazon

CSSの大きな特徴とは？

リンクをコピーしました

CSSは、カスケーディング・スタイルシート(Cascading Style Sheets)の略でしたが、カスケーディング(Cascading)とは、連鎖的に伝わるという意味で、階段の様な滝が上から流れてくるイメージになります。これはCSSの特徴をよく捉えていて、下記のコードの様に上流で定義したスタイルは下流へ引き継がれます。

See the Pen PrNzaM by miyajima yuya (@pikawaka) on CodePen.

body要素に背景色をピンクにすると、<body></body>の中の<h1>タグ、<ul>タグや<li>タグにスタイルが引き継がれます。この段階的にスタイルが引き継がれて適用される事こそCSSの大きな特徴になります。

実際にやってみよう！

リンクをコピーしました

CSSの優先順位なども考えながら解いてみましょう。CSSにコードを加えて文字の色を赤色に変更しましょう。

See the Pen gNxXaE by miyajima yuya (@pikawaka) on CodePen.

解答をみる

1
2
3
div#content p {
color: red;
}

今回は、CSSについて解説しましたが、CSSのスタイルシート言語の機能を拡張したSassを利用すると、コードも短く効率的にコーディングする事が出来るので便利です。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ