メインコンテンツまでスキップ

CSS

ここでは CSS について学んでいきます。 CSS は色や配置などウェブサイトの見た目を変えることができます。

Web 開発で用いられる言語

はじめての CSS​

まずは、CSS を用いて こんにちは、世界！ の文字を赤くしてみましょう。

次の HTML のプログラムと CSS のプログラムを JSFiddle に貼り付けてください。

HTML のプログラム
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title>
  </head>
  <body>
    <p id="greeting">こんにちは、世界！</p>
  </body>
</html>
CSS のプログラム
#greeting {
  color: red;
}

保存すると、画面に こんにちは、世界！ と表示され、文字色が赤くなっているはずです。

CSS の仕組み​

先ほどのプログラムを詳しく見ていきます。

id 属性の指定​

CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。 このために、スタイルを適用する対象となる HTML 要素に id 属性を指定します。

先ほどの例では、HTML のプログラムで p 要素に対して、greeting という id 属性を指定しました。

<p id="greeting">こんにちは、世界！</p>

セレクタ​

次に、CSS でどの HTML 要素に対してスタイルを適用するのかを指定します。 ここで、使用するのがセレクタです。

先ほどの例では、CSS のプログラムで #greeting のように書くことで、greeting という id 属性を持つ HTML 要素に対してスタイルを適用するように指定しています。

#greeting {
  color: red;
}

プロパティとプロパティ値​

次に、指定した HTML 要素に対して、どのようなスタイルを適用するのかを記述します。

#greeting {
  color: red;
}

先ほどの例では、color というプロパティに、red というプロパティ値を指定することで、文字色を赤色にしています。

プロパティはスタイルの種類を表し、プロパティ値はプロパティに指定できる値を表します。

複数のプロパティ​

#greeting {
  color: red;
  font-size: 30px;
}

複数のプロパティを指定する場合には、上のように プロパティ: プロパティ値; の組を並べて記述します。 ここでは、文字サイズを 30px の大きさにしています。

CSS のプロパティには color (文字色) や font-size (文字サイズ) だけでなく、background-color (背景色)、text-decoration (文字装飾) 等、数えきれないほどの種類が定義されています。 様々なプロパティを調べてみてください。

演習問題​

問題 1​

次のように、画面に こんにちは、CSS！ と表示して、文字色を green に、背景色を lightgray に、文字サイズを 40px にしてください。

こんにちは、CSS！

解答例: こんにちは、CSS！
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title>
  </head>
  <body>
    <p id="greeting">こんにちは、CSS！</p>
  </body>
</html>
#greeting {
  color: green;
  background-color: lightgray;
  font-size: 40px;
}
GitHub で表示このプログラムを実行する

問題 2​

HTML と CSS を用いて自分の作りたいウェブサイトを作ってみましょう。 今まで習ったことを使えば、たいていのウェブサイトは作ることができます。 必要に応じて調べながら作ってみてください。