CSSとは？Webページの見た目を定義するCSSについて解説します

Web ページにはテキストや画像などを表示することができますが、これらの表示に使用するフォントの種類や文字の大きさ、色、背景、余白といった見た目を細かく設定することができます。また、ブラウザに Web ページが表示される際、左右に分割された 2 カラムレイアウトなど、レイアウト形式を設定することも可能です。このように Web ページの見た目やレイアウトを定義するために使用されるのが、CSS（Cascading Style Sheets）と呼ばれる言語です。この記事では CSS がどのような役割を果たすのか、基本的な使い方とその仕組みについて解説します。

(Last modified: )

CSSとは

CSS は Cascading Style Sheets の略で、 HTML などのマークアップ言語で記述された文書の見た目やレイアウトを制御するための言語です。 CSS はフォントサイズや色、背景、余白、配置などのデザインを簡単に指定できるように設計されています。 HTML が文書の構造や意味を定義するのに対し、 CSS はその見た目を定義します。

CSS の役割としては、以下の3つが挙げられます。

一つ目は見た目の分離です。 HTML 文書の内容（構造）とその見た目（デザイン）を分離することで、 Web ページの作成やメンテナンスを効率化できます。また、 1 つの CSS ファイルで複数の HTML ファイルのデザインを一元管理することが可能です。

二つ目はデザインの柔軟性です。メディアクエリという機能を使用することで、デバイスの画面サイズや種類に応じて異なるデザインを適用することができます。例えば、PC 向けとモバイル向けで異なるレイアウトを指定することが可能です。

三つ目は再利用性の向上です。 CSS を使用すると、 1つ の CSS ファイルを複数の HTML ページで共有することで、同じスタイルを簡単に再利用できます。これにより Web サイト全体のスタイルを統一することが容易になります。

CSSの基本構文

CSS の基本構文は、セレクタと宣言ブロックで構成されます。また、宣言ブロックには複数の宣言を記述することができ、宣言はプロパティと値を使って設定します。以下の例では、 { から } までが宣言ブロックで、「プロパティ: 値;」が宣言となります。 

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

セレクタは、スタイルを適用する対象を指定します。例えば HTML の要素（例: h1 や p ）、クラス名（例: .class ）、ID名（例: #id ）を指定できます。これにより、特定の要素やグループに対してスタイルを適用することが可能です。

プロパティは、どのようなスタイルを設定するかを指定します。例えば color プロパティは文字の色を設定し、 font-size プロパティはフォントサイズを指定します。

値は、プロパティに具体的なスタイルを設定するための内容を指定します。例えば color プロパティに対して #FF0000 を指定すると赤色になります。この値は 16 進数の RGB カラーコードで、 CSS では名前付き色（例: red ）や HSL 表記（例: hsl(0, 100%, 50%) ）も使用可能です。また font-size プロパティには 24px のようにサイズを指定できます。

以下は p 要素に文字の色とフォントサイズを指定する例です。 

p {
  color: #FF0000; /* 赤色 */
  font-size: 23px; /* フォントサイズ */
}

なお CSS の仕様については W3C (World Wide Web Consortium) の CSS Working Group で策定されています。詳しくは「CSSの仕様について」を参照されてください。

CSSの実際の例

簡単なテストとして次のような HTML 文書を作成しました。赤字で表示されている部分が CSS に関する記述となります。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル文書</title>
    <style>
        p {
            color: #FF0000;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>こんにちは</p>
    <p>お元気ですか？</p>
</body>
</html>

この文書を sample.txt という名前で保存しました。保存が終わったらブラウザから sample.txt をブラウザで開いてみてください。

CSSの基本構文(1)

HTML 文書の中の p 要素に対して、 CSS を使って記述したスタイルが適用されました。文字の色が赤色に設定され、フォントサイズが 24px に設定されています。

では先ほどの HTML 文書の CSS の部分について次のように変更してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル文書</title>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>こんにちは</p>
    <p>お元気ですか？</p>
</body>
</html>

保存が終わったらブラウザから sample.txt をブラウザで開いてみてください。

CSSの基本構文(2)

HTML 文書の中の p 要素に対して、 CSS を使って記述した新しいスタイルが適用されました。文字の色が青色に設定され、フォントサイズが 16px に設定されています。このように CSS を変更することで HTML 文書のスタイルを変更することができます。

-- --

CSS とはどういったものなのかについて解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。