## 目次

### エンコード・外部スタイルシートの読込み

- @charset
- @import

### 背景

- background
  - background-image
  - background-repeat
  - background-position
  - background-color

### ボーダー

- border-width
  - border-top-width
  - border-bottom-width
  - border-left-width
  - border-right-width
- border-style
  - border-top-style
  - border-bottom-style
  - border-left-style
  - border-right-style
- border-color
  - border-top-color
  - border-bottom-color
  - border-left-color
  - border-right-color
- border
  - border-top
  - border-bottom
  - border-left
  - border-right

### カラー

- color
- opacity

### テキストとフォント

- text-align
- text-decoration
- text-indent
- vertical-align
- font
  - font-style
  - font-weight
  - font-size
  - line-height
  - font-family

### マージンとパディング

- margin
  - margin-top
  - margin-bottom
  - margin-left
  - margin-right
- padding
  - padding-top
  - padding-bottom
  - padding-left
  - padding-right

### リスト

- list-style
  - list-style-type
  - list-style-image
  - list-style-position

### ボックス

- width
- min-width
- max-width
- height
- min-height
- max-height

### 表示と配置

- display
- overflow
  - overflow-x
  - overflow-y
- position
- top
- bottom
- left
- right
- z-index
- float
- clear

### テーブル

- table-layout
- border-collapse
- border-spacing

### CSSの書式（セレクター、プロパティ、値の指定方法）

- 基本書式
- 複数のプロパティ
- 複数のセレクター
- inherit
- !important

### セレクターの種類

- タイプセレクター
- ユニバーサルセレクター
- 子孫セレクター
- IDセレクター
- クラスセレクター
- IDとクラスが混在するセレクター
- 属性セレクター
- :link
- :visited
- :hover
- :focus
- :active
- :nth-child(値)
- :nth-child(アルファベット値)
- :nth-last-child(値)
- :nth-last-child(アルファベット値)
- :first-child
- :last-child
- :nth-of-type(値)
- :nth-of-type(アルファベット値)
- :nth-last-of-type(値)
- :nth-last-of-type(アルファベット値)
- :first-of-type
- :last-of-type

### 単位

- em
- pt
- px

## エンコード・外部スタイルシートの読込み

### @charset

@charset "文字エンコード";

文字エンコードを指定する。

#### 文字エンコード

- utf-8など

### @import

@import url(URL);
@import "URL";

外部スタイルシートのURLを指定する。

#### URL

- 外部スタイルシートのURL

## 背景

### background

{background: background-imageの値 background-repeatの値 background-positionの値 background-colorの値;}

背景に関する属性をまとめて指定する。

{background: 1つ目の背景の値, 2つ目の背景の値, ⋯, 最後の背景の値}

複数の背景に関する属性をまとめて指定する。
※最後の背景の値のみ背景色が設定可。

### background-image

{background-image: 画像;}

背景画像を指定する。

#### 画像

- url(⋯)（画像のURL）
- none（なし）

{background-image: 1つ目の背景画像の値, 2つ目の背景画像の値, ⋯}

複数の背景画像を指定する。

### background-repeat

{background-repeat: 繰り返し;}
{background-repeat: 横方向の値 縦方向の値;}

背景画像の繰り返しを指定する。

#### 繰り返し

- repeat（並べて表示）
- repeat-x（横方向のみに並べて表示）
- repeat-y（縦方向のみに並べて表示）
- no-repeat（繰り返しなし）

{background-repeat: 1つ目の繰り返しの値, 2つ目の繰り返しの値, ⋯}

複数の繰り返しを指定する。

### background-position

{background-position: 水平方向 垂直方向;}
{background-position: 水平方向 水平方向の値 垂直方向 垂直方向の値;}

背景画像の開始位置を指定する。

#### 水平方向

- 数値+単位
- 数値＋%
- left（左端）
- center（中央）
- right（右端）

#### 垂直方向

- 数値+単位
- 数値＋%
- top（上端）
- center（中央）
- bottom（下端）

{background-position: 1つ目の開始位置の値, 2つ目の開始位置の値, ⋯}

複数の背景画像の開始位置を指定する。

