HTML/CSS

【HTML/CSS】HTMLへのCSSの読み込み手順を解説

  /

「HTMLのコードを書きたいけど、CSSをHTMLにどうやって読み込めばいいかが分からない…。」

そんなお悩みありませんか？

この記事では、CSSをHTMLに適用させる方法を網羅的に解説します。

それでは、見ていきましょう。

Contents
  1. CSSファイルの読み込み手順と保存方法
  2. HTMLへのCSSの読み込み方法
  3. HTMLに直接CSSのコードを書く方法
  4. まとめ

CSSファイルの読み込み手順と保存方法

CSSを読み込む前に、CSSファイルをつくる方法とファイルの保存ついて説明していきます。

※知っている方は次の章まで飛ばしてください。

今回は「Visual Studio Code」での例を見ます。ただし、ファイルのつくり方は他のテキストエディタでも基本同じです。

テキストエディタの左上に「File(ファイル)」の項目があるのでそこをクリックします。

次に、「New File(新規ファイル)」をクリックします。

すると新しいファイルが生成されます。

新しいファイルがつくられたら保存します。「File(ファイル)]→「Save As…(名前を付けて保存)」をクリックします。

自分で好きなファイル名をつけ、ファイル名のあとに拡張子を入れます。

拡張子をつけることで、ファイルがCSSファイルだとみなされます。

下の画像は、保存した後のVisual Studio Codeの様子です。

Visual Studio Codeでは、CSSファイルのファイル名の横に「#(ハッシュ)」マークがつきます。

保存する場所に関しては、つくったCSSファイルを、リンクさせたいHTMLファイルと同じフォルダーに置いておきましょう。

HTMLへのCSSの読み込み方法

Webサイトの見た目をデザインするとき、基本的にHTMLとは別にCSS専用のファイルをつくります。

ちなみに、CSSファイルを別につくらなくても、HTMLに直接CSSのコードを書くこともできます(※そちらに関してはのちほど解説します)。

HTMLにCSSを読み込むには、HTMLのhead要素に以下のコードを書きます。

<link rel="stylesheet" href="./〇〇〇.css">

これだけです。

実際に読み込まれるか確認しましょう。

例えば、CSSをリンクさせる前のHTMLを出力してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div class="box"></div>
</body>
</html>

このHTMLに先ほど示したコードを挿入します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./〇〇〇.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

リンクさせるCSSのコードは以下のようになります。

.box{
  width: 200px;
  height: 100px;
  text-align: center;
  padding-top: 60px;
  background-color: lightgray;
}

出力してみましょう。

このように、CSSがリンクされたことで、外観が変わりました。

以上がCSSを読み込む基本的な方法となります。

次に、あまり一般的ではありませんが、CSSファイルをつくらずに、HTMLにCSSコードを書くやり方を解説していきます。

HTMLに直接CSSのコードを書く方法

ここまで述べてきたように、CSSを読み込むときは別のファイルを用意することを推奨します(そちらの方が管理しやすいため)。

ただし、実験的にすぐにCSSを適用してみたいという場合には、HTMLに直接CSSを書いてみてもいいでしょう。

HTMLにCSSのコードを書く方法としては2つ挙げられます。

  1. styleタグ中に書く
  2. タグの中にstyle属性をつける

それぞれ説明していきます。

styleタグの中に書く

CSSのコードをstyleタグの中に書くこともできます。

例えば、以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .box{
        color: blue;
        font-weight: bold;
      }
    </style>
</head>
<body>
  <div class="box">こんにちは</div>
</body>
</html>

styleタグはhead要素の中に書きます。

ちなみにコードを出力すると以下のようになります。

タグの中に直接style属性をつける

見た目を装飾したい要素のタグの中でスタイルを指定することができます。

例えば、コードは下のようになります。

<div style="background-color: cadetblue;">
    <div style="font-size: 20px;">こんにちは</div>
</div>

出力すると以下のようになります。

まとめ

いかがでしたでしたか。

HTMLにCSSを読み込む方法が明確になったことでしょう。

一行コードを書くだけで素早くCSSファイルを読み込むことができます。

今回の知識をもとに、実際にCSSをHTMLにリンクさせてみてください。

css html
RELATED POST