原文: How to Link CSS to HTML – Stylesheet File Linking

HTML は、web ページの構造を定義するために使用されるマークアップ言語です。CSS は、web ページの構造の見栄えを良くしたり、レイアウトを組むために使用されるスタイルシート言語です。

CSS で実装したスタイリングを HTML に反映するためには、CSS を HTML にリンクする必要があります。

リンクする方法として、インライン CSS、内部 CSS、外部 CSS があります。

ベストプラクティスとして CSS と HTML は分けた方がいいので、この記事では外部 CSS で HTML にリンクする方法を説明します。

CSS を HTML にリンクする方法

CSS を HTML にリンクするためには、link タグと複数の属性を使います。

link タグは自己終了タグで、HTML の head タグ内で使用できます。

link タグを使って CSS を HTML にリンクする:

<link rel="stylesheet" type="text/css" href="styles.css" />

以下のように、head タグ内に link タグを設置してください:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>Link CSS to HTML</title>
</head>

link タグの属性

rel 属性

rel 属性は、外部ファイルと自ファイルの関係を指定する属性です。CSS の場合、値は stylesheet になります。例えば、rel="stylesheet" のように指定できます。

type 属性

type 属性は、HTML にリンクしようとしているドキュメントのタイプを指定する属性です。CSS の場合、値は text/css になります。例えば、type="text/css" のように指定できます。

href 属性

href は“hypertext reference”の略称です。CSS ファイルの場所とファイル名を指定するために使用します。クリック可能なリンクになるので、CTRL を押しながらクリックして CSS ファイルを表示することができます。

例えば、CSS ファイルが HTML ファイルと同じフォルダにある場合、href="styles.css" のように指定できます。CSS ファイルが HTML ファイルと別のフォルダにある場合、href="folder/styles.css" のように指定できます。

まとめ

この記事では、link タグと複数の属性を使って外部 CSS を HTML にリンクする方法を紹介しました。

また、仕組みを知らないまま使ってしまわないように、それぞれの属性が持つ意味についても見ていきました。