### background-color

{background-color: 色;}

背景色を指定する。

#### 色

- #RRGGBB/#RGB
- 色名
- rgb()/rgba()
- hsl()/hsla()
- transparent（透明）

## ボーダー

### border-width

{border-width: 太さ;}

ボーダーの太さをまとめて指定する。

#### 太さ

- 数値+単位
- thin（細線）
- medium（通常の太さの線）
- thick（太線）

{border-width: 上下の太さ 左右の太さ;}

上下と左右のボーダーの太さを指定する。

{border-width: 上の太さ 左右の太さ 下の太さ;}

上、左右、下のボーダーの太さを指定する。

{border-width: 上の太さ 右の太さ 下の太さ 左の太さ;}

全ボーダーの太さを個別に指定する。

### border-top-width

{border-top-width: 太さ;}

上ボーダーの太さを指定する。

### border-bottom-width

{border-bottom-width: 太さ;}

下ボーダーの太さを指定する。

### border-left-width

{border-left-width: 太さ;}

左ボーダーの太さを指定する。

### border-right-width

{border-right-width: 太さ;}

右ボーダーの太さを指定する。

### border-style

{border-style: スタイル;}

ボーダーのスタイルをまとめて指定する。

#### スタイル

- solid（実線）
- double（二重線）
- groove（溝線）
- ridge（稜線）
- inset（沈みこみ）
- outset（浮き出し）
- none（ボーダーなし）
- hidden（ボーダーを表示しない）
- dashed（破線）
- dotted（点線）

{border-style: 上下のスタイル 左右のスタイル;}

上下と左右のボーダーのスタイルを指定する。

{border-style: 上のスタイル 左右のスタイル 下のスタイル;}

上、左右、下のボーダーのスタイルを指定する。

{border-style: 上のスタイル 右のスタイル 下のスタイル 左のスタイル;}

全ボーダーのスタイルを個別に指定する。

### border-top-style

{border-top-style: スタイル;}

上ボーダーのスタイルを指定する。

### border-bottom-style

{border-bottom-style: スタイル;}

下ボーダーのスタイルを指定する。

### border-left-style

{border-left-style: スタイル;}

左ボーダーのスタイルを指定する。

### border-right-style

{border-right-style: スタイル;}

右ボーダーのスタイルを指定する。

### border-color

{border-color: 色;}

ボーダーの色をまとめて指定する。

#### 色

- #RRGGBB/#RGB
- 色名
- rgb()/rgba()
- hsl()/hsla()
- transparent（透明）

{border-color: 上下の色 左右の色;}

上下と左右のボーダーの色を一括指定する。

{border-color: 上の色 左右の色 下の色;}

上、左右、下のボーダーの色を指定する。

{border-color: 上の色 右の色 下の色 左の色;}

全ボーダーの色を個別に指定する。

### border-top-color

{border-top-color: 色;}

上ボーダーの色を指定する。

### border-bottom-color

{border-bottom-color: 色;}

下ボーダーの色を指定する。

### border-left-color

{border-left-color: 色;}

左ボーダーの色を指定する。

### border-right-color

{border-right-color: 色;}

右のボーダーの色を指定する。

### border

{border: border-widthの値 border-styleの値 border-colorの値;}

すべてのボーダーに関する属性をまとめて指定する。

### border-top

{border-top: border-top-widthの値 border-top-styleの値 border-top-colorの値;}

上ボーダーに関する属性をまとめて指定する。

### border-bottom

{border-bottom: border-bottom-widthの値 border-bottom-styleの値 border-bottom-colorの値;}

下ボーダーに関する属性をまとめて指定する。

### border-left

{border-left: border-left-widthの値 border-left-styleの値 border-left-colorの値;}

左ボーダーに関する属性をまとめて指定する。

### border-right

{border-right: border-right-widthの値 border-right-styleの値 border-right-colorの値;}

右ボーダーに関する属性をまとめて指定する。

## カラー

### color

{color: 色;}

文字色を指定する。

#### 色

- #RRGGBB/#RGB
- 色名
- rgb()/rgba()
- hsl()/hsla()
- transparent（透明）

