CSS（Cascading Style Sheets：カスケーディングスタイルシート）入門

トッププログラミング Web CSS

スタイルシートは、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。Webプログラミングを行う場合、HTMLと合わせてCSSの知識が必須となります。ここでは、CSS入門をテーマに、CSS書き方についての知識をまとめています。

▲記事トップへ

1. CSS（スタイルシート）とは

CSS（スタイルシート）は、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。 CSSの入門するにあたって、まず初めにCSSとは何か簡単に補足していきます。

Cascading Style Sheetsの略

CSSは、英語でCascading Style Sheets（カスケーディングスタイルシート）、省略してCSSと記述です。

スタイルシート言語

CSSはPHPやJavaのようなプログラミング言語ではありません。またHTMLやXMLのようにマークアップ言語でもありません。

CSSはスタイルシート言語です。 HTMLやXMLなどのマークアップ言語の要素を指定して装飾するために使う言語です。たとえば、CSSを使って文字に色をつけたり、レイアウトを調整が行えます。

CSSの記述例

CSSの記述例を見ていきます。

タグにstyle属性を指定して記述する例

CSSはHTMLのタグのstyle属性に「プロパティ：値」というように記述します。

<p style="color:red">HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>

ただし、一般的にタグに直接style属性を記述してコーディングするのではなく、HTMLなどの文書ファイルとは別に「.css」ファイルを作成して記述します。

Webサイトを構築する際にCSSを用いる理由

Webサイトを構築する際にCSSを用いる理由としては、複数のWebページの見た目を統一することが容易にできるようになる事があげられます。

2. CSSの仕様とレベル

CSSの仕様にはレベルという段階があります。

CSS1―Cascading Style Sheets, level 1

CSS1は、作成者と閲覧者がHTMLドキュメントにスタイル（フォント、色、間隔など）を添付できるようにする単純なスタイルシートのメカニズムとなっています。

参考）https://www.w3.org/TR/CSS1/

CSS2―Cascading Style Sheets, level 2

CSS2はCSS1上に構築されており、ごく一部の例外を除き、有効なCSS1スタイルシートはすべてCSS2スタイルシートです。 CSS2はメディア固有のスタイルシートをサポートしているため、作成者は視覚的なブラウザ、聴覚デバイス、プリンタ、点字デバイス、ハンドヘルドデバイスなどに合わせてドキュメントの表示を調整できます。また、この仕様では、コンテンツの配置、ダウンロード可能なフォント、表のレイアウト、国際化のための機能、自動カウンタと番号付け、およびユーザーインターフェイスに関連するいくつかのプロパティもサポートしています。

参考）https://www.w3.org/TR/2008/REC-CSS2-20080411/

CSS2.1―Cascading Style Sheets Level 2 Revision 1

CSS2.1は、CSS1上に構築されるCSS2上に構築されます。メディア固有のスタイルシートをサポートしているため、作成者は視覚的なブラウザ、聴覚デバイス、プリンタ、点字デバイス、ハンドヘルドデバイスなどに合わせてドキュメントの表示を調整できます。また、コンテンツの配置、表のレイアウト、国際化のための機能、およびユーザーインターフェイスに関連する一部のプロパティもサポートしています。

参考）https://www.w3.org/TR/CSS21/

CSS2.2―Cascading Style Sheets Level 2 Revision 2

CSS 2.2は、CSS level 2の2度目の改訂版です。CSS 2.1における数カ所の誤りを修正しています。

参考）https://momdo.github.io/css2/Overview.html

CSS3以降

CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとされています。 CSS4はモジュール化されたため、単一の統合された仕様は存在せず、「Level 4」モジュールの総称となっています。

3. CSSの組込み方法

CSSの組込み方法は3パターンあります。

外部CSS（HTMLでCSSを別ファイルに記述）
内部CSS（styleタグに記述）
インラインCSS（タグにstyle属性を指定して記述）

外部CSS（HTMLでCSSを別ファイルに記述）

HTMLでCSSを別ファイルに記述することでCSSが組み込めます。

HTMLファイル

HTMLファイルではheadタグの要素として、linkタグを記述し、linkタグの属性にて取り込むCSSファイルを指定します。

<html>
<head>
<title>ブラウザに表示されるページタイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>CSSの定義で色が指定されます。</p>
</body>
</html>

CSSファイル

CSSファイルには以下のように記述します。

p {
	color:red
}

