【初心者にも簡単】HTMLにCSSを適用する方法３種類まとめ

WEB制作の際に、HTMLにCSSを適用する方法について、３つの方法をご紹介します。
それぞれの特徴・メリットデメリットがあるので、その都度使い分けて効率のよいWEB制作を心がけましょう。

htmlとは
１、外部CSSファイルを呼び出す
２、各ページの<head>内に<style>要素で記述する
３、直接要素にstyle属性を記述して適用する
まとめ

htmlとは

すごく簡単にご説明すると、HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的な言語のひとつです。
普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。
ですがHTMLだけだと基本的に文字を表示するだけしかできません。
デザインを整え魅力的なWebデザイン作るのに必要になってくるのがCSSです。

１、外部CSSファイルを呼び出す

CSSを記述した別ファイル（例 style.css）を作成し、HTMLに呼び出します。
一番一般的な方法で、ほとんどの場合この方法を用いてCSSをHTMLに適用します。

「css」というフォルダに「style.css」という名前で保存した場合、下記のような記述になります。
HTMLのhead内にlink要素を用いて、外部CSSファイルを指定します。

 html
<html>
  <head>
    <link rel="stylesheet" type="text/css" href=“css/style.css">
  </head>
  <body>
    コンテンツ
  </body>
</html>

ファイルサイズが小さなcssファイルであれば、この後説明する２番目の方法でページ内に記載した方が処理速度が速くなりますが、この方法が一般的なのはhtml内の記述（特に<head>内の冒頭部分）を少なくすることでSEO的にも効果があるとされているからです。

メリット

１、SEO的に有利な記述である
２、CSSをファイル毎に分け、整理がしやすい

２、各ページの<head>内に<style>要素で記述する

htmlの<head>内に<style>要素を記述して、各ページ単位にスタイルシートを適応させます。
ここで指定されたcssは、そのページ内でのみ有効となり、別のページには反映されません。
ですので、１番目の方法で全ページ共通のcssを記述しておき、ページ単位で指示を変更する場合などに有効です。

外部CSSファイルとページ内に同じCSSの記述があった場合は、ページ内の記述が優先されます。
ですのでCSSハックなどでも使用します。

 html
<html>
  <head>
    <style type="text/css">
      h1 {
        color:red;
      }
    </style>
  </head>

  <body>
    <h1>タイトルなど</h1>
  </body>
</html>

メリット

１、外部ファイルにある記述よりも優先して反映される
２、他のページには影響しない

３、直接要素にstyle属性を記述して適用する

３つ目の方法は、htmlタグごとにCSSの記述を追加する方法です。
この方法は「ピンポイントで１箇所のみの使用」などであれば非常に便利なのですが、全てのCSSをこの記述方法で行なってしまうと、CSSの管理が非常に煩雑になってしまう事と、htmlの記述が長くなりSEO的に良くありません。

 html
<h1 style="color:red;">タイトルなど</h1>

メリット

１、外部ファイルにある記述よりも優先して反映される
２、直接HTML上で修正があるので作業が早い

SEO的にはあまり良い記述方法ではありませんが、この方法は知っておいて損はありません。

例えばワードプレスの記事内でどうしても一部分だけCSSを効かせたい場合や、別の人が作ったサイトを大急ぎで修正しないといけない場合など時とタイミング次第では便利な機能です。

まとめ

いかがでしたでしょうか。
HTMLにCSSを適用させる方法を３種類ご紹介しました。

特別なことが無ければほとんどの場合、何も考えず１番の「外部CSSファイルを呼び出す」方法で記述をしておけば問題ありません。

ですが、ウェブサイトの作成時にはいろんな状況や問題・トラブルが起こる可能性があります。
そんな時の対処法としてもCSSの記述方法の違いによる適応範囲は理解しておいて損はありません。

修正したホームページが反映されない！って時はブラウザのリロードを見直してみてください。

htmlにJavaScriptを適用する方法もご紹介しています。合わせてご覧ください。