### opacity

{opacity: ボックスの透明度;}

ボックスの透明度を指定する。

#### ボックスの透明度

- 数値（0～1.0）

## テキストとフォント

### text-align

{text-align: 位置;}

テキストの水平方向位置を指定する。

#### 位置

- left（左揃え）
- center（中央揃え）
- right（右揃え）

### text-decoration

{text-decoration: 装飾;}

テキストの文字装飾を指定する。

#### 装飾

- underline（下線）
- overline（上線）
- line-through（取り消し線）
- none（なし）

### text-indent

{text-indent: 幅;}

テキストのインデントを指定する。

#### 幅

- 数値+単位
- 数値+%

### vertical-align

{vertical-align: 位置;}

ボックス内のコンテンツの垂直方向位置を指定する。

#### 位置

- baseline（ベースライン）
- sub（下付き文字）
- super（上付き文字）
- top（上揃え）
- text-top（テキストを基準とした上揃え）
- middle（上下中央揃え）
- bottom（下揃え）
- text-bottom（テキストを基準とした下揃え）
- auto

### font

{font: font-styleの値 font-weightの値 font-sizeの値/line-heightの値 font-familyの値;}

フォントに関する属性をまとめて指定する。

### font-style

{font-style: スタイル;}

フォントのスタイルを指定する。

#### スタイル

- normal
- italic
- oblique

### font-weight

{font-weight: 太さ;}

フォントの太さを指定する。

#### 太さ

- normal
- bold
- bolder
- lighter

### font-size

{font-size: サイズ;}

フォントサイズ（文字のサイズ）を指定する。

#### サイズ

- 数値+単位
- 数値+%
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- larger
- smaller

### line-height

{line-height: 高さ;}

行の高さを指定する。

#### 高さ

- 数値（整数）
- 数値+単位
- 数値+%
- normal

### font-family

{font-family: フォント名;}

フォントの種類を指定する。

#### フォント名

- フォントの正式名称
- 一般名（serif、sans-serif、cursive、fantasy、monospace）

## マージンとパディング

### margin

{margin: 幅;}

マージンの幅をまとめて指定する。

#### 幅

- 数値+単位
- 数値＋%
- auto

{margin: 上下の幅 左右の幅;}

上下と左右のマージンの幅を指定する。

{margin: 上の幅 左右の幅 下の幅;}

上、左右、下のマージンの幅を指定する。

{margin: 上の幅 右の幅 下の幅 左の幅;}

全マージンの幅を個別に指定する。

### margin-top

{margin-top: 幅;}

上マージンの幅を指定する。

### margin-bottom

{margin-bottom: 幅;}

下マージンの幅を指定する。

### margin-left

{margin-left: 幅;}

左マージンの幅を指定する。

### margin-right

{margin-right: 幅;}

右マージンの幅を指定する。

### padding

{padding: 幅;}

パディングの幅をまとめて指定する。

#### 幅

- 数値+単位
- 数値＋%

{padding: 上下の幅 左右の幅;}

上下と左右のパディングの幅を指定する。

{padding: 上の幅 左右の幅 下の幅;}

上、左右、下のパディングの幅を指定する。

{padding: 上の幅 右の幅 下の幅 左の幅;}

全パディングの幅を個別に指定する。

### padding-top

{padding-top: パディング幅;}

上パディングを指定する。

### padding-bottom

{padding-bottom: パディング幅;}

下パディングを指定する。

### padding-left

{padding-left: パディング幅;}

左パディングを指定する。

### padding-right

{padding-right: パディング幅;}

右パディングを指定する。

## リスト

### list-style

{list-style: list-style-typeの値 list-style-imageの値 list-style-positionの値;}

リストのマーカーに関する属性をまとめて指定する。

### list-style-type

{list-style-type: マーカー;}

リストのマーカーの種類を指定する。

#### マーカー

- disc（黒丸）
- circle（白丸）
- square（四角）
- decimal（10進数）
- none（なし）

### list-style-image

{list-style-image: 画像;}

リストのマーカーに画像を指定する。

#### 画像

- url()（画像のURL）
- none（なし）

### list-style-position

