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

CSS

今まではHTMLとJavaScriptを勉強してきました。今回はWeb開発で用いられるもう一つの言語、CSSについて学びましょう。CSSはWebサイトの「見た目」をつかさどる言語です。多くのHTML要素は、CSSを用いることで、その見た目を細かくカスタマイズすることができます。

Web開発で用いられる言語

CSSの書き方を学び、「Hello World!」の文字を赤くしてみましょう。

Hello World!

CSSファイルを作成する​

CSSファイルの拡張子は通常 .css です。今回は index.html と併せて style.css を作成しました。

CSSを書き始める

次の例では、Hello World! を赤色にしています。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./style.css" />
    <title>Title</title>
  </head>
  <body>
    <div id="greeting">Hello World!</div>
  </body>
</html>
style.css
#greeting {
  color: red;
}
GitHub で表示このプログラムを実行する
div 要素

div 要素はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。

index.html
<link rel="stylesheet" href="./style.css" />

まず注目すべきは link 要素です。HTMLで、link 要素を用いることにより、外部のCSSファイルを読み込ませることができます。

セレクタとID​

CSSを記述する際には、まずスタイルを適用する対象となるHTML要素を指定する必要があります。このために用いることができるのが、HTML要素の id 属性です。(上の例では、index.html の9行目)

セレクタ

そして、CSS側に書くのがセレクタです。上の例では、style.css の1行目の #greeting がセレクタで、「id 属性が greeting である要素」を示します。

id 属性は、全てのHTML要素に対して開発者が自由に設定できますが、ひとつのHTML内に同じ id 属性を持つ要素が複数存在してはならない、というルールがあります。

また、id 属性と似た使い方ができる属性として、class 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、複数の要素が同じ値を持つことが許されています。また、スペース区切りで複数の値を設定することもできます。

セレクタ意味
#elementid 属性が element である要素
.elementclass 属性に element が含まれる要素
elementタグ名が element である要素
高度なセレクタ

また、セレクタをスペースで区切ると子孫要素、> で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。

セレクタ意味
div.elementclass 属性に element が含まれる div 要素
#parent .childid 属性が parent である要素の子孫の、class 属性に child が含まれる要素
#parent > divid 属性が parent である要素の直属の子の div 要素

セレクタを上手に活用すると、変更に強くて柔軟なCSSを作成することができます。

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

いよいよ仕上げです。

style.css
#greeting {
  color: red;
}

CSSの { から } で囲まれたブロックの中に、プロパティと呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。

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

これで、Hello World! の文字が赤くなりました。

注記

CSSのプロパティは、オブジェクトにおけるプロパティと似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。

HTMLの style 属性

style.css を作らずとも、HTML内に直接CSSを指定することもできます。例えば、div 要素 の style 属性に color: red; を指定するとどうなるでしょうか。

index.html
<div style="color: red">Hello World!</div>
GitHub で表示このプログラムを実行する

このプログラムを実行すると、style 属性を指定した要素内のテキストが赤色で表示されます。

しかし、style 属性を用いてHTMLとCSSを1つのファイルに混合するよりも、「構造」のファイル (HTML)、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常CSSファイルはHTMLファイルとは別に用意されます。

複数のプロパティ​

style.css
#element {
  color: red;
  font-size: 30px;
}

複数のプロパティを指定する場合には、上のように プロパティ: プロパティ値; の組を並べて記述します。セミコロンの指定が必要であることに注意してください。

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

どうやって調べたらいいの？

プログラミングを始めたての間は、分からないことがあったときにどのように調べたら良いのか戸惑うことが多いと思います。そんなときは、次のような手順で調べてみましょう。例として、「文字を赤くする方法」を調べてみます。

1. タスクを細かく分割する​

現在持ち合わせている知識をもとに、やりたいことを可能な限り細かく分割します。「文字を赤くする」であれば、見た目に関することなのでCSSを使えばいいのだろうと想像がつきます。加えて、色の指定方法について調べてみるとよいでしょう。

2. Google で検索してみる​

「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slackでどんどん質問しましょう。

3. 周辺知識を信頼できる情報源で調べる​

見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScriptの場合は、MDNが便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは color プロパティなので、MDNでこのプロパティについて調べておきましょう。

演習​

基礎演習1 (セレクタ)​

次のような条件を満たす要素を選択するセレクタは何でしょうか。

  1. id 属性が foo の要素
  2. class 属性に bar が含まれる要素の子孫の要素のうち、button 要素であるもの
解答例: セレクタ
  1. #foo
  2. .bar button

基礎演習2 (Hello CSS!)​

下のような、文字色が黄色、背景色が好きな色 (この例では黒) の Hello CSS! をブラウザで表示してみましょう。

Hello CSS!

使用するプロパティは color、background-color です。

解答例: Hello CSS!
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./style.css" />
    <title>Title</title>
  </head>
  <body>
    <div id="greeting">Hello CSS!</div>
  </body>
</html>
style.css
#greeting {
  color: yellow;
  background-color: black;
}
GitHub で表示このプログラムを実行する

中級演習​

画像のようなシンプルなボックスを作ってみましょう。

シンプルなボックス

シンプルで、よく見かけるデザインですが、様々な指定が必要であることが分かります。次のような点に注意してデザインしてみてください。

  • グレーの枠線が付いています (border)
  • 枠線は角丸になっています (border-radius)
  • 枠線の外側に余白があります (margin)
  • 枠線の内側にも余白があります (padding)
  • ボックスに影がついています (box-shadow)
解答例: シンプルなボックス
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./style.css" />
    <title>Title</title>
  </head>
  <body>
    <div id="foo">Foo</div>
  </body>
</html>
style.css
#foo {
  border: 1px solid #aaa;
  border-radius: 10px;
  margin: 30px;
  padding: 30px;
  box-shadow: 0px 0px 2px 1px #aaa;
}
GitHub で表示このプログラムを実行する