HTMLファイルにCSSを読み込ませる3つの方法 -初心者向け-

どうも、webデザイナーを目指すryotarofuです。

この記事を見ているwebデザイナーを目指す皆さんは、もうすでにHTMLについて理解をし、そろそろCSSを実装しようとしていると思います。

そこで、よくある疑問としては「CSSとHTMLを紐付ける方法わからない」や、「HTMLに直接CSSを書きたいけど書き方がわからない」などがよくあがります。

その疑問を解決するために『CSSを読み込ませる方法』その手法と利点を３つご紹介していきたいと思います！

Contents

CSSとは

CSSを読み込ませる方法の前に、軽くCSSについてお話します。

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、ウェブページのスタイルを指定し、HTMLと組み合わせて使用する言語のことを言います。

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

要はウェブページにおいて、HTMLが文章を構成する言語だとしたら、CSSはデザインを構成する言語だと言うことです。

CSSを読み込ませる方法

CSSとは何か分かったところで、HTMLにCSSを読み込ませるにはどうすればいいか、ご紹介していきます！

外部CSSファイルを作成する

3つの方法の中で最も一般的な方法がこちらです。

HTMLファイルの他に外部にCSSファイルを作成しそれを読み込むという方法です。

事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。

<link rel="stylesheet" href="style.css">

上の一行をHTMLファイルの<head>部分に記述することで、外部ファイルのCSSを読み込むことができます。

外部ファイルを読み込むときは<link>タグを使います。
rel属性部分には、読み込む対象とHTMLファイルの関係性を記述し、href属性部分に読み込む対象のCSSファイル名を記述することで読み込むことができます。

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Hello</title>
  </head>
  <body>
    <p>ここにHTMLの文章などが入ります</p>
  </body>
</html>

外部CSSを読み込むことのメリットは、<link>タグ内で外部CSSのファイルを指定するだけなので1行で済み、読みやすいコードになることと、複数のページで構成されるWebサイトを制作するときも、同じCSSを反映させることができるので、一つ一つのページにデザインを施す必要がなくなる為、非常に便利な手法の１つになります。