• Home
  • Web制作
  • 【CSS入門】HTMLにCSSを適用する3つの方法を完全解説！装飾の基本をマスターしよう

【CSS入門】HTMLにCSSを適用する3つの方法を完全解説！装飾の基本をマスターしよう

schedule update
Tags: HTML CSS

はじめに：CSSってどんなもの？

Webページを作成する上で欠かせないHTML。しかし、HTMLだけでは文字の大きさや色、レイアウトなどを細かく調整することはできません。そこで登場するのが CSS（Cascading Style Sheets） です。

CSSは、HTMLに装飾を加えるための言語です。HTMLで記述された要素に対して、色、サイズ、配置などを指定することで、見た目をより魅力的に、そして見やすくすることができます。

この記事では、HTMLにCSSを適用する3つの方法を、初心者の方にもわかりやすく解説します。CSSの基本をマスターして、思い通りのWebページを作成してみましょう！

1. インラインスタイル：HTMLタグ内に直接CSSを記述

最もシンプルなCSSの適用方法が、 インラインスタイル です。HTMLタグの中に、style属性を使って直接CSSを記述します。

例えば、以下のように<p>タグ内の文字を赤色にしたい場合：

<p style="color: red;">この文章は赤色で表示されます。</p>

メリット

  • 特定の要素のみに適用したい場合に便利
  • CSSファイルを作成する必要がない

デメリット

  • 多くの要素に適用する場合、コードが冗長になる
  • HTMLとCSSが混在し、管理が煩雑になる

2. 内部スタイル：HTMLファイル内にCSSを記述

HTMLファイル内に、<style>タグを使ってCSSを記述する方法が 内部スタイル です。

例えば、以下のようにHTMLファイル内の全ての<p>タグの文字を青色にしたい場合：

<!DOCTYPE html>
<html>
<head>
  <title>内部スタイルの例</title>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>

<p>この文章は青色で表示されます。</p>
<p>この文章も青色で表示されます。</p>

</body>
</html>

メリット

  • ひとつのHTMLファイル内でスタイルを一括管理できる
  • 別途CSSファイルを作成する必要がない

デメリット

  • 複数のHTMLファイルで同じスタイルを使用する場合、コードの重複が発生する

3. 外部スタイル：CSSファイルをHTMLに読み込む

最も一般的で、大規模なWebサイト開発に適しているのが 外部スタイル です。別途CSSファイルを作成し、HTMLファイルから読み込む方法です。

1. CSSファイルの作成

まずは、CSSファイルを作成します。ファイル名は任意ですが、拡張子は.cssとします。ここではstyle.cssというファイル名で作成したとします。

style.cssファイルに、以下のようにCSSを記述します。

p {
  color: green;
}

2. HTMLファイルへの読み込み

次に、作成したCSSファイルをHTMLファイルに読み込みます。HTMLファイルの<head>タグ内に、<link>タグを使って以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <title>外部スタイルの例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>この文章は緑色で表示されます。</p>

</body>
</html>

メリット

  • 複数のHTMLファイルで同じスタイルを共有できる
  • HTMLとCSSが分離され、管理が容易になる

デメリット

  • CSSファイルを読み込む必要があるため、ページ表示速度がわずかに遅くなる場合がある

まとめ：3つの方法を理解して、状況に合わせて使い分けよう！

HTMLにCSSを適用する3つの方法をご紹介しました。それぞれの方法にはメリットとデメリットがあるので、Webページの規模や目的に合わせて最適な方法を選択することが重要です。

CSSを使いこなせるようになれば、Webページのデザインの幅が大きく広がります。ぜひ、色々なスタイルを試して、表現力豊かなWebページを作成してみてください！

関連記事