内部CSS（styleタグに記述）

HTMLファイル内にstyleタグを記述してCSSが組み込めます。

<!DOCTYPE html>
<html>
<head>

<style>
p {
	color:red
}
</style>

</head>
<body>
:
</body>
</html>

インラインCSS（タグにstyle属性を指定して記述）

CSSはHTMLのタグのstyle属性に「プロパティ：値」というように記述することでCSSが組み込めます。

<p style="color:red">CSSの定義で色が指定されます。</p>

重複したスタイル

複数の同じスタイルが定義された場合は最後に読み込まれたスタイルの定義が採用されます。

例えば、CSSファイルには以下のように記述します。

p {
	color:red
}

そして、HTMLファイルに以下のように記述した場合、外部CSSの後に内部CSSの定義が読み込まれるため、色はorangeになります。

<html>
<head>
<title>ブラウザに表示されるページタイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
p {
	color:orange;
}
</style>

</head>
<body>
<p>CSSの定義で色が指定されます。</p>
</body>
</html>

4. CSSの書き方

CSSの記述例を見ていきます。

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

CSSの構成要素

セレクタ
スタイルを適用する対象を指定する部分を「セレクタ」といいます。
プロパティ
設定するスタイルの性質（色や大きさなど）を「プロパティ」といいます。
値
プロパティに設定する設定値を「値」といいます。
宣言ブロック
「 {プロパティ:値; プロパティ:値; ・・・}」の設定するスタイルのかたまりのことを「宣言ブロック」といいます。
宣言
「プロパティ:値」の部分のことを「宣言」といいます。

CSSのセレクタ

CSSのセレクタについて見ていきます。

CSSのセレクタの分類

セレクタの分類には以下のようなものがあります。

CSSのシンプルセレクタ

タグ名、ID、クラスに基づいて要素を選択します。

CSSの要素セレクタ

要素セレクタは、HTMLのタグ名をもとに要素を選択します。以下はpタグのスタイルをテキストのページ中央寄せ、色を赤に指定する例です。

p {
  text-align: center;
  color: red;
}

CSSのIDセレクタ

IDセレクタは、HTMLのタグに設定されたid属性をもとに要素を選択します。以下はid="paragraph01"を指定したタグをIDセレクタでスタイルをテキストのページ中央寄せ、色を赤に指定する例です。

<p id="paragraph01">・・・</p">

#paragraph01 {
  text-align: center;
  color: red;
}

CSSのクラスセレクタ

クラスセレクタは、HTMLのタグに設定されたクラス属性をもとに要素を選択します。

<p class="center">・・・</p">

.center {
  text-align: center;
  color: red;
}

以下のようにHTML要素を指定して選択することもできます。

p.center {
  text-align: center;
  color: red;
}

CSSのユニバーサルセレクタ

ユニバーサルセレクタは全てのHTML要素を対象にするセレクタです。別名で全称セレクタといいます。

* {
  text-align: center;
  color: red;
}

CSSのグルーピングセレクタ

グルーピングセレクタは同じスタイルの要素をまとめて定義するセレクタです。以下のようにカンマ区切りで記述します。同じ定義のコードが最小化して記述できます。

h1, h2, p {
  text-align: center;
  color: red;
}

CSSのコンビネーションセレクタ

特定の関係に基づいて要素を選択します。

CSSの疑似クラスセレクタ

特定の状態に基づいて要素を選択します。

CSSの疑似要素セレクタ

要素の一部を選択してスタイルを設定します。

CSSの属性セレクタ

タグの属性または属性値に基づいて要素を選択します。

5. 色の指定

CSSでの色の指定は、定義済みの色の名前（red、orange、blueなど）、RGB、HEX、HSL、RGBA、HSLA、の値で指定できます。文字の色、背景の色などホームページ作成する際に必要な色指定の知識を解説していきます。

CSSの色（確認ツールとコード一覧）

はじめにCSSの色についてまとめました。「確認ツール」で指定したコードの色がご確認いただけます。また「色コードとサンプルの一覧」も掲載していますので、色に対してどのようなコードが割り当てられているか把握できると思います。 CSSでの色の指定方法については次のセクション以降で解説しています。

CSSの色確認ツール

CSSの表示色確認ツールです。色のコードを入力して表示ボタンを押すとカラー領域の背景色が指定の色になります。「#ff6347」や「tomato」のように指定してください。

CSSの色コードとサンプルの一覧

