■CSS ３ プロパティ一覧
定義 CSS 機能 @charset エンコードの種類の指定 ○ ○ ○ ○ ○ ○ ○ @font-face CSS3 Web フォント ○ ○ ○ ○ ○ ○ ○ @import 外部スタイルシートファイルのインポート ○ ○ ○ ○ ○ ○ ○ @keyframes CSS3 アニメーションのキーフレームの指定 ○ ○ ○ ○ ○ × ○10 @media CSS3 メディアクエリ ○ ○ ○ ○ ○ ○ ○ @namespace CSS3 名前空間の指定 ○ ○ ○ ○ ○ ○ ○ @page ページメディアの設定 ○ ○ ○ ○ ○ ○ ○ @page:first CSS3 １ページ目の設定 △ △ △ △ △ △ △ @page:left CSS3 左ページの設定 ○ ○ ○ ○ ○ ○ ○ @page:right CSS3 右ページの設定 ○ ○ ○ ○ ○ ○ ○ 描画 CSS ～: calc() CSS3 計算結果を値として利用 × × ○ × × × ○ ～: canvas() 拡張 Canvas の機能で描画した画像の利用 ○ ○ × ○ ○ × × ～: counter() カウンターの挿入 ○ ○ ○ ○ ○ ○ ○ ～: element() CSS3 HTML 要素の画像化 × × ○ × × × × ～: gradient() 拡張 グラデーションの表示 ○ ○ × ○ ○ × × ～: hsl() CSS3 HSL カラーの指定 ○ ○ ○ ○ ○ ○ ○ ～: hsla() CSS3 HSLA カラーの指定 ○ ○ ○ ○ ○ ○ ○ ～: linear-gradient() CSS3 線形グラデーションの表示 ○ × △ ○ ○ △ ○10 ～: radial-gradient() CSS3 円形グラデーションの表示 ○ × △ ○ ○ × ○10 ～: radial-gradient() CSS3 円形グラデーションの表示 ○ × △ ○ ○ × ○10 ～: repeating-linear-gradient() CSS3 線形グラデーションの繰り返し ○ × △ ○ ○ △ ○10 ～: repeating-radial-gradient() CSS3 円形グラデーションの繰り返し ○ × △ ○ ○ × ○10 ～: rgb() RGB カラーの指定 ○ ○ ○ ○ ○ ○ ○ ～: rgba() CSS3 RGBA カラーの指定 ○ ○ ○ ○ ○ ○ ○ ～:image-rect() 拡張 画像の部分利用 × × ○ × × × ×アニメーション CSS animation CSS3 アニメーションの指定 ○ ○ ○ ○ ○ ○ ○10 animation-delay CSS3 アニメーションのディレイ ○ ○ ○ ○ ○ ○ ○10 animation-direction CSS3 アニメーションの方向 ○ ○ ○ ○ ○ ○ ○10 animation-duration CSS3 アニメーションの再生時間 ○ ○ ○ ○ ○ ○ ○10 animation-fill-mode CSS3 アニメーションのディレイ中と再生後の表示 ○ ○ ○ ○ ○ ○ ○10 animation-iteration-count CSS3 アニメーションの繰り返し ○ ○ ○ ○ ○ ○ ○10 animation-name CSS3 アニメーションのキーフレーム名 ○ ○ ○ ○ ○ ○ ○10 animation-play-state CSS3 アニメーションの再生と一時停止 ○ ○ ○ ○ ○ ○ ○10 animation-timing-function CSS3 アニメーションの補間方法 ○ ○ ○ ○ ○ ○ ○10 外観 CSS appearance CSS3 アピアランス ○ ○ ○ ○ ○ × × backface-visibility CSS3 裏面の表示 ○ × × ○ ○ × ○10 background CSS3 背景の指定 △ △ △ △ △ ○ ○ background-attachment CSS3 背景画像の固定対象 △ △ △ ○ ○ ○ ○ background-clip CSS3 背景画像の表示エリア ○ △ ○ ○ ○ ○ ○ background-color 背景色 ○ ○ ○ ○ ○ ○ ○ background-image CSS3 背景画像 ○ ○ ○ ○ ○ ○ ○ background-inline-policy 拡張 ボックスが途切れる場合の表示スタイル × × △ × × × × background-origin CSS3 背景画像の表示位置の基点 ○ ○ ○ ○ ○ ○ ○ background-position CSS3 背景画像の表示位置 △ △ △ △ △ ○ ○ background-repeat CSS3 背景画像の表示スタイル △ △ △ △ △ ○ ○ background-size CSS3 背景画像の表示サイズ ○ ○ ○ ○ ○ ○ ○
ボーダー CSS border 罫線の指定 ○ ○ ○ ○ ○ ○ ○ border-collapse テーブルの罫線の表示方法 ○ ○ ○ ○ ○ ○ ○ border-color 罫線の色 ○ ○ ○ ○ ○ ○ ○ border-end 拡張 書字方向に合わせた罫線の表示 × × △ × × × × border-image CSS3 画像を使った罫線の表示 △ △ △ △ △ △ × border-radius CSS3 角丸の指定 ○ ○ ○ ○ ○ ○ ○ border-spacing テーブルの罫線の間隔 ○ ○ ○ ○ ○ ○ ○ border-start 拡張 書字方向に合わせた罫線の表示 × × △ × × × × border-style 罫線のスタイル ○ ○ ○ ○ ○ ○ ○ border-end 拡張 書字方向に合わせた罫線の表示 × × △ × × × × border-top border-right border-bottom border-left 各辺の罫線の指定 ○ ○ ○ ○ ○ ○ ○ border-top-color border-right-color border-bottom-color border-left-color 各辺の罫線の色 ○ ○ ○ ○ ○ ○ ○ border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius CSS3 各角の角丸の半径 ○ ○ ○ ○ ○ ○ ○ border-top-style border-right-style border-bottom-style border-left-style 各辺の罫線のスタイル ○ ○ ○ ○ ○ ○ ○ border-top-width border-right-width border-bottom-width border-left-width 各辺の罫線の太さ ○ ○ ○ ○ ○ ○ ○ border-width 罫線の太さ ○ ○ ○ ○ ○ ○ ○ bottom ポジショニング：基点の下辺からの距離 ○ ○ ○ ○ ○ ○ ○
ボックス CSS box-align CSS3 flexbox アイテムの縦方向の揃え位置 △ △ △ △ △ × ○10 box-decoration-break CSS3 ボックスが途切れる場合の表示スタイル × × × × × △ × box-flex CSS3 flexbox アイテムをスペースに合わせた大きさで表示 △ △ △ △ △ × ○10 box-ordinal-group CSS3 flexbox アイテムの表示順 △ △ △ △ △ × ○10 box-orient CSS3 flexbox アイテムを並べる方向 △ △ △ △ △ × ○10 box-pack CSS3 flexbox アイテムの横方向の揃え位置 △ △ △ △ △ × ○10 box-reflect 拡張 鏡像の表示 ○ ○ × ○ ○ × × box-shadow CSS3 ボックスのドロップシャドウ ○ △ ○ ○ ○ ○ ○ box-sizing CSS3 ボックスの大きさの算出方法 ○ ○ ○ ○ ○ ○ ○ resize CSS3 ボックスのリサイズ × × ○ ○ ○ × × ブレイク CSS break-after CSS3 マルチカラムの改段：ボックスの後での処理 △ △ × △ △ ○ ○10 break-before CSS3 マルチカラムの改段：ボックスの前での処理 △ △ × △ △ ○ ○10 break-inside CSS3 マルチカラムの改段：ボックス内での処理 △ △ × △ △ ○ ○10 clip 画像の切り抜き ○ ○ ○ ○ ○ ○ ○ clear 回り込みの解除 ○ ○ ○ ○ ○ ○ ○ カラム CSS caption-side テーブルのキャプションの表示位置 ○ ○ ○ ○ ○ ○ ○ column-count CSS3 マルチカラムの段の数 ○ ○ ○ ○ ○ ○ ○10 column-fill CSS3 マルチカラムの段のバランス × × × × × ○ ○10 column-gap CSS3 マルチカラムの段の間隔 ○ ○ ○ ○ ○ ○ ○10 column-rule CSS3 マルチカラムの区切り線 ○ ○ ○ ○ ○ ○ ○10 column-rule-color CSS3 マルチカラムの区切り線の色 ○ ○ ○ ○ ○ ○ ○10 column-rule-style CSS3 マルチカラムの区切り線のスタイル ○ ○ ○ ○ ○ ○ ○10 column-rule-width CSS3 マルチカラムの区切り線の太さ ○ ○ ○ ○ ○ ○ ○10 column-count CSS3 マルチカラムの段の数 ○ ○ ○ ○ ○ ○ ○10 columns CSS3 マルチカラムの段の数と横幅 ○ ○ × ○ ○ ○ ○10 column-span CSS3 マルチカラムの段にまたがる表示の指定 ○ ○ × ○ ○ ○ ○10 column-width CSS3 マルチカラムの段の横幅 ○ ○ ○ ○ ○ ○ ○10
コンテンツ CSS content CSS3 コンテンツの挿入・置換 △ △ △ △ △ ○ △ counter-increment カウンターの増減値 ○ ○ ○ ○ ○ ○ ○ counter-reset カウンターの初期値 ○ ○ ○ ○ ○ ○ ○ cursor CSS3 カーソルの種類 ○ ○ ○ ○ ○ ○ ○ direction 書字方向 ○ ○ ○ ○ ○ ○ ○ display CSS3 ボックスの種類 ○ ○ △ ○ ○ ○ ○ display CSS3 フレキシブルボックスレイアウト △ △ △ △ △ × ○10 display CSS3 グリッドレイアウト × × × × × × ○10 empty-cells 空セルの表示 ○ ○ ○ ○ ○ ○ ○ フロー CSS float 配置と回り込みの指定 ○ ○ ○ ○ ○ ○ ○
float CSS3 Positioned Floats：位置指定した要素に対する回り込み
の指定 × × × × × × ○10
flow-from CSS3 リージョンの指定 × × × × × × △10
flow-into CSS3 リージョンに流し込むコンテンツの指定 × × × × × × △10
flow-wrap CSS3 positioned float 要素に対する回り込みの解除 × × × × × × ○10
フォント CSS font 文字のデザイン ○ ○ ○ ○ ○ ○ ○ font-family フォント ○ ○ ○ ○ ○ ○ ○ font-feature-settings CSS3 OpenType フォントの字形の切り替え × × ○ × × × × font-size CSS3 文字の大きさ ○ ○ ○ ○ ○ ○ ○ font-size-adjust CSS3 文字サイズの自動調節 × × ○ × × × × font-smoothing 拡張 アンチエイリアス処理 ○ × × ○ ○ × × font-style 斜体のスタイル ○ ○ ○ ○ ○ ○ ○ font-variant 字形 ○ ○ ○ ○ ○ ○ ○ font-weight 文字の太さ ○ ○ ○ ○ ○ ○ ○ color 文字の色 ○ ○ ○ ○ ○ ○ ○ 表示 CSS visibility 表示の有無 △ △ ○ △ △ ○ ○ z-index ボックスの重なり順 ○ ○ ○ ○ ○ ○ ○
グリッド CSS grid-column CSS3 グリッドセルの指定 × × × × × × ○10 grid-column-align CSS3 グリッドアイテムの揃え位置 × × × × × × ○10 grid-columns CSS3 グリッドラインの指定 × × × × × × ○10 grid-column-span CSS3 複数のグリッドセルの指定 × × × × × × ○10 grid-row CSS3 グリッドセルの指定 × × × × × × ○10 grid-row-align CSS3 グリッドアイテムの揃え位置 × × × × × × ○10 grid-rows CSS3 グリッドラインの指定 × × × × × × ○10 grid-row-span CSS3 複数のグリッドセルの指定 × × × × × × ○10 高さ・幅・サイズ CSS height 高さ ○ ○ ○ ○ ○ ○ ○ hyphens CSS3 ハイフネーションの利用 × × ○ × △ × ○10 image-rendering CSS3 画像の拡大縮小のレンダリング処理 × × ○ × × × × interpolation-mode 拡張 画像の拡大縮小のレンダリング処理 × × × × × × ○ left ポジショニング：基点の左辺からの距離 ○ ○ ○ ○ ○ ○ ○ letter-spacing 文字の間隔 ○ ○ ○ ○ ○ ○ ○ line-break CSS3 禁則処理のルール × × × × × × △ line-height 行の高さ ○ ○ ○ ○ ○ ○ ○ リスト CSS list-style CSS3 リストマークのデザイン ○ ○ ○ ○ ○ △ △ list-style-image リストマークの画像 ○ ○ ○ ○ ○ ○ ○ list-style-position リストマークの表示位置 ○ ○ ○ ○ ○ ○ ○ list-style-type CSS3 リストマークの種類 ○ ○ ○ ○ ○ △ △ margin マージンの大きさ ○ ○ ○ ○ ○ ○ ○ マーキー CSS marquee-direction CSS3 マーキーの動きの方向 ○ ○ × ○ ○ ○ × marquee-play-count CSS3 マーキーの繰り返しの回数 △ △ × △ △ △ × marquee-speed CSS3 マーキーの動きのスピード ○ ○ × ○ ○ ○ × marquee-style CSS3 マーキーの動きのスタイル ○ ○ × ○ ○ ○ ×
外側余白 CSS margin マージンの大きさ ○ ○ ○ ○ ○ ○ ○ margin-top margin-right margin-bottom margin-left 各辺のマージンの大きさ ○ ○ ○ ○ ○ ○ ○ 内側余白 CSS padding パディングの大きさ ○ ○ ○ ○ ○ ○ ○ padding-top padding-right padding-bottom padding-left 各辺のパディングの大きさ ○ ○ ○ ○ ○ ○ ○ マスク CSS mask 拡張 マスクの指定 ○ ○ × ○ ○ × × mask-attachment 拡張 マスク画像の固定対象 ○ ○ × ○ ○ × × mask-box-image 拡張 マスク画像の指定 ○ ○ × ○ ○ × × mask-clip 拡張 マスク画像の表示エリア ○ ○ × ○ ○ × × mask-image 拡張 マスク画像の指定 ○ ○ × ○ ○ × × mask-origin 拡張 マスク画像の基点の位置 ○ ○ × ○ ○ × × mask-position 拡張 マスク画像の表示位置 ○ ○ × ○ ○ × × mask-repeat 拡張 マスク画像の表示スタイル ○ ○ × ○ ○ × × mask-size 拡張 マスク画像の大きさ ○ ○ × ○ ○ × × 最大・最小 CSS max-height 高さの最大値 ○ ○ ○ ○ ○ ○ ○ max-width 横幅の最大値 ○ ○ ○ ○ ○ ○ ○ min-height 高さの最小値 ○ ○ ○ ○ ○ ○ ○ min-width 横幅の最小値 ○ ○ ○ ○ ○ ○ ○ nbsp-mode 拡張 ノーブレークスペースの処理 ○ ○ × ○ ○ × ×
オブジェクト CSS object-fit CSS3 ボックスに合わせた画像サイズの調節 × × × × × ○ × object-position CSS3 ボックス内での画像の表示位置 × × × × × ○ × opacity 透明度 ○ ○ ○ ○ ○ ○ ○ プログレスバー CSS orient 拡張 プログレスバーの向き × × ○ × × × × ページ末尾 CSS orphans ページの末尾に最小限必要な行数 × × × × × ○ ○ アウトライン CSS outline アウトラインの表示 ○ ○ ○ ○ ○ ○ ○ outline-color アウトラインの色 outline-offset CSS3 アウトラインのオフセット ○ ○ ○ ○ ○ ○ × outline-style アウトラインのスタイル outline-width アウトラインの太さ オーバーフロー CSS overflow オーバーフローしたコンテンツの表示 ○ ○ ○ ○ ○ ○ ○ overflow-scrolling 拡張 スクロールバーの表示 ○ × × × × × × overflow-x CSS3 横方向にオーバーフローしたコンテンツの表示 ○ ○ ○ ○ ○ ○ ○ overflow-y CSS3 縦方向にオーバーフローしたコンテンツの表示 ○ ○ ○ ○ ○ ○ ○ overflow オーバーフローしたコンテンツの表示 ○ ○ ○ ○ ○ ○ ○ 改ページ CSS page-break-after 改ページの指定：ボックスの後での処理 △ △ △ △ △ △ △ page-break-before 改ページの指定：ボックスの前での処理 △ △ △ △ △ △ △ page-break-inside 改ページの指定：ボックス内での処理 △ △ △ △ △ △ △ perspective CSS3 子要素の透視投影 ○ ○ × ○ ○ × × 引用符 CSS quotes 引用符の指定 ○ × ○ ○ ○ ○ ○
ポジション CSS perspective-origin CSS3 投影中心のx 軸・y 軸方向の位置 ○ ○ × ○ ○ × × position ポジショニングによる位置指定 ○ △ ○ ○ ○ ○ ○ position CSS3 ポジショニング：「page」による位置指定 × × × × × × ○10 top ポジショニング：基点の上辺からの距離 ○ ○ ○ ○ ○ ○ ○ right ポジショニング：基点の右辺からの距離 ○ ○ ○ ○ ○ ○ ○ vertical-align インライン要素の位置揃え ○ ○ ○ ○ ○ ○ ○ ルビ CSS ruby-align CSS3 ルビの位置揃え × × × × × × △ ruby-position CSS3 ルビの表示位置 × × × × × × △ テーブル CSS table-layout テーブルの表示方法 ○ ○ ○ ○ ○ ○ ○ タブ CSS tab-size CSS3 タブ幅 × × × × × ○ × ハイライト CSS tap-highlight-color 拡張 ハイライト表示の指定 ○ △ × × × × × ポップアップ CSS touch-callout 拡張 ポップアップメニューを隠す ○ × × × × × × トランスフォーム CSS transform CSS3 2D トランスフォーム ○ ○ ○ ○ ○ ○ ○ transform CSS3 3D トランスフォーム ○ △ × ○ ○ × △10 transform-origin CSS3 2D トランスフォームの原点 ○ ○ ○ ○ ○ ○ ○ transform-origin CSS3 3D トランスフォームの原点 ○ △ × ○ ○ × △10 transition CSS3 トランジションの指定 ○ ○ ○ ○ ○ ○ ○10 transition-delay CSS3 トランジションのディレイ ○ ○ ○ ○ ○ ○ ○10 transition-duration CSS3 トランジションの再生時間 ○ ○ ○ ○ ○ ○ ○10 transition-property CSS3 トランジションさせるプロパティ ○ ○ ○ ○ ○ ○ ○10 transition-timing-function CSS3 トランジションの補間方法 ○ ○ ○ ○ ○ ○ ○10
テキスト CSS text-align CSS3 行揃え △ △ △ △ △ △ △ text-align-last 行揃え × × × × × × △ text-autospace CSS3 数字やアルファベットの前後の余白の処理 × × × × × × △ text-decoration 下線・上線・取り消し線の表示 ○ ○ △ ○ ○ ○ ○ text-decoration-line CSS3 下線・上線・取り消し線の種類 × × ○ × × × × text-decoration-color CSS3 下線・上線・取り消し線の色 × × ○ × × × × text-decoration-style CSS3 下線・上線・取り消し線のスタイル × × ○ × × × × text-emphasis CSS3 圏点の指定 ○ × × ○ ○ × × text-emphasis-color CSS3 圏点の色 ○ × × ○ ○ × × text-emphasis-position CSS3 圏点の表示位置 ○ × × ○ ○ × × text-emphasis-style CSS3 圏点のスタイル ○ × × ○ ○ × × text-fill-color 拡張 文字の色 ○ ○ × ○ ○ × × text-indent １行目のインデント ○ ○ ○ ○ ○ ○ ○ text-justify CSS3 両端揃えの調節方法 × × × × × × △ text-overflow CSS3 オーバーフローしたテキストの省略表示 △ △ △ △ △ △ △ text-rendering 拡張 欧文のレンダリング処理 ○ ○ ○ ○ ○ × × text-shadow CSS3 文字のドロップシャドウ ○ ○ ○ ○ ○ ○ ○10
text-size-adjust 拡張 iOS Mobile Safari の文字サイズの自動調節 ○ × × × × × ×
text-stroke 拡張 文字のアウトライン ○ ○ × ○ ○ × × text-stroke-color 拡張 文字のアウトラインの色 ○ ○ × ○ ○ × × text-stroke-width 拡張 文字のアウトラインの太さ ○ ○ × ○ ○ × × text-transform 字形の変換 ○ ○ ○ ○ ○ ○ ○ text-underline-position CSS3 下線の表示位置 × × × × × × △ white-space 改行コード・タブ・スペースの表示 ○ ○ ○ ○ ○ ○ ○ widows ページの先頭に最小限必要な行数 × × × × × ○ ○ width 横幅 ○ ○ ○ ○ ○ ○ ○ word-break CSS3 自動改行のルール △ △ × △ △ × △ word-spacing 単語の間隔 ○ ○ ○ ○ ○ ○ ○ word-wrap 長い単語の改行ルール ○ ○ ○ ○ ○ ○ ○ writing-mode CSS3 縦書き・横書きの指定 ○ △ × △ △ × △ Unicode の文字表記 CSS unicode-bidi 双方向アルゴリズムの変更 ○ ○ ○ ○ ○ ○ ○
用語に関する説明 項目 用語 説明 適用対象 全ての要素 全ての要素 ブロックレベル要素 ひとつのまとまりを構成する要素 インライン要素 文章中の一部として扱われる要素 置換要素 別のものに置き換えられる要素（img、input、textarea、select、object などの要素） 非置換インライン要素 「置換要素」以外のインライン要素 表関連要素 表に関連する全ての要素 絶対位置決めされた要素 position プロパティで「absolute」または「fixed」が指定された要素 位置決めされた要素 position プロパティで「relative」、「absolute」、または「fixed」が指定された要素 生成内容 CSS の指定によって追加された内容 継承 する そのスタイルが子要素にも適用されます しない そのスタイルは子要素には適用されません
