CSS/はじめに

CSSとは？

CSS（Cascading Style Sheets）は、ウェブページやウェブアプリケーションのデザインやスタイルを定義するための言語です。HTMLがコンテンツの構造を定義するのに対して、CSSはそのコンテンツをどのように表示するかを指定します。つまり、ページのレイアウト、色、フォント、サイズ、間隔などの視覚的な特徴を制御します。

CSSの役割

CSSの主な役割は、以下の通りです：

1. スタイルの管理: HTML文書内の要素にスタイルを適用し、見た目を整えます。
2. 分離: デザインとコンテンツの分離を実現し、HTML文書の保守性を高めます。つまり、スタイルをCSSファイルに記述することで、複数のページで同じスタイルを使い回すことができます。
3. 柔軟性と拡張性: レスポンシブデザインや異なるデバイスへの適応を容易にします。
4. 優先順位の管理: 「Cascading」（カスケード）という概念により、スタイルの適用順序や優先度を制御します。

外部スタイルシート・埋め込みスタイルとインラインスタイル

CSSは、主に3つの方法でHTML文書に適用されます：

1. 外部スタイルシート

   .cssという拡張子のファイルにスタイルを記述し、HTMLファイルでそれを参照する方法です。例えば、<link>要素を使用して外部スタイルシートを読み込みます。

      <link rel="stylesheet" href="styles.css">
   

2. 埋め込みスタイル

   HTML文書内の<style>要素に直接スタイルを記述する方法です。1つのHTMLファイル内でのみ有効です。

      <style>
        /* CSSスタイルの記述 */
        body {
          font-family: Arial, sans-serif;
          background-color: #f0f0f0;
        }
      </style>
   

3. インラインスタイル

   各HTML要素に直接style属性を使用してスタイルを適用する方法です。これは個々の要素に対してスタイルを指定する場合に便利ですが、保守性が低くなる場合があります。

      <p style="color: blue; font-size: 16px;">このテキストは青色で、16ピクセルのフォントサイズです。</p>
   

これらの方法はそれぞれ異なる状況で便利であり、適切に選択することで効率的なウェブページのスタイリングが可能となります。次の章では、それぞれの方法の詳細な使い方と、その適切な選択について詳しく説明します。