CSSの色コードとサンプルの一覧です。掲載されていない色コードは上述のCSSの色確認ツールでご確認いただけます。一覧をクリックすると拡大した一覧が表示できます。

ホームページ作成と色の指定方法

ホームページはHTMLやCSSなどのコードを記述して作成します。 HTMLでも色の指定は行えますが、文字の色や背景の色などレイアウトに関わる部分はCSSで指定することが推奨されています。

HTMLでホームページを構成するWebページの構成を記述し、CSSで文字の色や背景の色などレイアウトを定義します。その他、動きをつける場合はJavaScriptなどのプログラム言語で処理を記述します。

CSSの色の指定方法

CSSでの色の指定は、定義済みの色の名前（red、orange、blueなど）、RGB、HEX、HSL、RGBA、HSLA、の値で指定できます。

定義済みの色の名前

定義済みの名前には例えば以下のような色名があります。

red

tomato

orange

dodgerBlue

mediumseaGreen

gray

slateblue

violet

lightgray

CSSの色の値（RGB、HEX、HSL、RGBA、HSLA）

CSSでは、定義済みの名前以外に、RGB、HEX、HSL、RGBA、HSLA、の値で指定できます。

以下は全部、tomatoと同じ色になります。

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

色を薄く透過する場合

rgba、hslaで色を薄く透過することもできます。例えば、50％に薄める場合は、rgba、hslaの第4引数に0.5と指定します。

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

RGBの値：rgb(赤, 緑, 青)

ご存知のとおり、色は赤緑青の組合せで決まります。RGBは、Red Green Blueの略です。各色を0～255の間で定義して設定することで様々な色が指定できます。 0～255の値は0が濃く、255が薄くなります。赤緑青全てが0の場合は黒、全て255の場合は白になります。

rgb(255, 99, 71)

HEXの値：rgb(赤, 緑, 青)

HEX値は、16進：0～Fで指定する値です。Rは赤、Gは緑、Bは青とすると、#RRGGBBというように指定します。

#ff6347

背景の色（background-color）

ホームページ（HTMLの要素）の背景色は「background-color」で指定できます。

<div style="background-color:red">red</div>

文字の色（color）

ホームページ（HTMLの要素）の文字の色は「color」で指定できます。

<div style="color:tomato">tomato</div>

枠線の色（border）

ホームページ（HTMLの要素）の枠線の色は「border」で指定できます。

<div style="border:2px solid tomato">tomato</div>

6. 画像の指定

CSSの画像の指定方法について見ていきます。

背景画像

背景画像関連のCSSについてまとめていきます。

背景画像の表示（background-image）

ホームページ（HTMLの要素）の背景画像は「background-image」で指定できます。

<body style="background-image:url("back-image.gif");">
　：
</body>

なお、背景画像を使用する場合は、テキストの邪魔にならない画像を使用してください。

背景画像の繰返し指定（background-repeat）

背景画像はデフォルトでは垂直、水平方向に繰返し表示されます。デフォルトと異なる表示にする場合はbackground-repeatを指定します。

repeat-x

横方向に繰り返す場合はrepeat-xを指定します。

body {
  background-image: url("bg.png");
  background-repeat: repeat-x;
}

repeat-y

縦方向に繰り返す場合はrepeat-yを指定します。

body {
  background-image: url("bg.png");
  background-repeat: repeat-y;
}

no-repeat

繰り返さない場合はno-repeatを指定します。

body {
  background-image: url("bg.png");
  background-repeat: no-repeat;
}

もっと知識を広げるための参考

プログラミング
プログラミング作法などプログラミングについてまとめています。Python、C言語、流れ図などプログラミングのオリジナル入門テキスト問形でまとめています。

更新履歴

2021/8/24 CSSの仕様とレベルについて追記しました。
2021/1/8 CSSとは何かについて追記しました。
2019/11/29 背景画像の繰返し指定（background-repeat）について追記しました。
2019/11/23 背景の画像（background-image）について追記しました。
2019/11/4 重複したスタイルについて追記しました。
2019/11/2 CSSの組込み方法について追記しました。
2019/11/1 CSSのグルーピングセレクタについて追記しました。
2019/10/31 CSSのユニバーサルセレクタについて追記しました。
2019/10/30 記事をUPしました。

戻る

スポンサーリンク

情報処理の知識体系

各試験の問題と解説

ランダム出題・採点アプリ

プログラミング