HTML5 & CSS3 PRACTICAL DESIGN GUIDE
HTML
要素名 機能 備考 参照 a リンク ○ ○ ○ ○ ○ ○ ○ 075 a (download) ダウンロードリンクの作成 ○ ○ ○ × ○ ○ × HTML5 077 abbr 略語 ○ ○ ○ ○ ○ ○ ○ 084 address コンテンツに関する問い合わせ先 ○ ○ ○ ○ ○ ○ ○ 063 area イメージマップのエリアの構成 ○ ○ ○ ○ ○ ○ ○ 303 article 完結したコンテンツ ○ ○ ○ ○ ○ ○ ○ HTML5 058 aside 補足・関連情報 ○ ○ ○ ○ ○ ○ ○ HTML5 059 audio オーディオ ○ ○ ○ ○ ○ ○ ○ HTML5 308 b 注目してほしい語句 ○ ○ ○ ○ ○ ○ ○ 090 base ベース URL ○ ○ ○ ○ ○ ○ ○ 042 bdi 双方向アルゴリズムの隔離 ○ ○ ○ ○ ○ × × HTML5 091 bdo 双方向アルゴリズムのオーバーライド ○ ○ ○ ○ ○ ○ ○ 091 blockquote 引用 ○ ○ ○ ○ ○ ○ ○ 067 body コンテンツの記述 ○ ○ ○ ○ ○ ○ ○ 027 br 改行タグ ○ ○ ○ ○ ○ ○ ○ 093 button ボタン ○ ○ ○ ○ ○ ○ ○ 333 canvas Canvas ○ ○ ○ ○ ○ ○ ○ HTML5 310 caption テーブルのキャプション ○ ○ ○ ○ ○ ○ ○ 244 cite 作品のタイトル・著者名・URL ○ ○ ○ ○ ○ ○ ○ 083 code コンピュータ・コード ○ ○ ○ ○ ○ ○ ○ 088 col テーブルの列のグループ ○ ○ ○ ○ ○ ○ ○ 248 colgroup テーブルの列のグループ ○ ○ ○ ○ ○ ○ ○ 248 data マシンリーダブルな情報 ○ × ○ ○ ○ ○ × HTML5 Chrome は 62 以降が対応 087 datalist 入力候補の作成 ○ ○ × × ○ ○ ○ HTML5 337 dd 説明リストの語句の説明 ○ ○ ○ ○ ○ ○ ○ 070 del 削除したコンテンツ ○ ○ ○ ○ ○ ○ ○ 094 details 追加情報 ○ ○ ○ ○ ○ × × HTML5.1 096 dfn 定義する語句 ○ ○ ○ ○ ○ ○ ○ 084 div 汎用タグ ○ ○ ○ ○ ○ ○ ○ 073 dl 説明リスト ○ ○ ○ ○ ○ ○ ○ 070 dt 説明リストの語句 ○ ○ ○ ○ ○ ○ ○ 070 em 強調・強勢 ○ ○ ○ ○ ○ ○ ○ 081 embed プラグインを使ったコンテンツの埋め込み ○ ○ ○ ○ ○ ○ ○ HTML5 307 fieldset フォームコントロールのグループ化 ○ ○ ○ ○ ○ ○ ○ 340 figcaption フィギュアのキャプション ○ ○ ○ ○ ○ ○ ○ HTML5 071 figure フィギュア ○ ○ ○ ○ ○ ○ ○ HTML5 071 footer フッター ○ ○ ○ ○ ○ ○ ○ HTML5 062 form フォーム ○ ○ ○ ○ ○ ○ ○ 326要素＆ブラウザ対応一覧
… Chrome 59 … Android Chrome 59 … Safari 10.1 … iOS Safari 10.3 … Firefox 54 … Edge 15 … IE11 〇 … 対応 △ … 部分対応 × … 未対応 HTML5 … HTML5で採用されたタグ HTML5.1 … HTML5.1で採用されたタグHTML
要素名 機能 備考 参照 h1 / h2 / h3 / h4 / h5 / h6 キーとなるワード（見出し・タイトル・表題など）○ ○ ○ ○ ○ ○ ○ 062 head メタデータの記述 ○ ○ ○ ○ ○ ○ ○ 026 header ヘッダー ○ ○ ○ ○ ○ ○ ○ HTML5 062 hr パラグラフレベルの区切り ○ ○ ○ ○ ○ ○ ○ 065 html ルート要素 ○ ○ ○ ○ ○ ○ ○ 025 i 学名や慣用句などの語句 ○ ○ ○ ○ ○ ○ ○ 090 iframe インラインフレーム ○ ○ ○ ○ ○ ○ ○ 076 iframe (srcdoc) インラインフレームに表示するコンテンツの記述 ○ ○ ○ ○ ○ × × HTML5 076 img 画像 ○ ○ ○ ○ ○ ○ ○ 300img (srcset / sizes) 画像の選択肢と選択に使用する情報 ○ ○ ○ ○ ○ ○ × HTML5.1 301
input (button) 汎用ボタン ○ ○ ○ ○ ○ ○ ○ 333
input (checkbox) チェックボックス ○ ○ ○ ○ ○ ○ ○ 331
input (color) 色のフォームコントロール ○ ○ ○ × ○ ○ × HTML5 Safari は 11 以降が対応 331 input (date) 年月日のフォームコントロール ○ ○ × ○ × ○ × HTML5 330 input (datetime-local) 日時のフォームコントロール ○ ○ × ○ × ○ × HTML5 330 input (email) メールアドレス専用のテキストフィールド ○ ○ ○ ○ ○ ○ ○ HTML5 329 input (file) ファイルアップロード ○ ○ ○ ○ ○ ○ ○ 332 input (hidden) 隠しフィールド ○ ○ ○ ○ ○ ○ ○ 332 input (image) 画像ボタン ○ ○ ○ ○ ○ ○ ○ 333 input (month) 年月のフォームコントロール ○ ○ × ○ × ○ × HTML5 330 input (number) 数値のフォームコントロール ○ ○ ○ ○ ○ ○ × HTML5 330 input (password) パスワード専用のテキストフィールド ○ ○ ○ ○ ○ ○ ○ 329 input (radio) ラジオボタン ○ ○ ○ ○ ○ ○ ○ 331 input (range) 大まかな数値（レンジ）のフォームコントロール ○ ○ ○ ○ ○ ○ ○ HTML5 331 input (reset) リセットボタン ○ ○ ○ ○ ○ ○ ○ 333 input (search) 検索用のテキストフィールド ○ ○ ○ ○ ○ ○ ○ HTML5 329 input (submit) 送信ボタン ○ ○ ○ ○ ○ ○ ○ 333 input (tel) 電話番号専用のテキストフィールド ○ ○ ○ ○ ○ ○ ○ HTML5 329 input (text) テキストフィールド ○ ○ ○ ○ ○ ○ ○ 329 input (time) 時間のフォームコントロール ○ ○ × ○ × ○ × HTML5 330 input (url) URL 専用のテキストフィールド ○ ○ ○ ○ ○ ○ ○ HTML5 329 input (week) 週のフォームコントロール ○ ○ × × × ○ × HTML5 330 ins 追加したコンテンツ ○ ○ ○ ○ ○ ○ ○ 094 kbd コンピュータへの入力内容 ○ ○ ○ ○ ○ ○ ○ 088 keygen 暗号鍵 - - - WHATWG と HTML5.2（草案）で削除HTML5 HTML5.1で削除予定とされ、327 label フォームコントロールのラベル ○ ○ ○ ○ ○ ○ ○ 328 legend フォームコントロールのグループのキャプション ○ ○ ○ ○ ○ ○ ○ 340 li リストの項目 ○ ○ ○ ○ ○ ○ ○ 069 link 関連した URL についての情報 ○ ○ ○ ○ ○ ○ ○ 036 main メインコンテンツ ○ ○ ○ ○ ○ ○ ○ HTML5 072 map イメージマップ ○ ○ ○ ○ ○ ○ ○ 303 mark ハイライト ○ ○ ○ ○ ○ ○ ○ HTML5 091 math MathML × × ○ ○ ○ × × HTML5 311 menu コマンドリスト × × × × ○ × × HTML5.1 097 menuitem コマンドの設定 × × × × ○ × × HTML5.1 097 meta メタデータ ○ ○ ○ ○ ○ ○ ○ 029 meter メーター ○ ○ ○ ○ ○ ○ × HTML5 335 nav ナビゲーション ○ ○ ○ ○ ○ ○ ○ HTML5 059 noscript スクリプトが動作しない環境用の情報 ○ ○ ○ ○ ○ ○ ○ 045
HTML
要素名 機能 備考 参照 object オブジェクト ○ ○ ○ ○ ○ ○ ○ 307 ol 順番が重要なリスト ○ ○ ○ ○ ○ ○ ○ 069 optgroup 選択肢のグループ ○ ○ ○ ○ ○ ○ ○ 334 option プルダウン型の選択肢 ○ ○ ○ ○ ○ ○ ○ 334 output 計算結果 ○ ○ ○ ○ ○ △ × HTML5 335 p パラグラフ ○ ○ ○ ○ ○ ○ ○ 065 param オブジェクトのパラメータ ○ ○ ○ ○ ○ ○ ○ 307 picture 画像 ○ ○ ○ ○ ○ ○ × HTML5.1 304 pre 整形済みテキスト ○ ○ ○ ○ ○ ○ ○ 066 progress 進捗状況 ○ ○ ○ ○ ○ ○ ○ HTML5 335 q 引用 ○ ○ ○ ○ ○ ○ ○ 083 rb ルビを付けるベースとなる語句 ○ ○ ○ ○ ○ ○ ○ HTML5 085 rp ルビに未対応なブラウザ用の設定 ○ ○ ○ ○ ○ ○ ○ HTML5 086 rt ルビの記述 ○ ○ ○ ○ ○ ○ ○ HTML5 085 rtc ルビ用のコンテナ × × × × ○ × × HTML5 085 ruby ルビ ○ ○ ○ ○ ○ ○ ○ HTML5 085 s 変更・更新情報 ○ ○ ○ ○ ○ ○ ○ 082 samp コンピュータからの出力内容 ○ ○ ○ ○ ○ ○ ○ 088 script スクリプト ○ ○ ○ ○ ○ ○ ○ 043script (nonce) コンテンツセキュリティポリシー関連の設定 ○ ○ ○ ○ ○ ○ × HTML5.1 Edge は 15 以降が対応 054
section 汎用的なセクション ○ ○ ○ ○ ○ ○ ○ HTML5 060
select プルダウン型の選択肢 ○ ○ ○ ○ ○ ○ ○ 334
small 但し書き・注意 ○ ○ ○ ○ ○ ○ ○ 082
source <picture> の選択肢 ○ ○ ○ ○ ○ ○ × HTML5.1 304 source <video> / <audio> の選択肢 ○ ○ ○ ○ ○ ○ ○ HTML5 308
span 汎用タグ ○ ○ ○ ○ ○ ○ ○ 093
strong 重要 ○ ○ ○ ○ ○ ○ ○ 081
style 内部スタイルシート（エンベッド・スタイルシート） ○ ○ ○ ○ ○ ○ ○ 042 style (nonce) コンテンツセキュリティポリシー関連の設定 ○ ○ ○ ○ ○ ○ × HTML5.1 Edge は 15 以降が対応 054
sub 下付き ○ ○ ○ ○ ○ ○ ○ 089 summary 追加情報の概要 ○ ○ ○ ○ ○ × × HTML5.1 096 sup 上付き ○ ○ ○ ○ ○ ○ ○ 089 svg SVG ○ ○ ○ ○ ○ ○ ○ HTML5 311 table テーブル ○ ○ ○ ○ ○ ○ ○ 244 tbody テーブルの行のグループ（メインデータ） ○ ○ ○ ○ ○ ○ ○ 249 td テーブルのデータセル ○ ○ ○ ○ ○ ○ ○ 244 template テンプレート ○ ○ ○ ○ ○ ○ × HTML5 098 textarea 複数行のテキストフィールド ○ ○ ○ ○ ○ ○ ○ 334 tfoot テーブルの行のグループ（フッター） ○ ○ ○ ○ ○ ○ ○ 249 th テーブルの見出しセル ○ ○ ○ ○ ○ ○ ○ 244 thead テーブルの行のグループ（ヘッダー） ○ ○ ○ ○ ○ ○ ○ 249 time 日時 ○ ○ ○ ○ ○ ○ ○ HTML5 087 title ページのタイトル ○ ○ ○ ○ ○ ○ ○ 028 tr テーブルの行 ○ ○ ○ ○ ○ ○ ○ 244 track テキストトラック ○ ○ ○ ○ ○ ○ ○ HTML5 309 u 不明瞭な語句 ○ ○ ○ ○ ○ ○ ○ 090 ul 順不同なリスト ○ ○ ○ ○ ○ ○ ○ 069 var 変数 ○ ○ ○ ○ ○ ○ ○ 088 video ビデオ ○ ○ ○ ○ ○ ○ ○ HTML5 308 wbr 改行を認める箇所 ○ ○ ○ ○ ○ ○ × HTML5 093
CSS
HTML5 & CSS3 PRACTICAL DESIGN GUIDE
プロパティ＆ブラウザ対応一覧
プロパティ名 機能 備考 参照 @charset 外部スタイルシートファイルのエンコードの種類 ○ ○ ○ ○ ○ ○ ○ 039 @counter-style 独自のリストマークの定義 × × × × ○ × × CSS3 173 @document ページの URL の判別 × × × × ○ × × CSS4 140 @font-face フォントリソースの指定 ○ ○ ○ ○ ○ ○ ○ CSS3 267 @import 外部スタイルシートの読み込み ○ ○ ○ ○ ○ ○ ○ 039 @keyframes アニメーションのキーフレーム ○ ○ ○ ○ ○ ○ ○ 353 @media メディアクエリ（特性の判別） ○ ○ ○ ○ ○ ○ ○ CSS3 130 @media メディアクエリ（メディアタイプの判別） ○ ○ ○ ○ ○ ○ ○ 133 @media メディアクエリのネスト ○ ○ ○ ○ ○ ○ × CSS3 132 @namespace 名前空間の指定 ○ ○ ○ ○ ○ ○ ○ CSS3 140 @page 印刷用紙の設定 ○ × × × ○ ○ ○ 133 @support 対応状況の判別 ○ ○ ○ ○ ○ ○ × CSS3 140 @viewport ビューポートの設定 × × × × × ● ● CSS3 032 ～ : calc() 数式 ○ ○ ○ ○ ○ ○ ○ CSS3 361 ～ : counter() カウンター ○ ○ ○ ○ ○ ○ ○ 190 ～ : image-set() 画像の選択肢 ● ● ● ● × × × CSS4 324 ～ : linear-gradient() 線形グラデーション ○ ○ ○ ○ ○ ○ ○ CSS3 323 ～ : radial-gradient() 円形グラデーション ○ ○ ○ ○ ○ ○ ○ CSS3 323 ～ : repeating-linear-gradient() 線形グラデーションの繰り返し ○ ○ ○ ○ ○ ○ ○ CSS3 323 ～ : repeating-radial-gradient() 円形グラデーションの繰り返し ○ ○ ○ ○ ○ ○ ○ CSS3 323 ～ : var() 変数 ○ ○ ○ ○ ○ ○ × CSS3 Edge は 15 以降が対応 361 align-content フレックスアイテムのマルチラインの位置揃え ○ ○ ○ ○ ○ ○ ○ CSS3 215 align-content グリッドの縦方向の位置揃え ○ ○ ○ ○ ○ × × CSS3 237 align-items フレックスアイテムの縦方向の位置揃え ○ ○ ○ ○ ○ ○ ○ CSS3 213 align-items グリッドアイテムの縦方向の位置揃え ○ ○ △ △ ○ × × CSS3 239 align-self フレックスアイテムごとに縦方向の位置揃えを指定 ○ ○ ○ ○ ○ ○ ○ CSS3 214 align-self グリッドアイテムごとに縦方向の位置揃えを指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE ついては P.242を参照 239 all すべてのプロパティの設定をリセット ○ ○ ○ ○ ○ × × CSS3 361 animation キーフレームによるアニメーション ○ ○ ○ ○ ○ ○ △ CSS3 IEの問題についてはP.355を参照 353 animation-delay アニメーションのディレイ ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-direction アニメーションの再生方向 ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-dulation アニメーションの再生時間 ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-fill-mode アニメーションの再生時間外の表示 ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-interation-count アニメーションの再生回数 ○ ○ ○ ○ ○ ○ ○ CSS3 355 … Chrome 59 … Android Chrome 59 … Safari 10.1 … iOS Safari 10.3 … Firefox 54 … Edge 15 … IE11 〇 … 対応 ● … ベンダープレフィックス付きで対応 △ … 部分対応、古い規格で対応など × … 未対応 CSS3 … CSS3で採用されたプロパティ CSS4 … CSS4で採用されたプロパティ 拡張 … W3Cの仕様書に未採用なプロパティCSS
プロパティ名 機能 備考 参照 animation-name アニメーションのキーフレーム名 ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-play-state アニメーションの再生状態 ○ ○ ○ ○ ○ ○ ○ CSS3 355 animation-timing-function アニメーションの補間方法 ○ ○ ○ ○ ○ ○ ○ CSS3 355 backface-visibility 3D トランスフォームの背面の表示 ○ ○ ○ ○ ○ ○ ○ CSS3 348 background 背景の設定をまとめて指定 ○ ○ ○ ○ ○ ○ ○ 320 background-attachment 背景画像の固定対象 ○ ○ ○ △ ○ ○ ○ 318 background-blend-mode 背景画像のブレンド ○ ○ ○ ○ ○ ○ × CSS3 359 background-clip 背景画像の表示エリア ○ ○ ○ ○ ○ ○ ○ CSS3 318 background-color 背景色 ○ ○ ○ ○ ○ ○ ○ 319 background-image 背景画像 ○ ○ ○ ○ ○ ○ ○ 314 background-origin 背景画像の表示位置の基点 ○ ○ ○ ○ ○ ○ ○ CSS3 315 background-position 背景画像の表示位置 ○ ○ ○ ○ ○ ○ ○ 316 background-repeat 背景画像の繰り返し ○ ○ ○ ○ ○ ○ ○ 317 background-size 背景画像のサイズ ○ ○ ○ ○ ○ ○ ○ CSS3 316 border ボーダー ○ ○ ○ ○ ○ ○ ○ 147 border-collapse テーブルのボーダーの重ね合わせ ○ ○ ○ ○ ○ ○ ○ 252 border-color ボーダーの色 ○ ○ ○ ○ ○ ○ ○ 147 border-image ボーダー画像 ○ ○ ○ ○ ○ ○ ○ CSS3 321 border-image-outset ボーダー画像のアウトセットを指定 ○ ○ ○ ○ ○ ○ ○ CSS3 322 border-image-repeat ボーダー画像の繰り返しのスタイルを指定 ○ ○ ○ ○ ○ ○ ○ CSS3 322 border-image-slice ボーダー画像の分割位置を指定 ○ ○ ○ ○ ○ ○ ○ CSS3 322 border-image-source ボーダー画像を指定 ○ ○ ○ ○ ○ ○ ○ CSS3 322 border-image-width ボーダー画像の太さを指定 ○ ○ △ △ ○ ○ ○ CSS3 322 border-radius ボックスの角丸 ○ ○ ○ ○ ○ ○ ○ CSS3 198 border-spacing テーブルのボーダーの間隔 ○ ○ ○ ○ ○ ○ ○ 251 border-style ボーダーのスタイル ○ ○ ○ ○ ○ ○ ○ 147 border-top / border-right / border-bottom / border-left 上下左右のボーダー ○ ○ ○ ○ ○ ○ ○ 148 border-top-color / border-right-color / border-bottom-color / border-left-color 上下左右のボーダーの色 ○ ○ ○ ○ ○ ○ ○ 148 border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius 左上、右上、右下、左下の角丸の半径 ○ ○ ○ ○ ○ ○ ○ CSS3 198 border-top-style / border-right-style / border-bottom-style / border-left-style 上下左右のボーダーのスタイル ○ ○ ○ ○ ○ ○ ○ 148 border-top-width / border-right-width / border-bottom-width / border-left-width 上下左右のボーダーの太さ ○ ○ ○ ○ ○ ○ ○ 148 border-width ボーダーの太さ ○ ○ ○ ○ ○ ○ ○ 147 bottom ポジション：基点の下からの距離 ○ ○ ○ ○ ○ ○ ○ 180 box-decoration-break 分割されたインラインボックスの背景とボーダー ● ● ● ● ○ × × CSS3 322 box-shadow ボックスのドロップシャドウ ○ ○ ○ ○ ○ ○ ○ CSS3 199 box-sizing width / height にパディングとボーダーを含める設定 ○ ○ ○ ○ ○ ○ ○ CSS3 150CSS
プロパティ名 機能 備考 参照 break-before 要素の前の改段 △ △ △ △ × ○ ○ CSS3 294 break-inside 要素の中の改段 △ △ △ △ × ○ ○ CSS3 294 caption-side テーブルのキャプションの表示位置 ○ ○ ○ ○ ○ ○ ○ 254 clear 前にあるフローティングボックスの影響を排除 ○ ○ ○ ○ ○ ○ ○ 177 clip-path クリッピングパス ○ ○ ● ● ○ × × CSS3 358 color テキストの色 ○ ○ ○ ○ ○ ○ ○ 282 column-count マルチカラムレイアウトの段の数 ○ ○ ○ ○ ○ ○ ○ CSS3 291 column-fill マルチカラムレイアウトの段組みの高さの処理 ○ ○ ○ ○ ○ ○ ○ CSS3 293 column-gap マルチカラムレイアウトの段の間隔 ○ ○ ○ ○ ○ ○ ○ CSS3 292 column-rule マルチカラムレイアウトの区切り線 ○ ○ ○ ○ ○ ○ ○ CSS3 292 column-rule-color マルチカラムレイアウトの区切り線の色 ○ ○ ○ ○ ○ ○ ○ CSS3 292 column-rule-style マルチカラムレイアウトの区切り線のスタイル ○ ○ ○ ○ ○ ○ ○ CSS3 292 column-rule-width マルチカラムレイアウトの区切り線の太さ ○ ○ ○ ○ ○ ○ ○ CSS3 292 columns マルチカラムレイアウト ○ ○ ○ ○ ○ ○ ○ CSS3 290 column-span マルチカラムレイアウトの複数段にまたがる表示 ○ ○ ○ ○ × ○ ○ CSS3 293 column-width マルチカラムレイアウトの段の横幅 ○ ○ ○ ○ ○ ○ ○ CSS3 291 content 仮想的なボックスのコンテンツ ○ ○ ○ ○ ○ ○ ○ 188 content テキストコンテンツを画像に置き換える ○ ○ ○ ○ × × × CSS3 192 counter-incremnet カウンターの増減値 ○ ○ ○ ○ ○ ○ ○ 190 counter-reset カウンターのリセット ○ ○ ○ ○ ○ ○ ○ 190 cursor カーソルの形状（基本） ○ × ○ × ○ ○ ○ 194 cursor カーソルの形状（CSS3 で追加された値） △ × ● × △ △ △ CSS3 194 direction 書字方向 ○ ○ ○ ○ ○ ○ ○ HTML の dir 属性 /<bdo>/<bdi> の使用が推奨 298display ディスプレイタイプ（基本） ○ ○ ○ ○ ○ ○ ○ 154 display (block) ディスプレイタイプ（ブロック） ○ ○ ○ ○ ○ ○ ○ 157 display (inline) ディスプレイタイプ（インライン） ○ ○ ○ ○ ○ ○ ○ 157 display (run-in) ディスプレイタイプ（ランイン） × × × × × × ○ 159 display (flow-root) ディスプレイタイプ（フロールート） ○ ○ × × ○ × × CSS3 161 display (flex) （フレキシブルボックスレイアウト）ディスプレイタイプ ○ ○ ○ ○ ○ ○ ○ CSS3 162 display (grid) ディスプレイタイプ（グリッドレイアウト） ○ ○ ○ ○ ○ △ △ Safari は 10.1、iOS は 10.3 以降が対応。CSS3
Edge/IE については P.242を参照。 164
display (table) ディスプレイタイプ（テーブルレイアウト） ○ ○ ○ ○ ○ ○ ○ 165 display (ruby) ディスプレイタイプ（ルビレイアウト） ○ ○ ○ ○ ○ ○ ○ CSS3 167 display (inline-block) ディスプレイタイプ（インラインブロックボックス） ○ ○ ○ ○ ○ ○ ○ 168 display (inline-flex) ディスプレイタイプ（インラインのフレックスコンテナ） ○ ○ ○ ○ ○ ○ ○ CSS3 168 display (inline-grid) ディスプレイタイプ（インラインのグリッドコンテナ） ○ ○ ○ ○ ○ △ △ Safari は 10.1、iOS は 10.3 以降が対応。CSS3
Edge/IE については P.242を参照。 168 display (inline-table) ディスプレイタイプ（インラインのテーブルボックス） ○ ○ ○ ○ ○ ○ ○ 168 display (list-item) ディスプレイタイプ（リスト） ○ ○ ○ ○ ○ ○ ○ 170 display (none) ボックスを構成しない（子階層も構成しない） ○ ○ ○ ○ ○ ○ ○ 174 display (contents) ボックスを構成しない（子階層は構成する） × × × × ○ × × CSS3 174 empty-cells テーブルの空セルの表示 ○ ○ ○ ○ ○ ○ ○ 252 filter フィルタ ○ ○ ○ ○ ○ ○ × CSS3 356 filter SVG を利用したフィルタ ○ ○ ○ ○ ○ × × CSS3 357 flex フレックスアイテムの伸長比 / 縮小比 / ベースサイズの設定 ○ ○ ○ ○ ○ ○ △ IE の問題については P.206、P.207CSS3 下部の赤字の注釈を参照。 203
CSS
プロパティ名 機能 備考 参照
flex-basis フレックスアイテムのベースサイズ ○ ○ ○ ○ ○ ○ △ IE の問題については P.206、P.207CSS3 下部の赤字の注釈を参照。 204
flex-direction フレックスアイテムを並べる方向 ○ ○ ○ ○ ○ ○ ○ CSS3 209 flex-flow flex-direction と flex-wrap の設定をまとめて指定 ○ ○ ○ ○ ○ ○ ○ CSS3 211 flex-grow フレックスアイテムの伸長比 ○ ○ ○ ○ ○ ○ ○ CSS3 204 flex-shrink フレックスアイテムの縮小比 ○ ○ ○ ○ ○ ○ ○ CSS3 204 flex-wrap フレックスアイテムのマルチライン表示 ○ ○ ○ ○ ○ ○ ○ CSS3 210 float フロート ○ ○ ○ ○ ○ ○ ○ 176 flow-from リージョン：ボックスに流し込むコンテンツを指定 × × ● ● × △ △ CSS3 295 flow-into リージョン：コンテンツを流し込むボックスを指定 × × ● ● × △ △ CSS3 295 font 書式設定をまとめて記述する（基本） ○ ○ ○ ○ ○ ○ ○ 266
font （font-stretch を含む場合）書式設定をまとめて記述する ○ ○ ○ ○ ○ × × SafariとiOS Safari は 11 以降が対応CSS3 266 font-display 外部フォントの読み込みに関する処理の指定 ○ × × × × × × CSS4 Chrome は 60 以降が対応 269 font-family フォント ○ ○ ○ ○ ○ ○ ○ 257 font-feature-settings OpenType 機能を利用した字形の指定 ○ ○ ○ ○ ○ × × CSS3 262 font-language-override 複数言語の字形の切り替え × × × × ○ × × CSS3 263 font-size フォントサイズ ○ ○ ○ ○ ○ ○ ○ 256 font-size-adjust 代替フォントのフォントサイズの自動調整 × × × × ○ × × CSS3 258 font-smoothing macOS 環境のフォントのアンチエイリアス処理 ● × ● × △ × × 拡張 289
font-stretch フォントの幅 ○ ○ ○ ○ ○ ○ ○ SafariとiOS Safari は 11 以降が対応CSS3 261
font-style 斜体 ○ ○ ○ ○ ○ ○ ○ 260 font-variant 字形 ○ ○ ○ ○ ○ ○ ○ 262 font-variant OpenType 機能を利用した字形の指定 ○ ○ ○ ○ ○ × × CSS3 262 font-weight フォントの太さ ○ ○ ○ ○ ○ ○ ○ 260 grid グリッドの作成に関する設定をまとめて指定 ○ ○ ○ ○ ○ × × CSS3 240 grid-area グリッドアイテムを配置するエリアの指定 ○ ○ ○ ○ ○ × × CSS3 231 grid-auto-columns グリッドの列の暗黙トラックサイズの指定 ○ ○ ○ ○ ○ × × CSS3 225 grid-auto-flow グリッドアイテムの自動配置の方向 ○ ○ ○ ○ ○ × × CSS3 224 grid-auto-rows グリッドの行の暗黙トラックサイズの指定 ○ ○ ○ ○ ○ × × CSS3 225 grid-column grid-column-start と grid-column-end の設定をまとめて指定 ○ ○ ○ ○ ○ × × CSS3 229 grid-column-end グリッドアイテムを配置するラインの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照226 grid-column-gap グリッドアイテムの列の間隔 ○ ○ ○ ○ ○ × × CSS3 235 grid-column-start グリッドアイテムを配置するラインの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照226
grid-gap グリッドアイテムの間隔 ○ ○ ○ ○ ○ × × CSS3 234
grid-row grid-row-startとgrid-row-end の設定をまとめて指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照229 grid-row-end グリッドアイテムを配置するラインの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照226 grid-row-gap グリッドアイテムの行の間隔 ○ ○ ○ ○ ○ × × CSS3 235 grid-row-start グリッドアイテムを配置するラインの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照226 grid-template グリッドの作成に関する設定をまとめて指定 ○ ○ ○ ○ ○ × × CSS3 240 grid-template-areas グリッドエリアの作成 ○ ○ ○ ○ ○ × × CSS3 230 grid-template-columns グリッドの列のトラックサイズの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照219 grid-template-rows グリッドの行のトラックサイズの指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照219 hanging-punctuation ぶら下がり × × ○ ○ × × × CSS3 279 height 高さ ○ ○ ○ ○ ○ ○ ○ 149 height 親要素やコンテンツに合わせた高さ ● ● ● ● △ × × CSS3 151 hyphens ハイフネーション △ △ ● ● ○ ● ● CSS3 278
CSS
プロパティ名 機能 備考 参照 image-orientation 画像の向きの調整 × × × × ○ × × CSS3 313 image-rendering 画像の拡大処理のアルゴリズム ○ ○ ○ ○ ● × △ CSS3 324 initial-letter ドロップキャップの設定 × × ● ● × × × CSS3 127 justify-content フレックスアイテムの横方向の位置揃え ○ ○ ○ ○ ○ ○ ○ CSS3 212 justify-content グリッドの横方向の位置揃え ○ ○ ○ ○ ○ × × CSS3 236 justify-items グリッドアイテムの横方向の位置揃え ○ ○ ○ ○ ○ × × CSS3 238 justify-self グリッドアイテムごとに横方向の位置揃えを指定 ○ ○ ○ ○ ○ △ △ CSS3 Edge/IE については P.242を参照239 left ポジション：基点の左からの距離 ○ ○ ○ ○ ○ ○ ○ 180 letter-spacing 文字の間隔 ○ ○ ○ ○ ○ ○ ○ 281 line-break 禁則処理のルール × × × × × × × CSS3 279 line-clamp テキストを指定した行数で省略する ● ● ● ● × × × 拡張 277 line-height 行の高さ ○ ○ ○ ○ ○ ○ ○ 264 list-style マーカーボックス関連の設定 ○ ○ ○ ○ ○ ○ ○ 173 list-style-image リストマークの画像 ○ ○ ○ ○ ○ ○ ○ 173 list-style-position マーカーボックスの挿入位置 ○ ○ ○ ○ ○ ○ ○ 171 list-style-type リストマークの種類（基本） ○ ○ ○ ○ ○ ○ ○ 172 list-style-type リストマークの種類（CSS3 で追加された値） △ △ △ △ ○ × × CSS3 172 margin マージン ○ ○ ○ ○ ○ ○ ○ 143 margin-top / margin-right / margin-bottom / margin-left 上下左右のマージン ○ ○ ○ ○ ○ ○ ○ 143 mask マスク ● ● ● ● ○ × × CSS3 357 mask-clip マスクの表示エリア ● ● ● ● ○ × × CSS3 357 mask-image マスクの画像 ● ● ● ● ○ × × CSS3 357 mask-origin マスクの基点 ● ● ● ● ○ × × CSS3 357 mask-position マスクの位置 ● ● ● ● ○ × × CSS3 357 mask-repeat マスクの繰り返し ● ● ● ● ○ × × CSS3 357 mask-size マスクのサイズ ● ● ● ● ○ × × CSS3 357 max-height 高さの最大値 ○ ○ ○ ○ ○ ○ ○ 153 max-width 横幅の最大値 ○ ○ ○ ○ ○ ○ ○ 153 min-height 高さの最小値 ○ ○ ○ ○ ○ ○ ○ 153 min-width 横幅の最小値 ○ ○ ○ ○ ○ ○ ○ 153 mix-blend-mode ブレンド ○ ○ ○ ○ ○ × × CSS3 359 nbsp-mode ノーブレークスペースの処理 × × ● ● × × × 拡張 277 object-fit 画像・ビデオの表示エリアへのフィッティング ○ ○ ○ ○ ○ × × CSS3 312 object-position 画像の表示位置の調整 ○ ○ ○ ○ ○ × × CSS3 313 opacity ボックスの不透明度 ○ ○ ○ ○ ○ ○ ○ CSS3 194 order フレックスアイテムの並び順 ○ ○ ○ ○ ○ ○ ○ CSS3 208 outline アウトライン ○ ○ ○ ○ ○ ○ ○ 196 outline-color アウトラインの色 ○ ○ ○ ○ ○ ○ ○ 196 outline-offset アウトラインのオフセット ○ ○ ○ ○ ○ ○ × CSS3 Edge は 15 以降が対応 197 outline-style アウトラインのスタイル ○ ○ ○ ○ ○ ○ ○ 196 outline-width アウトラインの太さ ○ ○ ○ ○ ○ ○ ○ 196 overflow オーバーフローしたコンテンツの表示方法 ○ ○ ○ ○ ○ ○ ○ 186 overflow-scrolling 慣性スクロールを有効化 × × × ● × × × 拡張 319 overflow-wrap 長い単語の改行ルール ○ ○ ○ ○ ○ × × CSS3 276 overflow-x 横方向にオーバーフローしたコンテンツの表示方法 ○ ○ ○ ○ ○ ○ ○ CSS3 186 overflow-y 縦方向にオーバーフローしたコンテンツの表示方法 ○ ○ ○ ○ ○ ○ ○ CSS3 186 padding パディング ○ ○ ○ ○ ○ ○ ○ 146CSS
プロパティ名 機能 備考 参照 padding-top / padding-right / padding-bottom / padding-left 上下左右のパディング ○ ○ ○ ○ ○ ○ ○ 146 perspective 3Dトランスフォームの子要素の透視投影 ○ ○ ○ ○ ○ ○ ○ CSS3 349 perspective-origin 3Dトランスフォームの子要素の透視投影の投影中心 ○ ○ ○ ○ ○ ○ ○ CSS3 349 position ポジション（基本） ○ ○ ○ ○ ○ ○ ○ 180 position (relative) ポジション（相対配置） ○ ○ ○ ○ ○ ○ ○ 180 position (absolute) ポジション（絶対配置） ○ ○ ○ ○ ○ ○ ○ 181 position (fixed) ポジション（固定配置） ○ ○ ○ ○ ○ ○ ○ 181 position (sticky) ポジション（スティッキー配置） ○ ○ ● ● ○ × × CSS3 182 quotes 引用符の記号 ○ ○ ○ ○ ○ ○ ○ 189 resize ボックスのリサイズ ○ ○ ○ × ○ × × CSS3 187 right ポジション：基点の右からの距離 ○ ○ ○ ○ ○ ○ ○ 180 ruby-align ルビの位置揃え × × × × ○ △ △ CSS3 168 ruby-position ルビの表示位置 × × × × ○ × × CSS3 167 shape-outside シェイプ ○ ○ ○ ○ × × × CSS3 184 table-layout テーブルの列の横幅の決定方法 ○ ○ ○ ○ ○ ○ ○ 250 tab-size タブ幅 ○ ○ ○ ○ ● × × CSS3 280 tap-highlight-color タップしたメニューのハイライト表示 × ● × ● × × × 拡張 124 text-align 行揃え ○ ○ ○ ○ ○ ○ ○ 270 text-align-last 最終行の行揃え ○ ○ ○ ○ ○ ○ ○ CSS3 271 text-combine-upright 縦中横 ○ ○ ● ● ○ ● ● CSS3 298 text-decoration 下線・上線・取り消し線（基本） ○ ○ ○ ○ ○ ○ ○ 284 text-decoration 下線・上線・取り消し線（スタイルと色の指定） ○ ○ ● ● ○ × × CSS3 284 text-decoration-color 下線・上線・取り消し線のスタイル ○ ○ ● ● ○ × × CSS3 284 text-decoration-line 下線・上線・取り消し線の種類 ○ ○ ● ● ○ × × CSS3 284 text-decoration-skip ラインのスキップ ○ ○ ● ● × × × CSS4 285 text-decoration-style 下線・上線・取り消し線のスタイル ○ ○ ● ● ○ × × CSS3 284 text-emphasis 圏点 ● ● ○ ○ ○ × × CSS3 286 text-emphasis-color 圏点の色 ● ● ○ ○ ○ × × CSS3 286 text-emphasis-position 圏点の表示位置 △ △ ○ ○ ○ × × CSS3 287 text-emphasis-style 圏点のスタイル ● ● ○ ○ ○ × × CSS3 286 text-fill-color アウトライン内のテキストの色 ● ● ● ● ● ● × 「-webkit-」付きで対応拡張 Firefox と Edge も 288text-indent １行目のインデント ○ ○ ○ ○ ○ ○ ○ 281 text-justify 両端揃えの調整方法 × × × × ○ △ △ CSS3 Firefox は 55 以降が対応 271 text-orientation 縦書きの中の文字の向き ○ ○ ● ● ○ × × CSS3 297 text-overflow オーバーフローしたテキストの省略表示 ○ ○ ○ ○ ○ ○ ○ CSS3 276 text-rendering テキストのレンダリング処理 ○ ○ ○ ○ ○ × × SVG 289 text-shadow テキストのドロップシャドウ ○ ○ ○ ○ ○ ○ ○ CSS3 287 text-size-adjust 小さいフォントサイズの自動調整 ○ ○ × ○ × × × CSS3 259 text-stroke テキストのアウトライン ● ● ● ● ● ● × 「-webkit-」付きで対応拡張 Firefox と Edge も 288 text-transform テキストトランスフォーム ○ ○ ○ ○ ○ ○ ○ 283 text-underline-position 下線の表示位置 ○ ○ × × × △ △ CSS3 285 top ポジション：基点の上からの距離 ○ ○ ○ ○ ○ ○ ○ 180 touch-callout ポップアップメニューを無効化 × × × ● × × × 拡張 124 transform 2D トランスフォーム ○ ○ ○ ○ ○ ○ ○ CSS3 342 transform 3D トランスフォーム ○ ○ ○ ○ ○ ○ ○ CSS3 344 transform-origin 2D トランスフォームのローカル座標系の原点 ○ ○ ○ ○ ○ ○ ○ CSS3 343
CSS
プロパティ名 機能 備考 参照 transform-origin 3D トランスフォームのローカル座標系の原点 ○ ○ ○ ○ ○ ○ ○ CSS3 346 transform-style 3D トランスフォームの子要素への適用 ○ ○ ○ ○ ○ ○ × CSS3 349 transition トランジション ○ ○ ○ ○ ○ ○ ○ CSS3 350 transition-delay トランジションのディレイ ○ ○ ○ ○ ○ ○ ○ CSS3 352 transition-duration トランジションの再生時間 ○ ○ ○ ○ ○ ○ ○ CSS3 352 transition-property トランジションのプロパティ名 ○ ○ ○ ○ ○ ○ ○ CSS3 352 transition-timing-function トランジションの補間方法 ○ ○ ○ ○ ○ ○ ○ CSS3 352 unicode-bidi 双方向アルゴリズム ○ ○ ○ ○ ○ ○ ○ HTML の dir 属性 /<bdo>/<bdi> の使用が推奨 298vertical-align 垂直方向の位置揃え ○ ○ ○ ○ ○ ○ ○ 272 visibility ボックスのビジビリティ ○ ○ ○ ○ ○ ○ ○ 192 visibility (collapse) （表示スペースを残さずに非表示にする）テーブルのビジビリティ × × × × ○ ○ ○ 193 visibility (collapse) （表示スペースを残さずに非表示にする）フレックスアイテムのビジビリティ × × × × ○ ○ ○ CSS3 216 white-space 改行・タブ・スペースの反映と自動改行の有無 ○ ○ ○ ○ ○ ○ ○ 274 width 横幅 ○ ○ ○ ○ ○ ○ ○ 149 width 親要素やコンテンツに合わせた横幅 ● ● ● ● △ × × CSS3 151 will-change 変化するプロパティをブラウザに伝える ○ ○ ○ ○ ○ × × CSS3 352 word-break 単語の改行ルール ○ ○ ○ ○ ○ ○ ○ CSS3 275 word-spacing 単語の間隔 ○ ○ ○ ○ ○ ○ ○ 280 word-spacing 単語の間隔（% による指定） × × ○ ○ ○ × × CSS3 280 word-wrap 長い単語の改行ルール ○ ○ ○ ○ ○ ○ ○ CSS3 276 wrap-flow エクスクルージョン × × × × × ● ● CSS3 185 wrap-through wrap-flow の影響を排除 × × × × × ● ● CSS3 185 writing-mode 縦書き ○ ○ ○ ○ ○ ○ △ CSS3 296 z-index ボックスの重なり順 ○ ○ ○ ○ ○ ○ ○ 183
■著者紹介 エビスコム さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係 では書籍、デジタル映像、CG、ソフトウェアの企画制作、WWW システムの構築などを行う。 主な編著書： 『６ステップでマスターする「最新標準」HTML+CSS デザイン』マイナビ出版刊 『これからの「標準」を学ぶ マルチデバイス対応サイト構築』同上 『これからの「標準」を身につける HTML+CSS デザインレシピ』同上 『HTML5 スタンダード・デザインガイド』同上 『CSS3 スタンダード・デザインガイド【改訂第 2 版】』同上 『スマートフォンサイトのための HTML5+CSS3』同上 『XHTML/HTML+CSS スーパーレシピブック』同上 『WordPress3 サイト構築スタイルブック』同上 『WordPress3 デザイン & カスタマイズ スタイルブック』同上 『Movable Type サイトデザイン & レシピ事典』同上
『WordPress AMP 対応 モダン Web 制作 レッスンブック』ソシム刊 『Dreamweaver デザインブック CC2015 対応』同上 『WordPress デザインブック HTML5&CSS3 準拠』同上 『HTML5&CSS3 デザインブック』ソシム刊 『WordPress レッスンブック HTML5&CSS3 準拠』同上 『WordPress ステップアップブック』同上 『HTML5&CSS3 レッスンブック』同上 ■ STAFF 編集・DTP： エビスコム カバーデザイン： 三宮 暁子（Highcolor） 担当： 角竹 輝紀
