【基本】HTMLのStyleを基礎から応用まで実例付きで徹底解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでスタイルをどのように適用するのだろうか？」
「HTMLのstyleの書き方を学びたい」
「HTMLのstyleの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

HTMLでのstyleの基本的な書き方
styleの応用法
HTMLでのstyleを用いた具体的な使用例

この記事では、HTMLでのstyleの基本的な使い方から、その応用法まで、具体的な例を交えて詳細に説明します。

色の変更やレイアウトの設定など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTMLスタイル表現の基本：styleタグとstyle属性

このセクションでは、HTMLスタイル表現の基本について深く掘り下げます。

styleタグとstyle属性の違いとそれぞれの実践的な利用方法を探求しましょう。

styleタグの実践利用方法
style属性の実践利用方法
divstyleとその一般的な利用例

styleタグの実践利用方法

styleタグはHTML文書のhead要素内に置かれ、ページ全体のスタイルを定義します。

例えば、全ての段落(pタグ)を赤色で表示したい場合、styleタグ内にp {color: red;}を追記すると実現できます。

具体的な記述場所は以下のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>スタイルの変更</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h1>スタイルの変更</h1>
  <p>これは赤色の段落です。</p>
  <p>これも赤色の段落です。</p>
</body>
</html>

しかし、styleタグはHTMLとCSSを混在させるため、保守性が下がります。

本格的なウェブサイトでは外部CSSファイルを利用することが一般的です。

style属性の実践利用方法

一方、style属性は特定のHTML要素に直接スタイルを適用します。

例えば、特定の段落を青色で表示したい場合、そのpタグにstyle="color: blue;"を追加します。

<!DOCTYPE html>
<html>
<head>
  <title>style属性の使用</title>
</head>
<body>
  <h1>style属性の使用</h1>
  <p style="color: blue;">これは青色の段落です。</p>
  <p>これは通常のスタイルの段落です。</p>
</body>
</html>

これもHTMLとCSSが混在するため、使いすぎるとコードが見づらくなる恐れがあります。

divstyleとその一般的な利用例

divstyleはdiv要素にstyle属性を追加することで、その中に含まれる複数のHTML要素にスタイルを適用する手法です。

一般的には、セクションやブロックレベルの要素に対して利用されます。

<!DOCTYPE html>
<html>
<head>
  <title>div要素にstyle属性を使用する例</title>
  <style>
    .section {
      color: red;
    }
  </style>
</head>
<body>
  <h1>div要素にstyle属性を使用する例</h1>
  <div class="section">
    <h2>セクション1</h2>
    <p>セクション1の内容です。</p>
  </div>
  <div class="section">
    <h2>セクション2</h2>
    <p>セクション2の内容です。</p>
  </div>
</body>
</html>

例えば、特定のセクションの文字色を変更したい場合などに利用します。

CSSを活用したスタイル設定の推奨方法

ここでは、CSSを活用したスタイル設定の推奨方法を解説します。

HTMLにCSSを読み込む手法や相対パスの理解と利用について詳しく説明します。

CSSをHTMLに読み込む実際の手法
相対パスの理解と利用

CSSをHTMLに読み込む実際の手法

HTMLにCSSを読み込む方法は主に3つ。

styleタグを使用する内部スタイルシート
linkタグを使用する外部スタイルシート
style属性を用いたインラインスタイリング

外部スタイルシートは、大規模なプロジェクトやチームでの開発において好まれます。

なぜなら、CSSのルールが1つのファイルに集約され、HTMLファイルがすっきりするからです。

外部スタイル（style.css）の例

