CSS - CSSの基礎
概要
CSS (Cascading Style Sheets) とは、Webコンテンツをスタイル設定するコードである。
テキストの色の変更、コンテンツ (Webページ) のレイアウト位置の変更、背景画像を使用してWebページを装飾する等の様々なことができる。
CSSはプログラミング言語やマークアップ言語ではなく、スタイルシート言語である。
CSSは、HTML要素を選択的にスタイル設定するために使用する。
CSSの使用
まず、以下に示すCSSをstylesという名前のディレクトリにstyle.cssという名前で保存する。
以下の例では、段落テキストの色を赤に設定している。
p {
color: red;
}
CSSを動作させるには、htmlファイルに適用する必要がある。
CSSをhtmlファイルで指定するには、
<head>タグと</head>タグの間にCSSファイルを適用する。 (インラインスタイルを除く)
- 外部スタイルシート (External Stylesheet) を指定する方法
- 複数のHTMLファイルで共有されるスタイルを、効率的に管理するために使用される。
- 埋め込みスタイル (Embedded Styles) を使用する方法
- 特定のHTMLファイルにのみ適用されるスタイルを定義する場合に使用する。
- インラインスタイル (Inline Styles) を使用する方法
- 特定の要素に対して、個別にスタイルを適用する場合に使用される。
外部スタイルシート (External Stylesheet) を指定する方法
<head>
<link rel="stylesheet" href="styles/style.css" />
</head>
埋め込みスタイル（Embedded Styles）を使用する方法
<head>
<style>
/* CSSスタイルを直接記述 */
body {
background-color: lightblue;
}
</style>
</head>
インラインスタイル (Inline Styles) を使用する方法
<head>
<!-- ...略 -->
</head>
<body style="background-color: lightblue;"> <!-- インラインスタイルを直接指定 -->
<!-- HTMLコンテンツを記述 -->
</body>
CSSのルールセット
CSSの構造全体をルールセットと呼ぶ。 (ルールセットは、単にルールとも呼ばれることもある)
- セレクタ
- ルールセットの最初にあるHTML要素名である。
- スタイルを設定する要素 (上記の例では、
要素) を定義する。
- 宣言
- これは、color: red;のような単一の規則である。
- 要素のどのプロパティにスタイルを適用するかを指定する。
- プロパティ
- HTML要素のスタイルを指定する。 (上記の例では、colorは
要素のプロパティ)
- CSSでは、ルールの中でどのプロパティに影響を与えるかを選択する。
- HTML要素のスタイルを指定する。 (上記の例では、colorは
- プロパティの値
- プロパティの
;(コロン)の後には、プロパティ値がある。 - これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。
- プロパティの
ルールには、他にも重要な部分がある。
- 各ルールセットは、
{}で括る必要がある。 - 各宣言の中では、
:(コロン)を使用して、プロパティとその値を区切る必要がある。 - 各ルールセットの中では、
;(セミコロン)を使用して、各宣言と次の宣言を区切る必要がある。
1つのルールセットで複数のプロパティ値を変更する場合は、セミコロンで区切って記述する。
p {
color: red;
width: 500px;
border: 1px solid black;
}
複数の要素の選択
複数の要素を選択して、それら全てに単一のルールセットを適用することができる。
複数のセレクタを指定する場合は、,(カンマ)で区切る。
p,
li,
h1 {
color: red;
}
セレクタの種類
セレクタには多くの種類が存在する。
要素セレクタは、指定したタイプの要素を全て選択するものであるが、より特定の要素を選択することもできる。
| セレクタ名 | 選択するもの | 例 |
|---|---|---|
| 要素セレクタ (タグセレクタ、タイプセレクタとも呼ばれる) |
指定されたタイプの全てのHTML要素 | p <p> |
| IDセレクタ | 指定されたIDを持つページ上の要素 指定されたHTMLページでは、各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>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。 |
id属性とclass属性の優先度は、id属性 -> class属性である。
- id属性は使用頻度が限られるため、サイト全体を通じて不変の固定要素に使用する。
- class属性は、1ページ内で何度も使用できるため、サイトの中に何度も使用する見出しや表等に使用する。
さらに多くのセレクタが存在するため、詳細を知りたい場合はMDNセレクタガイドを参照すること。
要素セレクタ
要素セレクタは、一般的には使用されない。
要素セレクタを避ける理由として、以下に示すものが挙げられる。
- 詳細度が低すぎて上書きが必要になりやすい。
- スコープが広すぎるため、予期せぬ影響が出やすい。
- コンポーネント指向の設計と相性が悪い。
- クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。
IDセレクタ
IDセレクタは、より高い詳細度 (優先度) を持つ。
1ページ内で同じIDは1度しか使用できないため、唯一の要素にのみ適用する。
- メインヘッダ (#header)
- メインナビゲーション (#main-nav)
- フッタ (#footer)
- ログインフォーム (#login-form)
また、JavaScriptで要素を特定する場合に使用される。
/* IDセレクタ: ページ内で唯一の要素 */
#header {
position: fixed;
top: 0;
width: 100%;
}
クラスセレクタ
クラスセレクタは、複数の要素で共通のスタイルを適用する場合に使用する。
同じページ内で何度でも再利用可能であり、1つの要素に複数のクラスを適用できる。
CSSの詳細度を管理しやすくするため、できるだけクラスを優先して使用する。
コンポーネントベースの設計には主にクラスが使用される。
- ボタンのスタイル (.btn)
- カードデザイン (.card)
- グリッドレイアウト (.grid-item)
- 警告メッセージ (.alert)
/* クラスセレクタ: 再利用可能なコンポーネント */
div.nav {
padding: 10px 20px;
border-radius: 4px;
}
.btn-primary {
background: blue;
color: white;
}
フォントとテキスト
HTMLファイルのheadタグ内にに<link>要素を追加する。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
以下の例に示すように、フォントファミリーを割り当てる。
font-familyプロパティは、テキストに使用するフォントを指定する。
このルールは、ページ全体のグローバルベースフォントとフォントサイズを定義するものである。
<html>タグはページ全体の親要素であるため、その中の全ての要素は同じfont-sizeとfont-familyを継承する。
html {
font-size: 10px;
font-family: "Open Sans", sans-serif; /* Google Fontsから出力された残りの部分 */
}
HTML本文の中にテキストが入る要素のフォントサイズ、デザインを指定する。
また、行の高さおよび文字間隔も指定する。
h1 {
font-size: 60px;
text-align: center;
}
p,
li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
ボックス
ボックスについて
CSSでは、サイズ、色、位置等を指定することができる。
これは、Webページ上の多くのHTML要素は、他のボックスの上に置かれたボックスと考えることができる。
CSSのレイアウトの多くはボックスモデルに基づいており、Webページ上のスペースを占める各ボックスには、以下に示すようなプロパティがある。
- padding
- コンテンツの周りのスペース。
- 下図では、段落テキストの周りのスペースのことである
- border
- パディングのすぐ外側にある実線
- margin
- ボーダーの外側のスペース
- width
- 要素の幅
- background-color
- 要素の内容と
paddingの背景色
- 要素の内容と
- color
- 要素の内容 (テキスト等) の色
- text-shadow
- 要素内のテキストの影
- display
- 要素の表示モード
背景色
ページ全体の背景色を指定する。
html {
background-color: #ffffff;
}
ボディのスタイリング
<body>要素には、いくつかの宣言がある。
- width
- bodyの幅を指定する。
- margin
- margin等のプロパティに2つの値を設定する場合、最初の値は要素の上下、2番目の値は左右に影響する。
- 他にも、各個別の値を指定することもできる。
- padding
- コンテンツの周りにスペースを配置する。
marginと同様、1〜4個の値を指定することができる。
- background-color
- 要素の背景色を指定する。
- border
- ボーダーの幅、スタイル、色の値を指定する。
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
見出しの位置とスタイル
<body>の上部には、大きな隙間がある。
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。
この大きな隙間のサイズを調整する場合、Webブラウザのデフォルトスタイルをmargin: 0;と指定する。
また、見出しの上下のパディングを20ピクセル、見出しのテキストをHTMLの背景色と同じ色に指定する。
さらに、影を適用するため、text-shadowを指定する。
h1 {
margin: 0;
padding: 20px 0;
color: #ffffff;
text-shadow: 3px 3px 1px black;
/* text-shadow */
/* 引数 1 : テキストからのシャドウの水平オフセット */
/* 引数 2 : テキストからの影の垂直方向のオフセット */
/* 引数 3 : 影のぼかし半径 値を大きくする場合、より影がぼやける */
/* 引数 4 : 影のベースカラー */
}
画像
画像に対してCSSを指定する場合、bodyタグと同様、margin: 0 auto等を使用することもできる。
しかし、CSSを機能させるために追加設定が必要な場合がある。
<body>タグはブロック要素である。
ブロック要素に適用されるマージンは、ページ上の他の要素に尊重される。
これとは対照的に、画像はインライン要素であるため、この画像に自動マージンを適用するにはdisplay: block;を使用して、ブロックレベルの振る舞いを与える必要がある。
img {
display: block;
margin: 0 auto;
}
※注意 1
本文に設定されている幅よりも画像が大きい場合、bodyからはみ出して、ページの他の部分にまで画像が広がる。
これを解決するには、グラフィックエディタを使用して画像の幅を小さくする、または、CSSを使用して<img>要素のwidthプロパティに小さい値を設定する必要がある。
※注意 2
displayの詳細を知りたい場合は、MDNの公式ドキュメントを参照すること。