【HTML】link要素で外部CSS(スタイルシート)を読み込む

プログラミング

外部のスタイルシートを読み込む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>
タイトルとURLをコピーしました