CSS の基本

前のページ Overview: Getting started with the web 次のページ

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか？そのような場所でコンテンツを画面に表示させるにはどうすればいいのか？背景画像と色を使ってウェブページをどのように飾るのか？というような疑問に答えていきます。

それでは CSS とは何でしょうか？

HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述します。

p {
  color: red;
}

それでは試してみましょう: これらの 3 行の CSS をテキストエディターの新しいファイルに貼り付け、ファイルを style.css として styles ディレクトリーに保存します。

しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、ファイルを扱うと HTML の基本を読み、まず何をする必要があるのかを見てください。)

index.html ファイルを開き、次の行を head 内のどこか、つまり <head> タグと </head> タグの間に貼り付けます:
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
index.html を保存し、ブラウザで読み込みます。このように表示されるでしょう :

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css. 段落テキスト(<p>と</p>で囲んだ文字)が赤色になりましたか？おめでとうございます！今はじめて CSS を書き、成功しました！

CSS ルールセットの構造

上記の CSS をもう少し詳しく見てみましょう:

CSS p declaration color red

全体の構造はルールセットと呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :

セレクタ (selector): ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。
宣言 (declaration): color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定します。
プロパティ (property): 指定された HTML 要素のスタイルを設定する方法 (この場合 color は <p> 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。
プロパティ値 (property value): プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。

構文の他の重要な部分に注意してください:

各ルールセット (セレクタを除く) は中括弧 ({}) で囲む必要があります。
各宣言内ではコロン (:) を使用してプロパティを値から分離する必要があります。
各規則セット内でセミコロン (;) を使用し、各宣言を次の規則と区切る必要があります。

したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素を選択する

複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。例えば:

p,li,h1 {
  color: red;
}

さまざまな種類のセレクタ

多くのさまざまな種類のセレクタがあります。上の項目では、特定のHTMLドキュメント内の特定のタイプのすべての要素を選択する要素セレクタだけを取り上げました。しかしそれ以上に細かい選択をすることができます。一般的なタイプのセレクタを次に示します:

セレクタ名	何を選択するか	例
要素セレクタ (時々タグまたは型セレクタと呼ばれます)	指定された型のすべての HTML 要素	`p` `<p>` を選択
ID セレクタ	ページ上の指定された ID を持つ要素。特定のHTMLページでは、1つのIDにつき1つの要素（そしてもちろん1つの要素につき1つのID）しか許されません。	`#my-id` `<p id="my-id">` または `<a id="my-id">` を選択
クラスセレクタ	指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます)	`.my-class` `<p class="my-class">` 及び `<a class="my-class">` を選択
属性セレクタ	指定された属性を持つページ上の要素	`img[src]` `<img src="myimage.png">` を選択するが、`<img> は選択しない`
擬似クラスセレクタ	指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。	`a:hover` `<a>` を選択するが、マウスポインターがリンク上にあるときのみ。

セレクタの種類は多く、セレクタガイドにより詳しい一覧があります。

フォントとテキスト

CSS の基本をいくつか勉強しましたので、style.css ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。

まず最初に、どこかの安全に保存した Google フォントの出力を見つけてください。<link> 要素を index.html の上部 (<head> タグと </head> タグの間) のどこかに追加します。これは次のようになります:
```
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。
次に style.css ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。
代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の font-family 行に置き換えます。(この font-family は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<html> はページ全体の親要素です。その中のすべての要素は同じ font-size と font-family を継承します):
```
html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}
```
注: 「px」の意味を説明するコメントを追加しました。/* と */ の間にある CSS ドキュメント内のものは CSS コメントです。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。
HTML ボディ (<h1>、<li>、<p>) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します:
```
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}
```

これらの px 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

ボックス、ボックス、ボックスについてのすべてのこと

CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。

a big stack of boxes or crates sat on top of one another

当然のことながら、CSS レイアウトは主にボックスモデルに基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:

padding、コンテンツのまわりのスペース (例えば段落テキストの周り)
border、padding のすぐ外側にある実線
margin、要素の外側の周りの空間

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

このセクションでは次のものを使用します :

width (要素の)
background-color : 要素の内容と padding の背後にある色
color: 要素のコンテンツ (通常はテキスト) の色
text-shadow: 要素内のテキストに影を設定する
display: 要素の表示モードを設定します (これについてはまだ心配しないでください)

では、ページに CSS を追加しましょう！これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。

ページの色を変更する

html {
  background-color: #00539F;
}

このルールはページ全体の背景色に設定を行います。上記のカラーコードを、サイトを計画する際に選択した色に変更します。

ボディのスタイリング

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

次は <body> 要素です。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう:

width: 600px; — これにより body は常に 600 ピクセルの幅になります。
margin: 0 auto; — margin や padding などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は 0 になります )。2 番目の値は左右です (ここで auto は利用可能な水平スペースを左右に均等に分割します)。margin の構文で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。
background-color: #FF9500; — 前と同じようにこれは要素の背景色を設定します。このプロジェクトでは body にhtml 要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。white や何でも好きなものを自由に使用してください。
padding: 0 20px 20px 20px; — paddingに 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。margin と同様に、パディング構文で説明されているように、1つ、2つ、または3つの値を使用することもできます。
border: 5px solid black; — これはボディの全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。

メインページタイトルの配置とスタイリング

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが <h1> 要素 (他の中でも) にデフォルトのスタイルを適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、margin: 0; を設定してデフォルトのスタイルを上書きします。

次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを html の背景色と同じ色にしました。

私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する text-shadow です。その 4 つの値は次のとおりです。

最初のピクセル値は、テキストからのシャドウの水平オフセットを設定します。移動する距離は負の値で、左に移動する必要があります。
2 番目のピクセル値は、テキストからシャドウの垂直オフセットを設定します　(この例では、どれだけ下に移動するか)。負の値では上に移動します。
3 番目のピクセル値は影のぼかし半径を設定します。値が大きいほど影がぼやけることを意味します。
4 番目の色は影の基本色を設定します。

繰り返しますが、さまざまな値を試してみてください。

画像のセンタリング

img {
  display: block;
  margin: 0 auto;
}

最後に画像をよりよく見えるように中央に配置します。以前は body のために実施したことと同じようにもう一度 margin: 0 auto トリックを使うことができましたが、何か別のことをする必要もあります。body 要素はブロックレベルです。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。一方、イメージはインライン要素でありできないことを意味します。画像にマージンを適用するには、display: block; を使用して画像のブロックレベルの動作を指定する必要があります。

注: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <img> 要素の width プロパティを小さな値、例えば 400 px; に設定することで、 CSS を使用してイメージのサイズを変更します。

注: あなたがまだ display: block; とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、display のリファレンスページを参照してください。

まとめ

この記事のすべての手順に従っている場合は、次のようなページが表示されます (このリンクから我々が作成したバージョンを見ることもできます)。

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。

ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。