h1 {
  color: blue;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

HTMLファイル（index.html）の例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample paragraph.</p>
</body>
</html>

相対パスの理解と利用

CSSファイルをHTMLに読み込む際には、パス指定が必要です。

その際に理解しておくべき重要な概念の1つが相対パスです。

相対パスとは、現在のファイル位置からの相対的なパスを指すもの。

例えば以下のファイル構造で説明します。

├── index.html
├── styles
│   └── style.css
├── images
│   ├── logo.png
│   └── background.jpg
└── scripts
    └── main.js

index.htmlから見たときの相対パスを使って読み込む方法はこちらです。

<link rel="stylesheet" type="text/css" href="styles/style.css">

<img src="images/logo.png" alt="Logo">

<img src="images/background.jpg" alt="Background">

<script src="scripts/main.js"></script>

HTMLスタイル適用のよくある質問と解答

次に、HTMLスタイルの適用に関するよくある質問とその解答について説明します。

多くの方が抱える疑問から、HTMLスタイルについての理解を深めましょう。

スタイルの読み込み方の使い分け方
CSSが正しく適用されない理由と対策
スタイル設定が上手くいかない場合の対処法

スタイルの読み込み方の使い分け方

先述の通り、スタイルをHTMLに読み込む方法は主に3つあります。

そのうちどれを選ぶべきかは、プロジェクトの規模や状況によります。

一般的には、大規模なウェブサイトや複数人での開発においては、外部スタイルシートを用いることが推奨されます。

ただし小規模なウェブサイトや単一のHTMLページに関しては、内部スタイルシートやインラインスタイリングが便利な場合もあるでしょう。

CSSが正しく適用されない理由と対策

CSSが正しく適用されない場合、いくつかの考えられる理由があります。

1.スタイルシートの読み込み順序に問題がある可能性がある

CSSは後から読み込まれたスタイルが優先されるため、意図せずも他のスタイルシートに上書きされてしまいます。

これを解決するには、スタイルシートの読み込み順序を適切に管理することが必要です。

2.セレクタの指定が間違っている可能性がある

タグ名、クラス名、ID名など、間違いなく適切なセレクタを用いているか確認しましょう。

また、特異性（スタイルの優先度）について理解しておくと役立ちます。

スタイル設定が上手くいかない場合の対処法

スタイルの設定がうまくいかない場合、まずはブラウザの開発者ツールを利用してCSSが適切に読み込まれているかを確認しましょう。

CSSルールが衝突している場合や、特定のスタイルが適用されていない理由などを開発者ツールから見つけられます。

また、CSSリセットやNormalize.cssを使ってブラウザ間のスタイルの差異を最小化するという手法もあるでしょう。

styleタグの詳細と実例

このセクションでは、styleタグの詳細とその具体的な使用例について説明します。

具体例を見ることで、実践で使いこなす方法を学ぶのです。

styleタグに関する非推奨の属性
実用的なスタイルシートの例
複数のstyle要素の利用方法
メディアクエリを用いたstyle要素の例
主なデバイス幅のメディアクエリテンプレート

styleタグに関する非推奨の属性

以前のHTMLバージョンでは、styleタグにはtype="text/css"という属性が必要でしたが、現在のHTML5ではこの属性は不要になりました。

また、styleタグをbody要素内に置くことも非推奨です。

スタイルは通常、head要素内に配置しましょう。

実用的なスタイルシートの例

実用的なスタイルシートの例としては、サイト全体のフォントのスタイルを指定するものがあります。

例えば、次のように全ての文字のフォントファミリーと色を設定できます。

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
    }
  </style>
</head>

上記のコードは、以下を表しています。

全体の文字：Arialフォント、もしくはそれが利用できない場合はsans-serifフォントで表示
文字色をダークグレー

複数のstyle要素の利用方法

ひとつのHTML文書内に複数のstyleタグを配置することも可能。

これは、異なるメディアタイプやメディアクエリに対して異なるスタイルを適用したい場合などに利用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>複数のstyleタグの例</title>
  <style>
    /* 通常のスタイル */
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
  <style media="screen and (max-width: 600px)">
    /* スクリーンの幅が600px以下の場合のスタイル */
    p {
      color: red;
      font-size: 14px;
    }
  </style>
  <style media="print">
    /* 印刷時のスタイル */
    p {
      color: black;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <p>これはテキストの例です。</p>
</body>
</html>

ただし、必要以上にstyleタグを多用するとコードが見づらくなるため、適切な管理が必要です。

メディアクエリを用いたstyle要素の例

メディアクエリを用いたstyle要素の例を以下に示します。

この例では、デバイスの画面幅に応じて異なるスタイルを適用します。

<head>
  <style>
    body {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      body {
        font-size: 18px;
      }
    }
  </style>
</head>

上記のコードでは、デバイスの画面幅が768px以上の場合にbodyのフォントサイズを18pxに変更します。

それ以外の場合（つまり画面幅が768px未満の場合）はフォントサイズを16pxとします。

主なデバイス幅のメディアクエリテンプレート

以下は主なデバイス幅でメディアクエリを利用するテンプレートです。

/* モバイルデバイス（幅が小さいデバイス） */
@media only screen and (max-width: 767px) {
  /* 767px以下の場合のスタイル */
  /* スマートフォンやタブレットなどのモバイルデバイス向けのスタイルを指定する */
}

/* タブレットデバイス（幅が中程度のデバイス） */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* 768px以上、1023px以下の場合のスタイル */
  /* タブレットデバイス向けのスタイルを指定する */
}

/* デスクトップデバイス（幅が広いデバイス） */
@media only screen and (min-width: 1024px) {
  /* 1024px以上の場合のスタイル */
  /* デスクトップデバイス向けのスタイルを指定する */
}