バナー画像

Webサイトをデザインするために欠かせないCSSですが、HTMLへ適用するためには大きく3種類の方法が存在します。

本記事では、HTMLへのCSS読み込み方法を初心者の方でも理解しやすいよう、なるべく細かく解説していきたいと思います。

HTMLのCSS読み込み方法1: HTMLファイルに外部CSSファイルから読みこませる


まずはHTML5で推奨されているCSSを外部ファイルとして切り分けて読みこませる方法について、解説していきたいと思います。

最も一般的な方法であり、特に理由がない限りは、HTMLファイルとCSSファイルは切り分けて記述するように意識しておきましょう。

外部CSSファイルの読み込み方

外部CSSファイルを読み込むためにはHTMLファイルのheadタグに下記のコードを記述します。

<link rel="stylesheet" href="ファイル名">

HTMLでは「link」タグを利用することで、ファイルの関連付けを定義することが可能になります。

ポテパンダの一言メモ

通常HTMLファイルは「head」と「body」に分かれており、「head」部分にはユーザーに表示しない内部情報を、「body」部分はユーザーに表示する外部情報を記述します。

rel属性の使い方

rel="stylesheet"

rel属性では、後述するhref属性で指定したファイルとhtmlファイルの関係性を定義します。

今回の場合は、CSSファイルを読み込むため「stylesheet」と設定しています。

他によく使われるrel属性の値としては、「icon」でブラウザのアドレスバーに表示される小さいアイコン画像を指定する場合などが挙げられます。

href属性の使い方

href="ファイル名"

href属性では、読み込むファイルのリンク先を指定することが可能です。

例えばhtmlと同じフォルダにCSSファイルが格納されている場合、ファイル名だけを記述すれば読み込むことが可能です。

別階層にCSSファイルを格納している場合には、htmlファイルが格納された場所からの「相対パス」を指定する方法が一般的です。

サンプルコードで外部CSSファイルの読み込み方法を確認しよう

では実際のサンプルコードで外部CSSファイルの読み込み方法を確認してみましょう。

サンプルではシンプルに文字列を赤色に変更するCSSを適用しています。

フォルダ階層は下記の通りです。

.
├── css
│   └── style.css
└── index.html

今回のサンプルではHTMLと同階層に「cssフォルダ」を作成し、cssフォルダの中に「style.css」を格納しています。

HTMLファイルとは異なる階層に対象のCSSファイルが格納されているため、href属性には「css/style.css」と相対パスで記述しておく必要があります。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>CSS Sample</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="div-css">外部CSSファイル読み込みのサンプルです。</div>
</body>
</html>

style.css

.div-css {
  color: red;
}

サンプルコードを実行した結果が下記の通りとなります。

外部CSSファイルで定義した「div-css」が読み込まれ、文字が赤色に表示されていることをご確認頂けます。

HTMLのCSS読み込み方法2: HTMLファイル内でCSSを定義する


続いてHTMLファイル内に直接CSSを定義する方法について確認していきましょう。

styleタグにデザインを記述してみよう

HTMLファイル内で直接CSSを指定するには「head」部分に「style」タグを定義します。

上述したように、「style」タグの内部記述はユーザーに表示するためのHTMLタグではないため、「head」部分に定義していきます。

内部の処理はCSSに記述する方法と全く同じです。

<style>
  <!--
  .div-css {
    color: red;
  }
  -->
</style>

サンプルコードでHTMLファイルにCSSを直接定義する方法を確認しよう

では実際にサンプルコードでHTMLファイル内に直接CSSを定義する記述方法を確認してみましょう。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>CSS Sample</title>
  <style>
    <!--
    .div-css {
      color: red;
    }
    -->
  </style>
</head>
<body>
<div class="div-css">HTMLファイルに直接スタイルを定義したサンプルです。</div>
</body>
</html>

サンプルコードを実行した結果が下記の通りとなります。

HTMLファイル内で定義したstyleタグが読み込まれ、指定した「div-css」クラスが適用されていることがご確認頂けます。

HTMLのCSS読み込み方法3: HTMLタグにstyleで直接定義する


3つ目はHTMLタグに直接style属性でスタイルを記述してしまう方法です。

style属性の記述方法を確認しよう

style属性に記述する方法も外部CSSファイルやstyleタグで記述していた方法と基本は同じです。

ただ、style属性に直接記述する場合、クラスなどは指定せず適用したいスタイルの処理のみを記述します。

<div style="color: red;"></div>
ポテパンダの一言メモ

サンプルではdivタグにstyleを適用していますが、divタグ以外のHTML要素にもstyleを適用することは可能です。

サンプルコードでHTMLタグに直接styleを定義する方法を確認しよう

実際のサンプルコードでHTMLタグに直接sytleを定義する方法を確認してみましょう。

divタグに対してstyle属性を指定しています。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>CSS Sample</title>
</head>
<body>
<div style="color: red;">HTMLタグに直接スタイルを定義したサンプルです。</div>
</body>
</html>

サンプルコードを実行した結果が下記の通りとなります。

指定したdivタグに対してstyleが適用され、文字列が赤色に変更されていることをご確認頂けます。

さいごに:HTML5ではCSSを外部ファイルに切り分けて読み込みを行う方法が推奨される


本記事では、HTMLにおけるCSSの読み込み方法について3種類のやり方をご紹介してきました。

冒頭でも説明しましたが、HTML5ではHTML文書とCSSでのデザインを明確に切り分ける方法が推奨されています。

特に理由が無い限りは、外部CSSファイルとしてデザイン部分は切り出し、HTMLに読み込む方法を基本として、コーティングを実施するように意識しておきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。