外部のスタイルシートを読み込むlink要素
HTMLのドキュメントにCSS(スタイルシート)を読み込むには、head要素(<head>~</head>)の中に「link要素」を記述します。
link要素の「rel属性」で「stylesheet」を指定し、「href属性」でファイルのパスを指定します。
また、読み込むファイルの形式や性質(MIMEタイプ)を、「type属性」で記述します。
CSSに関しては、値が「text/css」となります。
CSSはHTMLの中に直接記述することもできますが、CSSファイルを別にすることで、複数のHTMLドキュメントで1つのCSSを読み込むことができ、ソースコードの管理や更新、追加、修正が容易になります。
CSS読み込みの記述方法
<link rel="stylesheet" href="CSSファイルのパス" type="text/css">
rel属性では値を「stylesheet」と記述し、href属性でCSSファイルのパスを記述します。
相対パス、絶対パスのどちらでも指定可能です。
ファイルのパスが間違っていると、特にエラーも表示されず、CSSも反映されません。
type属性で、CSSのMIMEタイプである「text/css」を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>テストページ</title>
</head>