【6日でできるHTML入門】CSSの基本②

　Webページのデザインを効率よく管理するには、HTMLのstyle属性だけでなく、<style>要素やセレクタを用いたCSS定義が不可欠です。「CSSの基本②」では、以下の４つの方法を通じて、共通スタイルの定義や特定要素への適用をマスターします。

１．`<head>～</head>`内でまとめてCSSを定義する

　各要素に繰り返し style 属性を書くのは手間がかかるため、HTMLファイルの <head> 部分に <style> 要素を置いて一括定義します。

1.1. `<style>` 要素の基本構文

以下のように、<head> 内に <style>…</style> を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>本の紹介📚</title>
  <style>
    /* ここからCSS定義 */
    /* … */
  </style>
</head>
<body>

1.2. 複数行・改行を含めた書式定義

　CSSは改行や余分な半角スペースを無視するので、以下のように複数行で記述しても動作は同じです。

<style>
  h2 {
    background-color:darkgreen;
    color:white;
    padding:6px;
  }
</style>

２．タグセレクタで共通スタイルを適用する

　続いて、特定のタグ名に対して一括で書式を定義する「タグセレクタ」の例を見てみましょう。

2.1. 見出し (`h2`) のスタイル定義

ファイル名： lesson09-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>本の紹介📚</title>
  <style>
    h2 { background-color:darkgreen; color:white; padding:6px; }
  </style>
</head>
<body>
  <h1>今月のおすすめ本</h1>
  <h2>『月の影・花の海』 著：小林真理</h2>
  <p>幻想的な世界観と美しい描写で人気のファンタジー小説です。</p>

  <h2>『星降る夜に』 著：田中亮太</h2>
  <p>温かな人間ドラマを描く心温まる物語。</p>
</body>
</html>

ブラウザの出力例

すべての h2 要素が緑地に白文字、内側余白 6px で表示されます。

2.2. 複数タグへのスタイル定義

同じ <style> 内に続けて他のタグも定義できます。たとえば段落全体に文字サイズと行間を指定する場合

<style>
  h2 {
    background-color:darkgreen;
    color:white;
    padding:6px;
  }
  p {
    font-size:14pt;
    line-height:1.6;
  }
</style>

ファイル名： lesson09-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>本の紹介📚</title>
  <style>
  h2 {
    background-color:darkgreen;
    color:white;
    padding:6px;
  }
  p {
    font-size:14pt;
    line-height:1.6;
  }
  </style>
</head>
<body>
  <h1>今月のおすすめ本</h1>
  <h2>『月の影・花の海』 著：小林真理</h2>
  <p>幻想的な世界観と美しい描写で人気のファンタジー小説です。</p>

  <h2>『星降る夜に』 著：田中亮太</h2>
  <p>温かな人間ドラマを描く心温まる物語。</p>
</body>
</html>

ブラウザの出力例

３．クラスセレクタで任意要素だけスタイルを適用する

同じタグに複数パターンのスタイルを使い分けたいときは、class 属性を使います。

3.1. クラス属性の付与方法

HTML側で対象要素に class="highlight" を付け、CSSでは タグ名.highlight{…} と指定します。

<p class="highlight">チョコチップクッキー — カリッと香ばしい食感が自慢！</p>
<p class="highlight">オートミールクッキー — 体に優しい素材でほっこり。</p>

ファイル名： lesson09-3.html

pタグで、クラス名が highlight となっている個所がハイライトされます。

<!-- ファイル名: lesson09-3.html 🍪 クラスセレクタの例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クッキー紹介🍪</title>
  <style>
    /* pタグでクラス名「highlight」を持つ要素だけに適用 */
    p.highlight {
      background-color: #ffeb3b;
      padding: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1 class="highlight">今月のおすすめクッキー</h1>
  <p class="highlight">チョコチップクッキー — カリッと香ばしい食感が自慢！</p>
  <p class="highlight">オートミールクッキー — 体に優しい素材でほっこり。</p>
  <p>（※）上記は季節限定商品です。</p>
</body>
</html>

ブラウザの出力例

3.2. クラス名のみでの指定

タグを限定せず、クラス名だけをセレクタにすることも可能です。

ファイル名： lesson09-4.html

クラス名が highlight となっている個所がハイライトされます。

<!-- ファイル名: lesson09-4.html 🍪 クラスセレクタの例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クッキー紹介🍪</title>
  <style>
    /* クラス名「highlight」を持つ要素だけに適用 */
    .highlight {
      background-color: #ffeb3b;
      padding: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1 class="highlight">今月のおすすめクッキー</h1>
  <p class="highlight">チョコチップクッキー — カリッと香ばしい食感が自慢！</p>
  <p class="highlight">オートミールクッキー — 体に優しい素材でほっこり。</p>
  <p>（※）上記は季節限定商品です。</p>
</body>
</html>

ブラウザの出力例

４．IDセレクタで特定の１要素だけスタイルを適用する

ページ内で唯一の要素に限定してスタイルを当てたい場合は、id 属性を使います。

4.1. ID属性の付与方法

HTML側で id="footer-note" を指定し、CSSでは #footer-note{…} と記述します。

ファイル名： lesson09-5.html

<!-- ファイル名: lesson09-5.html 📝 IDセレクタの例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スムージー紹介🍹</title>
  <style>
    /* ID名「footer-note」を持つ要素だけに適用 */
    #footer-note {
      font-size: 10pt;
      color: #666666;
      border-top: 1px dashed #cccccc;
      margin-top: 12px;
      padding-top: 8px;
    }
  </style>
</head>
<body>
  <h1>夏限定スムージー🍹</h1>
  <p>マンゴー＆パイン — トロピカルな香りが広がります。</p>
  <p>ベリーミックス — 甘酸っぱいベリーがたっぷり！</p>
  <p id="footer-note">※価格は税込です。売切れ次第終了となります。</p>
</body>
</html>

ブラウザの出力例

まとめ

ここで登場した主なタグと属性を以下にまとめました。

種類	記述例	用途
<style>…</style>	<head>…<style>/* CSS */</style>…</head>	複数要素への共通CSS定義を`<head>`内でまとめて記述
タグセレクタ	h2{…}／p{…}	タグ名を指定し、すべてのその要素に一括でスタイルを適用
クラスセレクタ	p.highlight{…}／.highlight{…}	特定のクラスを持つ要素だけにスタイルを適用
IDセレクタ	#footer-note{…}	特定のIDを持つ一つの要素だけにスタイルを適用
background-color	background-color:darkgreen;	要素の背景色を指定
color	color:white;	文字色を指定
padding	padding:6px;	要素内側の余白を指定
font-size	font-size:14pt;	文字サイズを指定
line-height	line-height:1.6;	行間（行の高さ）を指定

　以上で「CSSの基本②」の全体像と具体的な実装方法がつかめました。用途に応じてタグセレクタ、クラスセレクタ、IDセレクタを使い分け、メンテナンス性の高いスタイル定義を心がけましょう。

【6日でできるHTML入門】CSSの基本②