前回の 汎用タグの役割 – HTML基礎 その4 では CSS について簡単に説明しました。

今回からは、 CSS(Cascading Style Sheets) の基礎について学習していきます。

CSS は、単体では何もできません。HTMLと組み合わせて使用する言語となります。HTMLとは書き方も使い方も異なりますが、とても重要な言語になります。

HTML designed by CSS

Cascading Style Sheets

CSS を使って HTML タグを自由に装飾をすることができ、この CSS を使ってWebページのデザインを行います。

以下で、HTML のみで表示した場合と、CSS を使用した場合を 同じHTMLのコード を使用して 比較してみます。

使用する HTML のコード


<header>
    <div>
        <img src="https://picsum.photos/200" alt="ランダムで表示される画像">
    </div>
    <nav>
        <ul>
            <a href="#"><li>リンク1</li></a>
            <a href="#"><li>リンク2</li></a>
            <a href="#"><li>リンク3</li></a>
        </ul>
    </nav>
</header>
<main>
    メインコンテンツエリア
</main>
    

HTMLのみで記述した場合

メインコンテンツエリア

HTML を CSS を使って装飾した場合

メインコンテンツエリア

CSSを使えば HTMLを装飾することができる ということが分かって頂けたでしょうか。

このCSSを利用した例では、背景の色や画像のサイズ、画像やリンクの位置を CSS で調整しています。

このように CSS を使用すれば、「使いやすい」「見やすい」と感じて貰えるような ユーザビリティ の高いWebサイトを提供することができるようになります。

CSSの構文

CSS は セレクタ宣言ブロック で構成されます。

セレクタ には、どの HTMLの要素 に CSS を適用するかを記述します。

宣言ブロック には、装飾する 属性 を記述します。

CSSの構文
セレクタ { 
  [宣言] 属性 : 値;
  [宣言] 属性 : 値;
  ...
}
            

h1 { 
  color: red;
  font-size: 24px; 
}
            

上記の例では、h1タグ文字色を red(赤)に、フォントの大きさを 24px に表示するよう記述しています。

セレクタに対する宣言ブロックは波括弧({})で括り、属性 と 値はコロン(:)で繋げます。また、終端文字にセミコロン(;)が必要です。

悪い例
h1{color:red;font-size:24px;}
            

インデント や スペース、 改行 がないと 非常に読みにくい コードになってしまうので、気をつけましょう。

CSSの記述箇所

Where to write the CSS(CSSをどこに書くのか)

CSS を記述できる場所は3つあります。

  • インラインスタイル
    HTMLタグの style属性 に記述する方法
  • 内部スタイルシート
    styleタグ 内に記述する方法
  • 外部スタイルシート
    .css ファイル に記述し linkタグ で読み込む方法

インラインスタイル

前回の 汎用タグの役割 – HTML基礎 その4 ではこの方法で試しました。

インラインスタイルでは、HTMLタグの style属性 にそのまま記述するため、セレクタと波括弧({})は不要です。

この方法は、style属性に記述する量が多くなると コードが読みにくくなる といったデメリットと、後述する CSSの優先度 の問題で推奨されません

何かを試してみたい時、または、不変なスタイルを適用させる場合 に限定して使用しましょう。

インラインスタイルで記述した例
<h1 style="color: red; font-size: 24px;">Hello World</h1>
            

内部スタイルシート

styleタグ を作成し、その内部に記述します。

この styleタグは、 headタグ内 に記述する場合が多いですが、bodyタグ 内に記述することもできます。

同じセレクタ の 同じ属性 に複数のスタイルを指定した場合、後に読み込まれた CSS が優先的に反映されます。

内部スタイルシートで記述した例
<style>
    h1 { 
        color: red;
        font-size: 24px; 
    }
</style>
            

外部スタイルシート

CSSを記述した .css ファイルを作成し、HTMLの linkタグ を使用して読み込みます。

HTML の拡張子は .html ですが、CSS の拡張子は .css になります。(拡張子については はじめてのHTML – HTML基礎 その1 をお読みください。)

HTMLで CSS を読み込むには headタグ内で linkタグ を使用します。

ここでは style.css を作成し、linkタグ で読み込むデモを記載します。

この方法が最もよく使用されます。また、この方法で外部の CSSフレームワーク を読み込み、デザインされたCSS を無料で使用することも可能です。

CSSフレームワーク – CSS基礎 その4

style.css
h1 { 
  color: red;
  font-size: 24px; 
}
            
index.html
<head>
    <title>...</title>
    <link rel="stylesheet" href="./style.css">
</head>
            

CSSの優先度

Priority(優先度)

同じセレクタ の 同じ属性 に複数のスタイルが指定されていた場合、どのスタイルが適用されるかには、明確な優先度が決められています。

まず、前提として、後に読み込まれたスタイルの方が(前のスタイルを上書きするため)優先度が高いです。

例えば、a-style.css を読み込んだ次の行に、b-style.css を読み込むように記述していると、同様のスタイルの指定がある場合は b-style.css のスタイルが反映されます。

また、CSSの記述箇所によって優先度が異なります。

優先度高い順

  1. インラインスタイル
  2. 外部および内部のスタイルシート
  3. ブラウザごとのデフォルトスタイル

同等の優先度で同じ要素に異なるスタイルが定義されている場合、最後に定義されたスタイルで上書きされます。

他にも セレクタ の書き方によって優先度が変わりますが、これは セレクタとは – CSS基礎 その2 で詳しく解説します。

優先度を変える !important

インラインスタイルは最も優先度が高く、他の方法でスタイルを適用しにくいため style属性 へ直接記述する方法は推奨されません

しかし、この様な 優先度をガン無視してスタイルを強制的に上書きする方法があります。

それが、!important です。

使い方は、宣言ブロックの値の後に !important を付け足すだけです。

!importantを使用した例

以下のようにインラインスタイルでCSSを定義した場合でも、

インラインスタイル
<h1 style="color: blue; font-size: 24px;">Hello World</h1>
            

!important を指定してやれば、

内部スタイルシート
<style>
    h1 { 
        color: red!important;
        font-size: 24px; 
    }
</style>
            

!important を使用した color: red が優先され、文字色に 赤色 が適用されます。

この様に、 !important を使用すことですべてのスタイルを上書きすることができました。

しかし、この方法は最終手段であり、頻繁に使用することはあまり好ましくありません

本当に必要かどうか、よく考えて使用するようにしましょう。

課題

index.html を作成し、h1タグ内の文字を「CSSの基礎」としたファイルを作成してください。

また、内部スタイルで、h1 タグ の文字の大きさを 34px に変更し、文字の色を #673ab7 に変更して表示してください。

文字サイズが大きくなり、文字色が紫色に変更していることを確認してください。

外部スタイルシート「 index.css 」を作成し、課題1の h1タグ の 文字色 を #f44336 に変更する CSSを作成し、index.html で読み込んでください。

読み込む順番によって適用されるスタイルが変更されることを確認するため、課題1の内部スタイルの文字色(紫)が適用される場合と、今回の文字色(赤)が適用される場合の2つを試してください。

index.htmlh1 のインラインスタイルに 文字色が #4caf50 となるようにスタイルを指定してください。

ブラウザで表示し、文字色が(緑)になっているかどうかを確認してください。

課題1の 内部スタイルシートの h1文字色が 最優先で適用されるように 内部スタイルを変更してください。

また、その結果をブラウザで確認し、紫色になっていることを確認してください。