情報処理のWeb教科書―IPA情報処理試験対策のお供に!

CSS(Cascading Style Sheets:カスケーディングスタイルシート)入門

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

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

目次

このページの目次です。

1. CSS(スタイルシート)とは

2. CSSの組込み方法

3. CSSの書き方

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

更新履歴

1. CSS(スタイルシート)とは

スタイルシートは、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。

省略してCSS

スタイルシートは、英語でCascading Style Sheets(カスケーディングスタイルシート)、省略してCSSと記述です。 以降ではCSSを用いて記載していきます。

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

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

CSSの記述例

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

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

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

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

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

2. CSSの組込み方法

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

外部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>

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

重複したスタイル

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

例えば、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>

3. 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の属性セレクタ

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

CSSの色指定

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

詳細

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

更新履歴

戻る

スポンサーリンク

情報処理の知識体系

プログラミング

各試験の問題と解説

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

スポンサーリンク