HTML要素 ・ 基本構造
<link>
外部ファイルの読み込み
CSSファイルやファビコンなど、外部のファイルとページを関連づける要素です。最もよく使うのは、CSSファイルの読み込みです。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>CSSの読み込み</title>
6 <link rel="stylesheet" href="style.css">
7</head>
8<body>
9 <h1>外部CSSで装飾した見出し</h1>
10 <p>見た目は style.css に書いています。</p>
11</body>
12</html>
CSS
1h1 {
2 color: #7d5411;
3 border-bottom: 2px solid #b68235;
4}
02
実行結果
ブラウザでの表示CSS欄の内容を style.css として読み込んだ状態で表示しています
03
解説
link は外部ファイルとの関係を示す空要素です。rel 属性で関係の種類を、href 属性でファイルの場所を指定します。
rel="stylesheet" を指定すると、href のCSSファイルが読み込まれてページに適用されます。CSSを別ファイルにすると、複数のページで同じデザインを共有できます。
上の例では、CSS欄の内容を style.css として読み込んだ状態を表示しています。
media 属性にメディアクエリを書くと、条件に合うときだけその CSS ファイルを適用できます。画面幅ごとに CSS ファイルを分ける案件では、この書き方を指定されることもあるので、対応できるようにしておきましょう。
04
応用例・注意点
よく使う rel の値
| 値 | 説明 |
|---|---|
stylesheet | CSSファイルを読み込む |
icon | ファビコン（タブのアイコン） |
preconnect | 外部サーバーへ事前に接続して読み込みを速くする |
canonical | 重複ページの正規URLを検索エンジンに伝える |
Google Fonts を読み込む
Webフォントも link で読み込みます。preconnect を先に書くと表示が速くなります。
HTML
1<link rel="preconnect" href="https://fonts.googleapis.com">
2<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">
ファビコンを設定する
タブやブックマークに表示される小さなアイコンです。
HTML
1<link rel="icon" href="favicon.ico">
2<link rel="apple-touch-icon" href="apple-touch-icon.png">
画面幅ごとに CSS ファイルを読み分ける（media 属性）
media 属性に @media と同じ条件を書きます。375px以下は sp.css、376px〜1023pxは tablet.css、1024px以上は pc.css が適用されます。
HTML
1<!-- 画面サイズが375pxまではこのファイルのスタイルが適用される -->
2<link rel="stylesheet" href="sp.css" media="screen and (max-width: 375px)">
3
4<!-- 画面サイズ376pxから1023pxまではこのファイルのスタイルが適用される -->
5<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 376px) and (max-width: 1023px)">
6
7<!-- 画面サイズが1024pxからはこのファイルのスタイルが適用される -->
8<link rel="stylesheet" href="pc.css" media="screen and (min-width: 1024px)">
注意点
- 01href のパスはHTMLファイルの場所が基準です。フォルダ構成を変えたときはパスを見直してください。
- 02CSSの link は head に書きます。body の途中に書くと、表示がちらつく原因になります。
- 03media 属性で読み分けるときは、条件の幅が重ならないようにします。例えば
max-width: 375pxとmin-width: 375pxにすると、ちょうど375pxのときに両方のファイルが適用されます。