【CSS】プロパティ&値の読み方と用途 – ABC順

CSSのプロパティ&値の読み方と用途をABC順にまとめました。
CSSは記述内容が多いので例として簡単に記載しています。

HTMLの要素名と属性名はこちらです。

CSS – プロパティの読み方と用途

/*　*/ (コメントアウト)
CSSソースの中にコメントを入れる。
【記述例】/*ここに入力した文字は表示されません*/

appearance (アピアランス)
プラットフォームにおける標準的なUIの外観にする。
【記述例】{ appearance: normal; }

background (バックグラウンド)
背景のプロパティを一括指定する。
【記述例】{ background: #ffffff url(“../images/img.jpg”); }

background-attachment (バックグラウンド – アタッチメント)
スクロール時の背景画像の表示方法を指定する。
【記述例】{ background-attachment: fixed; }

background-clip (バックグラウンド – クリップ)
背景画像を表示する領域を指定する。
【記述例】{ background-clip: border-box; }

background-color (バックグラウンド – カラー)
背景の色を指定する。
【記述例】{ background-color: #ffffff; }

background-image (バックグラウンド – イメージ)
背景画像を指定する。
【記述例】{ background-image: url(“../images/img.jpg”); }

background-origin (バックグラウンド – オリジン)
背景画像を表示する基準位置を指定する。
【記述例】{ background-origin: border-box; }

background-position (バックグラウンド – ポジション)
背景画像を表示する位置を指定する。
【記述例】{ background-position: top center; }

background-repeat (バックグラウンド – リピート)
背景画像の繰り返しを指定する。
【記述例】{ background-repeat: no-repeat; }

background-size (バックグラウンド – サイズ)
背景画像のサイズを指定する。
【記述例】{ background-size: cover; }

border (ボーダー)
ボーダーのプロパティを指定をする。
【記述例】{ border: solid 1px #dfdfdf; }

border-radius (ボーダー – ラディウス)
ボーダーの角丸の指定をする。
【記述例】{ border-radius: 10px; }

box-shadow (ボックス – シャドウ)
要素に影を追加する。
【記述例】{ box-shadow: 0px 0px 0px #ffffff; }

box-sizing (ボックス – サイジング)
要素のサイズの計算方法を指定する。
【記述例】{ box-sizing: border-box; }

cursor (カーソル)
マウスカーソルの形状を指定する。
【記述例】{ cursor: pointer; }

display (ディスプレイ)
要素の表示形式を指定する。
【記述例】{ display: block; }

flex (フレックス)
flexboxアイテムの幅を一括で指定する。
【記述例】{flex: 1 100px;}
※flexプロパティは種類が多いのでこちらの記事を参照してください。

float (フロート)
要素の回り込みを指定する。
【記述例】{ float: left; }

height (ハイト ※ヘイトではありません)
要素の高さを指定する。
【記述例】{ height: 300px; }

letter-spacing (レター – スペーシング)
文字の間隔を指定する。
【記述例】{ letter-spacing: 2px; }

line-height (ライン – ハイト)
テキストの行の高さを指定する。
【記述例】{ line-height: 2; }

margin (マージン)
要素の外側の余白を指定する。
【記述例】{ margin: 0 auto; }

min-height (ミン – ハイト)
要素の高さの最小値を指定する。
【記述例】{ min-height: 300px; }

min-width (ミン – ウィドゥス)
要素の幅の最小値を指定する。
【記述例】{ min-width: 300px; }

opacity (オパシティ)
要素の透明度を指定する。
【記述例】{ opacity: 0.5; }

outline (アウトライン)
要素のアウトラインのプロパティをまとめて指定する。
【記述例】{ outline: solid; }

overflow (オーバーフロウ)
要素からコンテンツがはみ出た時の表示方法を指定する。
【記述例】{ overflow: hidden; }

padding (パディング)
要素の内側の余白を指定する。
【記述例】{ padding: 10px;}

position (ポジション)
要素の配置方法（基準位置）を指定する。
【記述例】{ position: relative; }

text-align (テキスト – アライン)
テキストの行揃えの位置を指定する。
【記述例】{ text-align: center;}

text-indent (テキスト – インデント)
テキストの1行目の字下げ幅を指定する。
【記述例】{ text-indent: 0; }

transform (トランスフォーム)
要素に2D変形、または、3D変形を適用する。
【記述例】{ transform: rotate(25deg); }

transition (トランジション)
トランジション効果をまとめて指定する。
【記述例】{ transition: margin-right 2s; }

transition-duration (トランジション – デュレーション)
トランジション効果が完了するまでの時間を指定する。
【記述例】{ transition-duration: 2s; }

transition-property (トランジション – プロパティ)
トランジション効果を適用するプロパティを指定する。
【記述例】{ transition-property: margin-right; }

transition-timing-function (トランジション – タイミング – ファンクション)
トランジション効果の変化のタイミングを指定する。
【記述例】{ transition-timing-function: linear; }

vertical-align (バーティカル – アライン)
縦方向の揃え位置を指定する。
【記述例】{ vertical-align: middle; }

visibility (ビジブリティ)
要素の表示・非表示を指定する。
【記述例】{ visibility: hedden; }

width (ウィドゥス、ワイズ、ウィッズなど)
要素の幅を指定する。
【記述例】{ width: 100%; }

word-wrap (ワード – ラップ)
表示範囲内に収まりきらないテキストの改行方法を指定する。
【記述例】{ word-wrap: normal; }

z-index (ゼット – インデックス)
要素の配置位置を指定する。
【記述例】{ z-index: 99; }

CSS – 値の読み方と用途

※指定するプロパティによって意味合いが変わる値もあります。
　今回紹介している用途は比較的よく使うものです。

absolute (アブソリュート)
positionの絶対位置への配置を指定する。
【記述例】{ position: absolute; }

auto (オート)
自動計算する。
【記述例】{ margin: 0 auto; }

blur (ブラー)
ガウス(ぼかし)を指定する。
【記述例】{ filter: blur(1px); }

both (ボス)
左寄せ、または右寄せされた全ての要素に対する回り込みを解除する。
【記述例】{ clear: both; }

collapse (コラプス)
隣接するセルのボーダーを重ねて表示する。
【記述例】{ border-collapse: collapse; }

dashed (ダッシュトゥ)
ボーダーを破線で表示する。
【記述例】{border: dashed 1px #dfdfdf;}

default (デフォルト)
標準の指定をする。
【記述例】{ cursor: default; }

dotted (ドッティトゥ)
ボーダーを点線で表示する。
【記述例】{dotted: dashed 1px #dfdfdf;}

em (エム)
要素に対してのフォントサイズを計算して表示する。
【記述例】{ font-size: 1.5em; }

fixed (フィクスド)
要素を固定する。
【記述例】{ position: fixed; }

hidden (ヒドゥン)
要素を非表示にする。
【記述例】{ overflow: hidden; }

inherit (インヘリット)
親要素のプロパティでも強制的に継承させる。
【記述例】{ padding: inherit;}

inline-block (インライン – ブロック)
要素を横並びにする。
【記述例】 { display: inline-block; }

line-through (ライン – スルー)
テキストの各行の中央に線を引く。
【記述例】{ text-decoration: line-through; }

none (ナン)
非表示にする。
【記述例】{ display: none; }

rect (レクト)
上右下左のそれぞれの距離を指定する。
【記述例】{ clip: rect(100px,50px,100px,50px); }

relative (レラティブ)
positionの相対位置への配置を指定する。
【記述例】{ position: relative; }

rem (レム)
ルート要素を基準にフォントサイズを計算して表示する。
【記述例】{ font-size: 1.5rem; }

ridge (リッジ)
ボーダーを立体的に隆起した線で表示する。
【記述例】{border: dashed 1px #dfdfdf;}

solid (ソリッド)
ボーダーを1本線で表示する。
【記述例】{border: dashed 1px #dfdfdf;}

space-between (スペース – ビトウィーン)
要素の間隔を指定する。
【記述例】{ justify-content: space-between; }

space-evenly (スペース – イベンリー)
要素の間隔を指定する。
【記述例】{ justify-content: space-evenly; }

table-cell (テーブルセル)
要素を横並びにする。
【記述例】{ display: table-cell; }

visible (ビジブル)
要素を表示する。
【記述例】{ visibility: visible; }