CSS

HTMLでのCSSの読み込み方【その他2種類の連携方法・図解】

どうも、つよぽんです!

今回はHTMLでCSSを読み込む方法と、CSSファイルを使わないでスタイルを変更するやり方を2種類紹介します。

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLファイルとCSSファイルの連携方法がわからない方
  • CSSファイルでスタイル定義する以外で、Webページのスタイルを変更するやり方がわからない方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLとCSSの連携方法を知るここまで「HTMLではWebページの構造を定義」、「CSSではスタイルの定義」を行うというのを解説してきました。それでは実際にCSSとHTMLを連携させるにはどうすれば良いでしょうか?また、CSSを使う以外にスタイルを定義するやり方を紹介して、どのやり方が一番良いのか解説します。...

今回の内容は以下のとおりです。

今回の内容
  • 3種類のスタイル定義方法
  • HTMLでのCSSの読み込み方法(推奨)
  • styleタグを使った方法(非推奨)
  • style属性を使った方法(非推奨)

 

3種類のスタイル定義方法

CSSでWebページのスタイル(見た目)を整えることが出来て、スタイルの定義方法は全部で3種類あります。

3種類の定義方法
  1. CSSファイルでスタイル定義をしてHTMLでCSSファイルを読み込む方法
  2. HTMLのstyleタグを使ってstyleタグの中でスタイルを定義する方法
  3. HTMLの要素(タグ)にstyle属性をセットして、style属性値にスタイルを定義する方法

上記のようにやり方は3つありますが、オススメの定義方法はの「HTMLでCSSファイルを読み込む方法」になります。

逆に、②と③の「styleタグ・style属性」を使ったスタイル定義方法は非推奨なやり方です。

なぜ①がオススメな方法で、②と③のやり方は非推奨なのか、次の章以降で1つずつ解説していきます。

HTMLでのCSSの読み込み方法(推奨)

HTMLファイル内でのCSSファイルの読み込み方HTMLファイル内でのCSSファイルの読み込み方

上の画像はCSSファイルでスタイル定義をして、HTML(画像の赤枠内)でスタイル定義したCSSファイルを読み込んでいるところを表したものです。

HTMLでスタイル定義したCSSファイルを読み込む方法がオススメ(推奨)な理由は次のとおりです。

推奨理由
  1. HTMLでWebページの構造の定義、CSSでスタイル定義を行って役割分担が出来ている
  2. 複数のHTMLで同じスタイルを使う場合は、同じCSSファイルを読み込むだけで済む
  3. 1つのCSSファイルの修正により、そのCSSファイルを読み込んでいるHTMLのスタイルが一括で切り替わる

特に②と③に関しては、次以降に紹介する「styleタグ」「style属性」を使ったやり方でスタイル定義をしてしまうと、複数のHTMLで同じスタイル定義のコードをHTMLに埋め込むことになります。

複数のHTMLで同じコードを埋め込むことにより、仮にWebページが10ページあり、全てのページでスタイルの修正が必要になったときに、10個のHTMLファイル全てを修正しなければいけません

しかし、CSSファイルにスタイル定義を行い、そのCSSを10個のHTMLファイルで読み込んだ場合、修正はその1つのCSSファイルのみで済むので、修正作業の時間を減らすことが出来ます。

styleタグを使った方法(非推奨)

CSSファイルを使わずsytleタグを使ったやり方CSSファイルを使わずsytleタグを使ったやり方

styleタグを使ったスタイル定義は、上の画像の赤枠内のようにheadタグ内でセットしたstyleタグの中で行います。

書き方はCSSファイルで記述するスタイル定義と全く同じになりますが、前の章でもお話したように非推奨なやり方となります。

非推奨な理由は、「複数のHTMLで同じスタイル定義を行った際に、修正のときに全てのHTMLで修正を行う必要が出てくるため」です。

結果、HTMLページが多ければ多いほど修正時間がかかってしまいます。

style属性を使った方法(非推奨)

CSSファイルを使わずstyle属性を使ったやり方CSSファイルを使わずstyle属性を使ったやり方

style属性を使った方法は、上の画像の赤枠内のようにタグにsytle属性をセットして、style属性の値にスタイル定義を行います。

この方法は1つ前の紹介した「styleタグ」を使った方法よりも非推奨なやり方となります。

上の赤枠内のなかの3つのliタグに注目していただくとわかるかと思いますが、3つのliタグそれぞれに全く同じスタイル定義が行われています

CSSファイルstyleタグでスタイル定義を行ったときは、セレクターに「li」を指定して、liタグのスタイル定義を1箇所で書くだけで済みました。

しかし、style属性を使うとスタイル定義を1箇所でまとめることが出来ず、結果、全てのタグ1つ1つにスタイル定義を記述しなければいけなくなります。

セレクターについては以下の記事で解説をしているので、そちらを参照していただけたらと思います。

あわせて読みたい
【入門】CSSの書き方を基本構造から理解する【図解付き】CSSの書き方を覚えるために、CSSがどのようなパーツから構成されているのか基本構造から覚えていきます。CSSを構成している5つのパーツを覚えることで、CSSの定義方法を知識として定着させることができるでしょう。...

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • スタイル定義を行うやり方は3種類ある
  • CSSファイルにスタイル定義を行いHTMLでそのCSSファイルを読み込むのが一番オススメ(推奨)
  • HTMLのheadタグ内でstyleタグをセットして、スタイル定義を行う方法もあるが非推奨
  • HTMLの要素(タグ)にstyle属性をセットして、スタイル定義を行う方法もあるが非推奨

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLとCSSの連携方法を知るここまで「HTMLではWebページの構造を定義」、「CSSではスタイルの定義」を行うというのを解説してきました。それでは実際にCSSとHTMLを連携させるにはどうすれば良いでしょうか?また、CSSを使う以外にスタイルを定義するやり方を紹介して、どのやり方が一番良いのか解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です