{list-style-position: 位置;}

リストのマーカーの位置を指定する。

#### 位置

- inside（内側）
- outside（外側）

## ボックス

### width

{width: 幅;}

ボックスの幅を指定する。

#### 幅

- 数値+単位
- 数値＋%
- auto

### min-width

{min-width: 幅;}

ボックスの最小の幅を指定する。

#### 幅

- 数値+単位
- 数値＋%

### max-width

{max-width: 幅;}

ボックスの最大の幅を指定する。

#### 幅

- 数値+単位
- 数値＋%
- none（なし）

### height

{height: 高さ;}

ボックスの高さを指定する。

#### 高さ

- 数値+単位
- 数値＋%
- auto

### min-height

{min-height: 高さ;}

ボックスの最小の高さを指定する。

#### 高さ

- 数値+単位
- 数値＋%

### max-height

{max-height: 高さ;}

ボックスの最大の高さを指定する。

#### 高さ

- 数値+単位
- 数値＋%
- none（なし）

## 表示と配置

### display

{display: 形式;}

ボックスの表示形式を変更する。

#### 形式

- block（ブロックレベル形式にする）
- inline（インライン形式にする）
- inline-block（インラインブロックレベル形式にする）
- none（存在しないものとして処理される）

### overflow

{overflow: 処理;}

ボックスの内容あふれの処理方法を指定する。

#### 処理

- visible（高さ、幅の指定を無視してすべて表示）
- hidden（高さ、幅の指定により範囲内のみ表示）
- scroll（スクロールバーを表示）
- auto（ブラウザーの処理に任せる）

### overflow-x

{overflow-x: 処理;}

ボックスの幅（x軸）の内容あふれの処理方法を指定する。

#### 処理

- visible（幅の指定を無視してすべて表示）
- hidden（幅の指定により範囲内のみ表示）
- scroll（スクロールバーを表示）
- auto（ブラウザーの処理に任せる）

### overflow-y

{overflow-y: 処理;}

ボックスの高さ（y軸）の内容あふれの処理方法を指定する。

#### 処理

- visible（高さの指定を無視してすべて表示）
- hidden（高さの指定により範囲内のみ表示）
- scroll（スクロールバーを表示）
- auto（ブラウザーの処理に任せる）

### position

{position: 配置;}

要素の配置方法を指定する。

#### 配置

- static（指定なし）
- relative（通常配置される位置からの相対的な位置で指定）
- absolute（親要素に対して絶対的な位置で指定）
- fixed（固定配置で指定）

### top

{top: 位置;}

上からの位置を指定する。

#### 位置

- 数値+単位
- 数値+%
- auto

### bottom

{bottom: 位置;}

下からの位置を指定する。

#### 位置

- 数値+単位
- 数値+%
- auto

### left

{left: 位置;}

左からの位置を指定する。

#### 位置

- 数値+単位
- 数値+%
- auto

### right

{right: 位置;}

右からの位置を指定する。

#### 位置

- 数値+単位
- 数値+%
- auto

### z-index

{z-index: 値;}

重ね合わせの順序を指定する。

#### 値

- 数値（整数）
- auto

### float

{float: フロート;}

ボックスをフロートさせ、寄せて配置する（後続するボックスは回り込む）。

#### フロート

- left（左寄せ）
- right（右寄せ）
- none（なし）

### clear

{clear: 対象;}

ボックスのフロートを解除する。

#### 対象

- left（左寄せのフロートを解除）
- right（右寄せのフロートを解除）
- both（両方解除）
- none（解除しない）

## テーブル

### table-layout

{table-layout: レイアウト方法;}

テーブル（表）のレイアウト方法を指定する。

#### レイアウト方法

- auto
- fixed（列幅を均等）

### border-collapse

{border-collapse: 表示モデル;}

テーブル（表）のボーダーの表示モデルを指定する。

#### 表示モデル

- collapse（隣接するセルのボーダーを重ねて表示）
- separate（隣接するセルのボーダーを間隔をあけて表示）

### border-spacing

{border-spacing: 間隔;}

ボーダーとセル内容との間隔を指定する。

#### 間隔

