CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで外部スタイルシートをリンクする方法をわかりやすく解説

CSSでは、外部スタイルシートをHTMLファイルにリンクすることができます。これにより、CSSの変更をHTMLとは独立して管理できるようになり、ページの読み込み速度の向上にもつながります。外部ファイルは、ドキュメントの<head>要素内に記述する<link>タグで指定します。

構文

外部CSSを読み込むための基本的な構文は以下の通りです。

<link rel="stylesheet" href="#location">

例1：基本的な外部スタイルシートの読み込み

以下の例は、CSSファイルをHTMLドキュメントに組み込む方法を示しています。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Text</h2>
<div>
<ul>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
</ul>
</div>
</body>
</html>

CSSファイル（style.css）

h2 {
    color: red;
}
div {
    background-color: lightcyan;
}

出力結果

これにより、以下のような表示結果が得られます。

CSSで外部スタイルシートをリンクする方法をわかりやすく解説

例2：背景画像とボックスシャドウの適用

次に、背景画像やボックスシャドウを含むスタイルを外部CSSから適用する例を見てみましょう。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

CSSファイル（style.css）

p {
    background: url("https://www.tutorialspoint.com/images/QAicon.png");
    background-origin: content-box;
    background-size: cover;
    box-shadow: 0 0 3px black;
    padding: 20px;
    background-origin: border-box;
}

出力結果

これにより、以下のような表示結果が得られます。

CSSで外部スタイルシートをリンクする方法をわかりやすく解説

まとめ

外部スタイルシートを利用することで、スタイルの一元管理が可能になり、コードの再利用性や保守性が大幅に向上します。また、ブラウザがCSSファイルをキャッシュできるため、複数ページで同じスタイルを共有する場合にはページの表示速度改善というメリットも期待できます。ぜひ実際のプロジェクトでも活用してみてください。

  1. CSSの@importルールで外部スタイルシートを読み込む方法

    CSSでは、別のCSSファイルの中にさらに外部のスタイルシートを読み込むことができます。この目的に使用されるのが@importルールです。@importは、ドキュメント内でスタイルシートをリンクする役割を持ち、一般的には、あるスタイルシートが別のスタイルシートに依存している場合などに活用されます。@importルールは、<head>要素内の@charset宣言の直後、かつスタイルシートの先頭に記述する必要がある点に注意してください。他のルールより後に記述すると無効になるため、必ず最初に書くようにしましょう。基本構文@importルールの構文は以下のとおりです。@import /*u

  2. CSSでメディア依存のスタイルシートを作成する方法

    メディア依存スタイルシートとは、基本的なスタイルシートの一種ですが、メディアタイプがドキュメントを表示しているデバイスの種類と一致した場合にのみ、HTMLドキュメントへ適用されるという特徴を持っています。メディア依存スタイルシートは、主に以下の3つの方法で作成できます。@media アットルールを使用する@import アットルールを使用するmedia属性を指定したHTMLの<link>要素を使用する例1：link要素のmedia属性を使った方法それでは、メディア依存スタイルシートを作成する具体的な例を見ていきましょう。ここでは、画面表示用（screen）と印刷用（print）で異