Webデザインをもっと自由に！HTMLスタイル属性の活用術

スタイル属性の書き方

スタイル属性は、要素の開始タグ内に style 属性として記述します。属性値には、CSSプロパティと値のペアをセミコロンで区切って記述します。

<p style="color: red; font-size: 20px;">赤い文字で20pxのフォントサイズで表示されます</p>

スタイル属性の使用例

外部CSSファイルを読み込むことができない場合
テスト目的で一時的にスタイルを適用したい場合
特定の要素のみ異なるスタイルで表示したい場合

スタイル属性の注意点

意味を持たないスタイルを指定すると、アクセシビリティが低下する可能性があります。
スタイル属性を使用しすぎると、HTMLコードが冗長になり、メンテナンス性が悪くなります。
インラインスタイルは、文書全体へのスタイル適用には向いていません。多くのスタイルを適用する場合は、外部CSSファイルを使用しましょう。

項目	スタイル属性	`style`要素
スタイル記述方法	属性値にCSSプロパティと値を記述	要素内にCSSプロパティと値を記述
適用範囲	特定の要素のみ	文書全体または文書の一部
用途	特定の要素にのみスタイルを適用したい場合	文書全体または文書の一部にスタイルを適用したい場合
メリット	記述が簡潔	スタイルを外部ファイルで管理できる
デメリット	インラインスタイルのため、文書全体へのスタイル適用には向いていない	コード量が多くなる

例1：段落（`<p>`)要素の文字色とフォントサイズを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタイル属性の例</title>
</head>
<body>
  <p style="color: blue; font-size: 24px;">この段落は青色で24pxのフォントサイズで表示されます</p>
  <p>この段落はデフォルトのスタイルで表示されます</p>
</body>
</html>

この段落は青色で24pxのフォントサイズで表示されますこの段落はデフォルトのスタイルで表示されます

例2：表（`<table>`)要素のセルを交互に色付けする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタイル属性の例</title>
</head>
<body>
  <table>
    <tr>
      <th style="background-color: #f0f0f0;">列1</th>
      <th style="background-color: #cccccc;">列2</th>
      <th style="background-color: #f0f0f0;">列3</th>
    </tr>
    <tr>
      <td style="background-color: #cccccc;">行1-セル1</td>
      <td style="background-color: #f0f0f0;">行1-セル2</td>
      <td style="background-color: #cccccc;">行1-セル3</td>
    </tr>
    <tr>
      <td style="background-color: #f0f0f0;">行2-セル1</td>
      <td style="background-color: #cccccc;">行2-セル2</td>
      <td style="background-color: #f0f0f0;">行2-セル3</td>
    </tr>
  </table>
</body>
</html>

出力結果

列1	列2	列3
#f0f0f0	#cccccc	#f0f0f0
#cccccc	#f0f0f0	#cccccc
#f0f0f0	#cccccc	#f0f0f0

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタイル属性の例</title>
</head>
<body>
  <img src="image.jpg" alt="画像" style="border: 5px solid red; margin: 10px;">
</body>
</html>

出力結果

画像の上に赤いボーダーと10pxの余白が追加されます。

スタイル属性は、HTML要素に直接CSSスタイルを記述できる便利な機能ですが、文書全体へのスタイル適用には 向いていません。

スタイル属性の代替方法としては、以下の3つが挙げられます。

style要素を使う

<head>要素内に<style>要素を記述し、その中にCSSスタイルを記述します。<style>要素で記述されたスタイルは、その要素内の子要素に適用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>style要素の例</title>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>この段落は赤色で20pxのフォントサイズで表示されます</p>
</body>
</html>

外部CSSファイルを使う

CSSのコードを.cssファイルに記述し、<link>要素を使ってHTMLファイルに読み込みます。外部CSSファイルを使うと、スタイルを文書全体に適用したり、複数のHTMLファイルで同じスタイルを共有したりすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部CSSファイルの例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>この段落は外部CSSファイルで定義されたスタイルで表示されます</p>
</body>
</html>

/* style.css */
p {
  color: blue;
  font-size: 24px;
}

CSSフレームワークを使う

BootstrapやFoundationなどのCSSフレームワークを使用すると、あらかじめ定義されたスタイルを簡単に利用することができます。CSSフレームワークを使うと、開発効率を上げることができますが、学習コストがかかります。

学習コスト
開発効率
スタイルを共有するHTMLファイルの数
適用するスタイルの量

Webデザインをもっと自由に！HTMLスタイル属性の活用術

スタイル属性の書き方

例1：段落（<p>)要素の文字色とフォントサイズを変更する

例2：表（<table>)要素のセルを交互に色付けする

例1：段落（`<p>`)要素の文字色とフォントサイズを変更する

例2：表（`<table>`)要素のセルを交互に色付けする