CSSリファレンス
CSSのリファレンスとTIPS集です。
white-space
要素内の「空白文字」をどのように扱うかを定義できます。空白文字とは「半角スペース」「タブ」「改行」などの総称です。
text-transform
英語文字の表記を大文字や小文字のルールを設定します。
text-shadow
テキストの影(ドロップシャドウ)を設定する。
resize
要素のリサイズ機能が有効かどうかを設定します。
@keyframes
アニメーションの開始から終了までの動作を指定します。
@media
メディアクエリは、横幅・高さ・色などのメディア特性を用いてスタイルを適用する条件を指定します。
counter-increment
カウンターの値を増やします。
counter-reset
カウンターの値を指定した値に初期化します。
backface-visibility
trasformプロパティの指定による3D空間で変形において、要素の背面の表示方法を設定します。
vertical-align
テキストや画像などのインライン要素、またはテーブルセル要素の縦方向の表示位置を指定します。
user-select
ユーザによる要素の選択操作を制御します。
cursor
マウスカーソルの形状を設定します。
line-height
行の高さを設定し、行間を調整します。
letter-spacing
文字同士の間隔を調整する
filter
「ぼかし」や「色合い」などのグラフィック上の効果を加えます。
list-style-image
リストの先頭に表示するマーカーに画像を指定します。
list-style-type
リストのマーカーの種類を指定します。
list-style-position
リストマーカーの表示位置について設定します。
list-style
リストの先頭をスタイリングするリスト関連のCSSプロパティのショートハンドです。
transition
トランジッション関連のCSSプロパティを設定するショートハンドです。
transition-timing-function
トランジションのタイミング関数(遷移曲線)を設定します。
transition-property
トランジションをどのCSSプロパティに適応するかを設定します。
transition-delay
トランジッション効果を開始するまでの遅延時間を設定します。
transition-duration
トランジッション効果の長さを設定します。
transform
要素の変形させて描画する設定を行います。
transform-style
内包する要素を3Dで描画するかどうかを設定します。
transform-origin
変形におけるx, y, z座標の基準点を設定します。
@font-face
使用するフォントを指定します。
font
フォント関連のプロパティを設定するショートハンド。
font-size-adjust
フォントのサイズを調整します。
font-stretch
フォントファミリーの幅を指定します。指定しているフォントが、対応するパターンのフォントフェイスを用意していることが前提です。
font-family
フォントファミリーを指定します。
font-size
フォントのサイズを指定します。
font-variant
フォントのスモールキャップで表示します。設定しているフォントが対応している必要があります。
font-style
フォントのスタイルを設定します。
font-weight
フォントの太さ(ウエイト)を指定します。
columns
列幅と列数を設定するショートハンドプロパティ
column-rule-style
カラム数の区切り線のスタイルを設定します。
column-rule-width
カラム間の区切り線の幅を設定します。
column-rule-color
カラム間の区切り線の色を指定します。
column-rule
カラム間の区切り線の幅、種類、色を指定するショートハンドです。
column-span
複数カラムレイアウトに依存しない配置を行います。
column-fill
複数カラムのレイアウトにおいて、カラム同士の高さを揃えるかどうかを指定します。
column-gap
複数カラムのレイアウトにおいて、カラム同士の間隔を設定します。
column-width
複数カラムレイアウトにおいて、カラム幅を指定します。
column-count
複数カラムレイアウトにおいて、カラム数を指定します。
color
文字とその装飾の色を設定します。
clip
要素を切り抜き表示(クリッピング)をします。
float
要素を左右のどちらかに寄せて配置します。
clear
Floatにより、右寄せ、左寄せを指定された要素の回り込みを解除します。
border
要素の4辺の境界線(ボーダー)の太さ、スタイルと色をまとめて指定するショートハンド。
border-style
要素の4辺の境界線(ボーダー)のスタイルをまとめて設定するショートハンド。
border-color
要素の4辺の境界線(ボーダー)の色を設定するショートハンド
border-width
要素の4辺の境界線(ボーダー)の太さを設定するショートハンド。
border-top
border-top-style
border-top-color
border-right
border-top-width
border-right-style
border-right-color
border-right-width
border-bottom
border-bottom-style
border-bottom-color
border-bottom-width
border-left
border-left-style
border-left-color
border-left-width
border-image
罫線(ボーダー)に画像を設定するショートハンド。
border-image-source
罫線(ボーダー)領域に使用する画像ファイルを設定する
border-image-width
画像罫線(ボーダー)の太さを設定します。
border-image-slice
画像罫線(ボーダー)の9スライス(4隅4辺と中央の9つの領域)を設定します。
border-image-outset
画像罫線(ボーダー)の外側への太さを設定します。
border-image-repeat
画像罫線(ボーダー)の繰り返し方法を設定します。
border-radius
border-bottom-left-radius
border-bottom-right-radius
border-top-right-radius
border-top-left-radius
opacity
要素の不透明度を設定する。
margin
要素の4辺全てにマージン(余白)を指定するショートハンド。
margin-top
要素の上辺にマージン(余白)を指定します。
margin-right
要素の右辺にマージン(余白)を指定します。
margin-bottom
要素の下辺にマージン(余白)を指定します。
margin-left
要素の左辺にマージン(余白)を指定します。
width
ブロックレベル要素の横幅を指定する
height
ブロックレベル要素の領域の高さを指定します。
min-width
要素の幅の最小値を指定します。
min-height
要素の高さの最小値を設定します。
max-width
要素の幅の最大値を設定する。
max-height
要素の高さの最大値を指定します。
visibility
要素の表示、非表示を設定する。
box-sizing
要素の高さ/幅の算出方法を設定します。
box-shadow
ブロックレベルの要素に影(シャドウ)を設定する。
display
要素の表示形式を指定します。
right
要素の基準位置の右からの距離を指定します。
left
要素の基準位置の左からの距離を指定します。
top
基準位置の上からの距離を指定します。
bottom
基準位置の下からの距離を指定します。
position
要素の配置方法を指定します
z-index
要素の重なり順を指定します。
outline
アウトライン(輪郭線)のスタイルを設定するショートハンド。
outline-offset
アウトライン(輪郭線)の表示位置を設定する
outline-width
要素のアウトラインの幅(太さ)を設定する。
outline-style
アウトライン(輪郭線)のスタイルを指定する。
outline-color
アウトライン(輪郭線)の色を設定する。
background
要素の背景画像に関するスタイル一度にまとめて設定するためのショートハンドです。
background-image
要素の背景領域に、画像やグラデーションを設定します。
background-attachment
背景画像がviewport によって固定されるか、スクロールするるかを設定できます。
background-clip
要素の背景が、要素のボーダーとパッディングの領域まで拡大されるかどうかを定義します。
background-color
要素の背景色を設定します。背景色を指定するには、RGB値や、CSSで認められている色名を指定するなど、種々の方法があります。
background-origin
背景の描画における座標空間の原点を設定できます。
background-repeat
背景画像の描画における繰り返しを設定します。背景画像をX軸(横方向)とY軸(縦方向)に対してそれぞれ繰り返すように描画されるかどうかを設定できます。
background-size
要素の背景のサイズを指定できます。
padding
要素の4辺全てにパディング(内部余白)を指定するショートハンド。
padding-top
要素上部にパディング(内部余白)を指定します。
padding-right
要素右部にパディング(内部余白)を指定します。
padding-bottom
要素下部にパディング(内部余白)を指定します。
padding-left
要素左部にパディング(内部余白)を指定します。
overflow
テキストのボックス領域からのはみ出し処理を設定するショートハンド。
overflow-y
縦方向の、ボックス領域からのはみ出し処理を設定する
overflow-x
縦方向のボックスからのはみ出し処理を設定する。
text-overflow
テキストが表示領域をはみ出したときの、折り返しに関する設定。
text-decoration
下線、上線、取り消し線などのテキスト装飾を定義する。
text-decoration-style
テキスト装飾線の形状を設定します。
text-decoration-line
テキスト装飾線のタイプを設定します。
text-decoration-color
テキスト装飾線の色を設定します。
text-align-last
最終行の配置方法を設定する。
text-indent
テキスト開始行のインデントを設定する
text-align
テキストの水平方向の文字寄せを設定する。