59 CSS3のプロパティまとめ

CSS3のプロパティまとめ

CSS3のプロパティまとめ

CSS3は以前のCSS2.1に新たな機能やプロパティが追加されたものです。従来の表現に比べて、アニメーションや音声、オブジェクトの変形なども行えるようになりましたが、ブラウザによっては対応されていないものもあります。ここでは、「CSS3」のプロパティの中でも使う事が多く、ブラウザでの実装が進んでいるプロパティをまとめています。「CSS3」の列に○がついているプロパティはCSS3で新しく追加されたプロパティです。

【フォントと色】

プロパティ名	説明	CSS3
font-size	フォントのサイズを指定する
font-family	フォントの種類を指定する
font-weight	フォントの太さを指定する
font-style	フォントの斜体・イタリック体を指定する
font-variant	フォントをスモールキャップにする
font	フォント関連のプロパティをまとめて指定する
color	文字の色を指定する
opacity	色の透明度を指定する	○

【テキストと行】

プロパティ名	説明	CSS3
text-align	文字の水平位置を指定する
letter-spacing	文字の間隔を指定する
text-decoration	文字の下線などを表示する
text-indent	1行目のインデント幅を指定する
text-transform	文字の大文字、小文字を指定する
white-space	タブなどの表示を指定する
word-spacing	単語の間隔を指定する
text-shadow	文字に影をつける	○
line-height	行と行の間隔を指定する
vertical-align	縦方向の揃え位置を指定する

【背景と枠線】

プロパティ名	説明	CSS3
background-color	背景色を指定する
background-image	背景画像を指定する
background-repeat	背景画像の繰り返し方を指定する
background-position	背景画像の表示位置を指定する
background-clip	背景画像の描画領域を指定する
background-size	背景画像のサイズを指定する	○
background-origin	背景画像の基準位置を指定する	○
background-attachment	背景画像のスクロールを指定する
background	背景のプロパティをまとめて指定する
border-width	枠線の太さを指定する
border-style	枠線のスタイルを指定する
border-color	枠線の色を指定する
border	枠線の太さ、スタイル、色を指定する
border-radius	枠線の角丸をまとめて指定する	○
border-image	枠線に使う画像を指定する	○
box-shadow	ボックスに影をつける	○

【テーブル】

プロパティ名	説明	CSS3
border-collapse	セルの枠線の表示方法を指定する
border-spacing	セルの枠線の間隔を指定する
caption-side	表のキャプションの位置を指定する
empty-cells	空白セルの枠線を表示/非表示にする
table-layout	表の表示方法を指定する

【リスト】

プロパティ名	説明	CSS3
list-style	リストマーカー関連をまとめて指定する
list-style-image	リストマーカーに使用する画像
list-style-position	リストマーカーの位置
list-style-type	リストマーカーの種類

【コンテンツの挿入と置換】

プロパティ名	説明	CSS3
content	生成された内容を挿入する
counter-increment	要素に連番を振る
counter-reset	要素の連番をリセットする
quotes	引用府を設定する

【ユーザインタフェース】

プロパティ名	説明	CSS3
outline-style	アウトラインのスタイルを指定する
outline-width	アウトラインの太さを指定する
outline-color	アウトラインの色を指定する
outline	アウトラインのスタイル、太さ、色を指定する
cursor	カーソルの形状を指定する
box-sizing	ボックスサイズの計算方法を指定する	○

【ボックスモデル】

プロパティ名	説明	CSS3
float	ボックスを左右に配置
display	ボックスの種類を指定
clear	回り込みを解除
margin	マージンの大きさ
padding	パディングの大きさ
width	ボックスの幅
max-width	ボックスの幅(最大値)
min-width	ボックスの幅(最小値)
height	ボックスの高さ
max-height	ボックスの高さ(最大値)
min-height	ボックスの高さ(最小値)
overflow-x	表示領域から溢れた内容の扱い(水平方向)	○
overflow-y	表示領域から溢れた内容の扱い(垂直方向)	○
overflow	overflow-xとyをまとめて指定する
visibility	要素を非表示にする

【マルチカラム】

プロパティ名	説明	CSS3
column-width	カラム幅を指定する	○
column-width	カラム数を指定する	○
columns	カラム幅とカラム数を指定する	○
column-rule-width	カラムの区切り線の幅を指定する	○
column-rule-style	カラムの区切り線のスタイルを指定する	○
column-rule-color	カラムの区切り線の色を指定する	○
column-rule	区切り線の幅、スタイル、色を指定する	○
column-gap	カラムの間隔を指定する	○
column-span	マルチカラムのカラム数を指定する	○

【ボジション】

プロパティ名	説明	CSS3
position	ボックスの配置方法を指定する
top	上からの距離
right	右からの距離
bottom	下からの距離
left	左からの距離
z-index	ボックスの重なる順番
clip	画像を切り抜く範囲を指定する