WEB 作りたい

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

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

htmlとは

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

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

外部CSSファイルをHTMLに呼び出す方法

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

メリット

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

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

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

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

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

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

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

メリット

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

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

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

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

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

メリット

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

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

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

まとめ

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

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

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

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

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

あわせて読みたい!
【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介
【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介

続きを見る

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」がオススメ!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

¥2,838 (2024/05/19 19:26時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】

WEB

2024/1/3

【簡単レスポンシブ】PCとスマホで画像を切り替える方法...

【初心者向け】CSSで背景画像だけを回転させる方法を紹介!他の応用技も

WEB

2023/12/23

【初心者向け】CSSで背景画像だけを回転させる方法を紹...

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2023/10/12

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2023/12/23

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

-WEB, 作りたい
-,