Web制作を学び始めると「CSSはHTMLのどこに書けばいいの？」と迷う方も多いでしょう。
特に複数ページで同じデザインを使いたいときに便利なのが 外部CSS です。
この記事では、外部CSSとは何か、作り方、HTMLとのリンク方法 を初心者向けにわかりやすく解説します。さらに、内部CSSやインラインCSSとの違いも紹介するので、CSSの使い分けが理解できるようになります。
外部CSSとは？
外部CSSとは、スタイルシートをHTMLとは別ファイルに保存し、複数のWebページに適用できる方法です。
ファイルの拡張子は通常「.css」で、HTMLの<head>内で<link>タグを使って読み込みます。
外部CSSを使うメリット
- 効率的な管理：1つのCSSファイルを修正すれば、複数ページのデザインを一括変更できる
- コードが見やすい：HTMLとCSSを分離することで可読性が上がる
- ページ速度改善：キャッシュを利用できるため、ユーザー体験が向上する
外部CSSのデメリット
- CSSファイルを読み込むリクエストが増えるため、初回表示がわずかに遅くなることがある
なぜ外部CSSを使うのか？
・効率的
１つの CSS ファイルを使えば、複数のページに同じデザインを適用できます。これで毎回 CSS を繰り返し書く必要がないので便利です。
たとえば、インライン CSS はタグに直接書くため、繰り返し書く必要があります。
また、内部 CSS も HTML ファアイル内に書いているため、別の HTMLファイル（別ページ）にも繰り返し書く必要があります。
インライン CSS の書き方はこちら→超初心者向け！CSSはどこに書くの⁉︎
内部 CSS の書き方はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
・管理が簡単
デザインの変更を1つの CSS ファイルで済ませることができるので、変更が簡単になります。
外部CSSの作り方
外部CSSを作成する流れはシンプルです。
ステップ1：HTMLファイルを準備
まずは基本のHTMLファイルを作成します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
ステップ2：CSSファイルを作成
次に style.css という名前のファイルを作成します。
フォルダの横にある四角にプラスマークのある新しいファイル作成を選択します
1行空くので、ファイル名を入れます
style.css と入力し、確定キーを押します。（半角で入力し、必ず .css の拡張子をつけます）
＃ style.css と表示され、CSS ファイルが作成されました。
html ファイルと CSS ファイルが別々なので管理しやすいですね。
index.html ファイルをクリックします
html ファイルを表示させ、変更させたいところ（見出しの「絶品カレーの作り方」）のタグが <h1>タグであることを確認します
CSS ファイルをクリックします
style.css ファイルに切り替えて、 CSS コードを書きます
コードの書き方は、前回の記事で紹介した、内部CSSの書き方と同じです。
<style> 開始タグと </style> 閉じタグは書く必要はありません！
前回の記事、内部CSSの書き方はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
ステップ3：HTMLとCSSをリンク
html ファイルと CSS ファイルを繋げる（リンク）設定をします
HTMLの <head> 内で以下のように記述します。
関連記事HTML ファイルの作り方はこちら→実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！
HTML ファイルに繋げる（リンク）設定をする
作成した「style.css」を HTML ファイルに繋げる（リンク）設定をします。htmlファイルを開き、<head>内に書きます。
link と入力すると、どれですか？メニューが表示されます。
link を選択します
<link> タグが表示されます
style.css ファイル名を、href の後に入れます
これで、style.css ファイルのスタイルが HTML ページに適用されるようになりました！
内部CSS・インラインCSSとの違い
CSSには「外部CSS」以外にも 内部CSS や インラインCSS があります。
H3: 内部CSSとは
HTMLファイルの<head>内に <style> タグを使って記述する方法です。
1ページだけのデザインなら便利ですが、複数ページで使い回すのは不向きです。
H3: インラインCSSとは
HTML要素の style 属性に直接書く方法です。
ちょっとした修正やテストには使えますが、コードが煩雑になるため基本的には推奨されません。
外部CSSを使うときの注意点
CSSの優先順位：外部CSSよりもインラインCSSのほうが優先されることに注意
パスの指定ミスに注意：href="style.css" の場所が正しいか確認
キャッシュが残ることがある：更新が反映されない場合はブラウザキャッシュを削除
H2: まとめ
外部CSSとは、スタイルをHTMLとは別ファイルに分けて管理する方法です。
複数ページに同じデザインを適用でき、効率的なWeb制作が可能になります。
- 外部CSS：管理効率が高く、複数ページで利用可能
- 内部CSS：1ページ限定のスタイルに適している
- インラインCSS：部分的な修正に向いている
初心者の方は、まず外部CSSを正しくリンクさせる方法を覚えておくと、今後のWeb制作が格段に楽になります
関連記事👉超初心者向け！CSSはどこに書くの⁉︎
👉超初心者向け！styleタグを使ったCSSの書き方とは？
👉【HTML入門】要素とは？ブロック要素とインライン要素の違いを初心者向けに徹底解説！
Comments