CSSプロパティ早見表

CSSプロパティの早見表です。概要や利用例を説明したページにリンクしています。又、必要に応じて更に使い方を詳細に説明したページにもリンクしています。

目次

 以下で表のヘッダをクリックする事でソート可能です。又、表の右上のボックスで検索も可能です。プロパティ列の各項目をクリックする事で説明のページを参照出来ます。

 文字が小さいと感じる方は「CSSプロパティ一覧」をご参照下さい。

【CSSプロパティ一覧】
区分 プロパティ 名前 概要
色と背景 color フォントの色 フォントの色を英語、RGB、16進数で指定
色と背景 background-color 背景色 背景色を英語、RGB、16進数等で指定
色と背景 background-image 背景画像 背景画像を指定
色と背景 background-repeat 背景画像繰り返し 背景画像を1回だけ表示、横は繰り返し等
色と背景 background-position 背景画像位置 背景画像を上寄せ、センタリング等
色と背景 background-attachment 背景画像固定 ディスプレイに対し固定、又はスクロール
色と背景 background 背景全般 背景色、画像、位置や固定を一括指定
フォント font-family フォント種類 フォント種類を指定
フォント font-weight フォント太さ 基本的に太字
フォント font-size フォントサイズ フォントサイズを%、em等で指定
フォント font-style フォントスタイル 基本的に斜体指定
フォント font フォント全般 フォント種類、サイズ、太字、斜体一括指定
テキスト line-height 行の高さ 行の高さをem,px,%等で指定し、行間に影響
テキスト text-align 文字・画像の水平位置 センタリング、左寄せ、右寄せ、両端揃え
テキスト text-decoration 文字の飾り線 下線、上線、取り消し線、なし
テキスト vertical-align 文字・画像の垂直位置 上、下揃え、px、em、%指定、上・下付き等
テキスト white-space 空白・改行処理 角スペース、タブ、改行を記述通り表示
テキスト letter-spacing 文字間隔 文字と文字の間を広げたり、狭めたりする
テキスト text-indent 字下げ 段落の先頭行に対して1文字空ける等
テキスト word-spacing 単語間隔 英字の単語間隔、半角スペース幅に影響
テキスト text-transform 大小文字変換 大文字、小文字、単語の先頭だけ大文字に変換
ボックス余白 margin 上下左右外側余白 上下左右の外側の余白を一括指定
ボックス余白 margin-top 上の外側余白 上の外側余白を指定
ボックス余白 margin-right 右の外側余白 右の外側余白を指定
ボックス余白 margin-bottom 下の外側余白 下の外側余白を指定
ボックス余白 margin-left 左の外側余白 左の外側余白を指定
ボックス余白 padding 上下左右内側余白 上下左右の内側の余白を一括指定
ボックス余白 padding-top 上の内側余白 上の内側余白を指定
ボックス余白 padding-right 右の内側余白 右の内側余白を指定
ボックス余白 padding-bottom 下の内側余白 下の内側余白を指定
ボックス余白 padding-left 左の内側余白 左の内側余白を指定
ボックス横幅 width 横幅を固定 ボックスの横幅をpx、%、em等で指定
ボックス横幅 max-width 最大幅 ボックスの最大幅をpx、%、em等で指定
ボックス横幅 min-width 最小幅 ボックスの最小幅をpx、%、em等で指定
ボックス高さ height 高さを固定 ボックスの高さをpx、%、em等で指定
ボックス高さ max-height 最大の高さ ボックス最大の高さを固定値や相対値で指定
ボックス高さ min-height 最小の高さ ボックス最小の高さを固定値や相対値で指定
ボックス枠 border 上下左右枠全般 上下左右の枠の種類、太さ、色を一括指定
ボックス枠 border-top 上の枠全般 上の枠の種類、太さ、色を一括指定
ボックス枠 border-right 右の枠全般 右の枠の種類、太さ、色を一括指定
ボックス枠 border-bottom 下の枠全般 下の枠の種類、太さ、色を一括指定
ボックス枠 border-left 左の枠全般 左の枠の種類、太さ、色を一括指定
ボックス枠 border-color 上下左右枠線の色 上下左右の枠線の色を一括指定
ボックス枠 border-top-color 上の枠線の色 上の枠線の色を指定
ボックス枠 border-right-color 右の枠線の色 右の枠線の色を指定
ボックス枠 border-bottom-color 下の枠線の色 下の枠線の色を指定
ボックス枠 border-left-color 左の枠線の色 左の枠線の色を指定
ボックス枠 border-style 上下左右枠線の種類 上下左右の枠線の種類を一括指定
ボックス枠 border-top-style 上の枠線の種類 上の枠線の種類を指定
ボックス枠 border-right-style 右の枠線の種類 右の枠線の種類を指定
ボックス枠 border-bottom-style 下の枠線の種類 下の枠線の種類を指定
ボックス枠 border-left-style 左の枠線の種類 左の枠線の種類を指定
ボックス枠 border-width 上下左右枠線の太さ 上下左右の枠線の太さを一括指定
ボックス枠 border-top-width 上の枠線の太さ 上の枠線の太さを指定
ボックス枠 border-right-width 右の枠線の太さ 右の枠線の太さを指定
ボックス枠 border-bottom-width 下の枠線の太さ 下の枠線の太さを指定
ボックス枠 border-left-width 左の枠線の太さ 左の枠線の太さを指定
表示と配置 float 回り込み right,leftで左右に回り込みを指定
表示と配置 clear 回り込み解除 floatで指定した回り込みを解除
表示と配置 display 表示形式 ブロックとインライン変更や非表示
表示と配置 position 表示位置 ページやウィンドウ等の指定箇所に表示
表示と配置 top 上からの位置 positionと合わせて利用
表示と配置 bottom 下からの位置 positionと合わせて利用
表示と配置 left 左からの位置 positionと合わせて利用
表示と配置 right 右からの位置 positionと合わせて利用
表示と配置 overflow はみ出た時の表示方法 はみ出た時に表示、非表示、スクロール等
表示と配置 clip 見える範囲 ボックス内の見える範囲を制限
表示と配置 direction 表示方向 ボックス内で右寄せ
表示と配置 unicode-bidi 逆表示 文字を逆から表示
表示と配置 visibility 表示・非表示 文字・画像非表示、行・列非表示
表示と配置 z-index 重なる順序 ボックスが重なった時の表示順序を変更
リスト list-style リストマーカー全般 リストマーカー種類、位置、画像を一括指定
リスト list-style-type マーカー種類 リストマーカー記号や番号の種類変更
リスト list-style-position マーカー位置 リストマーカーの開始位置
リスト list-style-image マーカー画像 リストマーカーを画像に変更
テーブル table-layout テーブル表示方法 セルの横幅を均等
テーブル border-collapse セル間表示方法 セル間の表示方法を変え、一重線に可能
テーブル border-spacing セル間隔 セル間隔を広げる、狭める。
テーブル caption-side 表タイトル表示位置 表タイトルの表示位置を上下左右から指定
テーブル empty-cells 空セル罫線非表示 セルにデータがない場合、罫線を非表示
  • このエントリーをはてなブックマークに追加