【HTML5・CSS3】CSSを徹底解説!

HTML5・CSS3

CSSとは

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

CSS (シーエスエス)
リンクをコピーしました

CSSは「シーエスエス」と読み、カスケーディング・スタイル・シート(Cascading Style Sheets)の略です。
スタイルシート(Style Sheets)とは、文書のスタイルを指定する技術全般の事です。Web上で圧倒的に使用されているスタイルシートの1つが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が適応されているサイトとCSSを取り除いているサイトを比較
CSSを取り除いた事によって、見た目を整えていたスタイル(装飾)が無くなり、HTMLで定義した文書だけが表示されているのが分かります。

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

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

CSSの書き方
リンクをコピーしました

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

セレクタの種類
リンクをコピーしました

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

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

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

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

<div id="content"> ←ID指定
  <h2 class="top-h2">CSSの代表的なセレクタとは?</h2> ←class指定
    <p>Text</p> ←HTMLタグ指定
</div>
css
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は、後から読み込まれるスタイルの優先順位が高くなります。

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

html
1
2
<!-- HTML -->
<p>ここの文字の色は何色になるでしょうか?</p>
css
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)の3段階で、A>B>Cの順番で評価されます。

セレクタ 詳細度
ID指定 #content (1, 0, 0)
class指定 .top (0, 1, 0)
要素名 p (0, 0, 1)


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

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

html
1
2
<!-- HTML -->
<p class="text" id="text">Text</p>
css
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;
}

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

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

<div id="text">
  <p>Text</p>
</div>
css
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;
 }


詳細度の例外
リンクをコピーしました

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


  1. !important
    強制的にスタイルを適用します。使用を避けるべき方法になるので注意しましょう。
  2. css
    1
    2
    3
    4
    
    /* CSS */
    p { 
      color: red !important; 
    }
    

  3. HTMLへ直接スタイルを使用
    CSSで指定したスタイルが無視されて、HTMLでスタイルを使用した方が適用される。
  4. html
    1
    2
    
    <!-- HTML -->
    <p style="color: red ;">Text</p> 
    


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とは、HTMLによって構造化された文書に対して、デザインを施して見た目を整える為の言語です。「セレクタ・プロパティ・値」でスタイルを指定し、後に書いたスタイルの方が優先順位が高くなり上書きされます。