Lesson4 6. CSSの適用方法

7.1 外部ファイルとして読み込む

すでに解説したとおり、CSSをHTML文書に適用する際はHTML文書のhead内でCSSファイルを参照します。

<link rel="stylesheet" href="https://l-works.design/css/style.css">

実はHTMLにCSSを適用するには、この他に2つの方法があります。
ただし基本は外部ファイルとして読み込む方法(上で紹介した記述)ですので、特に理由がない限りは外部ファイル化したCSSを読み込みましょう。

7.2 head内にstyleとして適用

<head>要素内で使用可能な<style>タグ内にはCSSを記述することができます。
ここに記述されたスタイルは、このHTML文書内のみで有効となります。

<head>
    <style>
        p.red{color: #ff0000;}
    </style>
</head>

外部ファイル化したCSSは、通常多くのHTMLファイルから読み込まれます。
反対にサイト内の特定のHTMLページのみに適用したいスタイルがある時は、特定のHTML文書内に直接スタイルを記述したほうが合理的です。

後から読み込まれるスタイルが優先されますので、head要素内でCSSを読み込む行よりも後にstyle要素を記述することで、外部ファイル化されたCSSを上書きすることができます。

7.3 HTMLタグ内のstyle属性として適用

style属性を使うことで、HTMLタグの中に直接CSSを書き込むことができます。

<p style="color: red;">ここが赤文字</p>

この方法は、制作作業中に一時的にスタイルの確認をしたい時などに有用です。
これまでに紹介した方法と違い、セレクタが不要なため若干記述が異なります。

この方法を使用すると、head要素内で読み込まれたスタイルよりも確実に後から読み込まれるため、HTMLタグ内に記述したCSSは常に優先的に適用されます。

ここまで3種類の方法を紹介しましたが、最初に述べたとおりCSSファイルは基本的には外部ファイル化して使用しましょう。
理由としては、外部ファイルにして共有化したほうがサイト全体としてのメンテナンス性が高く保てること、また各々のHTML文書が簡素化され視認性が良くなることなどが挙げられます。

7.4 リファレンス

CSSに関する一覧が欲しい場合は下記のリファレンスを参照しましょう。

ただし、HTMLと同じくとても多いので、覚える必要はありません。
必要に応じて参照、もしくは検索できるようにしましょう。

CSSリファレンス

擬似要素

擬似クラス