目次
CSSの書式(セレクター、プロパティ、値の指定方法)
エンコード・外部スタイルシートの読込み
@charset
@charset "文字エンコード";
文字エンコードを指定する。
文字エンコード
@import
@import url(URL);
@import "URL";
外部スタイルシートのURLを指定する。
URL
背景
background
{background: background-imageの値 background-repeatの値 background-positionの値 background-colorの値;}
背景に関する属性をまとめて指定する。
{background: 1つ目の背景の値, 2つ目の背景の値, ⋯, 最後の背景の値}
複数の背景に関する属性をまとめて指定する。
※最後の背景の値のみ背景色が設定可。
background-image
{background-image: 画像;}
背景画像を指定する。
画像
{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: ボックスの透明度;}
ボックスの透明度を指定する。
ボックスの透明度
テキストとフォント
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: スタイル;}
フォントのスタイルを指定する。
スタイル
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: 高さ;}
行の高さを指定する。
高さ
font-family
{font-family: フォント名;}
フォントの種類を指定する。
フォント名
- フォントの正式名称
- 一般名(serif、sans-serif、cursive、fantasy、monospace)
マージンとパディング
margin
{margin: 幅;}
マージンの幅をまとめて指定する。
幅
{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: 画像;}
リストのマーカーに画像を指定する。
画像
list-style-position
{list-style-position: 位置;}
リストのマーカーの位置を指定する。
位置
ボックス
width
{width: 幅;}
ボックスの幅を指定する。
幅
min-width
{min-width: 幅;}
ボックスの最小の幅を指定する。
幅
max-width
{max-width: 幅;}
ボックスの最大の幅を指定する。
幅
height
{height: 高さ;}
ボックスの高さを指定する。
高さ
min-height
{min-height: 高さ;}
ボックスの最小の高さを指定する。
高さ
max-height
{max-height: 高さ;}
ボックスの最大の高さを指定する。
高さ
表示と配置
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: 位置;}
上からの位置を指定する。
位置
bottom
{bottom: 位置;}
下からの位置を指定する。
位置
left
{left: 位置;}
左からの位置を指定する。
位置
right
{right: 位置;}
右からの位置を指定する。
位置
z-index
{z-index: 値;}
重ね合わせの順序を指定する。
値
float
{float: フロート;}
ボックスをフロートさせ、寄せて配置する(後続するボックスは回り込む)。
フロート
- left(左寄せ)
- right(右寄せ)
- none(なし)
clear
{clear: 対象;}
ボックスのフロートを解除する。
対象
- left(左寄せのフロートを解除)
- right(右寄せのフロートを解除)
- both(両方解除)
- none(解除しない)
テーブル
table-layout
{table-layout: レイアウト方法;}
テーブル(表)のレイアウト方法を指定する。
レイアウト方法
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名.クラス名 {⋯}
※要素名を省略した場合、全ての要素が対象となる。
属性セレクター
要素名[属性] {⋯}
要素名[属性="属性値"] {⋯}
※要素名を省略した場合、属性に関連する要素が対象となる。
:hover
マウスでポイントしたオブジェクトを指定する疑似クラス。
:focus
カーソルがフォーカスしたものを指定する疑似クラス。
:active
マウスのボタンが押されているなど、アクティブなオブジェクトを指定する疑似クラス。
:nth-child(値)
値
連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から番号を指定する疑似クラス。
:nth-child(アルファベット値)
アルファベット値
連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。
:nth-last-child(値)
値
連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から番号を指定する疑似クラス。
:nth-last-child(アルファベット値)
アルファベット値
連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。
:first-child
連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から1番目を指定する疑似クラス。
:last-child
連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から1番目を指定する疑似クラス。
:nth-of-type(値)
値
連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から番号を指定する疑似クラス。
:nth-of-type(アルファベット値)
アルファベット値
連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。
:nth-last-of-type(値)
値
連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から番号を指定する疑似クラス。
:nth-last-of-type(アルファベット値)
アルファベット値
連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。
:first-of-type
連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から1番目を指定する疑似クラス。
:last-of-type
連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から1番目を指定する疑似クラス。
単位