- 数値+単位

## CSSの書式（セレクター、プロパティ、値の指定方法）

### 基本書式

セレクター {プロパティ: 値;}

セレクターにプロパティと値を設定する。

### 複数のプロパティ

セレクター {
プロパティ1: 値;
プロパティ2: 値;
⋯
}

複数のプロパティに値を設定する。

### 複数のセレクター

セレクター1, セレクター2, セレクター3,⋯ {
プロパティ: 値;
⋯
}

複数のセレクターにプロパティと値を設定する。

### inherit

セレクター {プロパティ: inherit;}

親要素を継承する。

### !important

セレクター {プロパティ: 値!important;}

プロパティの値に最優先の設定をする。

## セレクターの種類

### タイプセレクター

要素名 {⋯}

### ユニバーサルセレクター

* {⋯}

### 子孫セレクター

親要素 子孫要素 {⋯}

### IDセレクター

要素名#ID名 {⋯}

※要素名を省略した場合、全ての要素が対象となる。

### クラスセレクター

要素名.クラス名 {⋯}
要素名.クラス名1.クラス名2.クラス名3⋯ {⋯}

※要素名を省略した場合、全ての要素が対象となる。

### IDとクラスが混在するセレクター

要素名#ID名.クラス名 {⋯}

※要素名を省略した場合、全ての要素が対象となる。

### 属性セレクター

要素名[属性] {⋯}
要素名[属性="属性値"] {⋯}

※要素名を省略した場合、属性に関連する要素が対象となる。

### :link

未アクセスであるものを指定する疑似クラス。

### :visited

アクセス済みであるものを指定する疑似クラス。

### :hover

マウスでポイントしたオブジェクトを指定する疑似クラス。

### :focus

カーソルがフォーカスしたものを指定する疑似クラス。

### :active

マウスのボタンが押されているなど、アクティブなオブジェクトを指定する疑似クラス。

### :nth-child(値)

#### 値

- 数値
- ○n+△（○ずつ連続する△番目）

連続するすべての要素（ID、クラスなど含む）の最初から数えた個数の中から番号を指定する疑似クラス。

### :nth-child(アルファベット値)

#### アルファベット値

- odd（奇数）
- even（偶数）

連続するすべての要素（ID、クラスなど含む）の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。

### :nth-last-child(値)

#### 値

- 数値
- ○n+△（○ずつ連続する△番目）

連続するすべての要素（ID、クラスなど含む）の最後から数えた個数の中から番号を指定する疑似クラス。

### :nth-last-child(アルファベット値)

#### アルファベット値

- odd（奇数）
- even（偶数）

連続するすべての要素（ID、クラスなど含む）の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。

### :first-child

連続するすべての要素（ID、クラスなど含む）の最初から数えた個数の中から1番目を指定する疑似クラス。

### :last-child

連続するすべての要素（ID、クラスなど含む）の最後から数えた個数の中から1番目を指定する疑似クラス。

### :nth-of-type(値)

#### 値

- 数値
- ○n+△（○ずつ連続する△番目）

連続する同じ要素のみ（ID、クラスなど含む）の最初から数えた個数の中から番号を指定する疑似クラス。

### :nth-of-type(アルファベット値)

#### アルファベット値

- odd（奇数）
- even（偶数）

連続する同じ要素のみ（ID、クラスなど含む）の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。

### :nth-last-of-type(値)

#### 値

- 数値
- ○n+△（○ずつ連続する△番目）

連続する同じ要素のみ（ID、クラスなど含む）の最後から数えた個数の中から番号を指定する疑似クラス。

### :nth-last-of-type(アルファベット値)

#### アルファベット値

- odd（奇数）
- even（偶数）

連続する同じ要素のみ（ID、クラスなど含む）の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。

### :first-of-type

連続する同じ要素のみ（ID、クラスなど含む）の最初から数えた個数の中から1番目を指定する疑似クラス。

### :last-of-type

連続する同じ要素のみ（ID、クラスなど含む）の最後から数えた個数の中から1番目を指定する疑似クラス。

## 単位

### em

エム（文字の高さ）

### pt

ポイント

### px

ピクセル