『HTML5&CSS3デザイン現場の新標準ガイド』特典PDF

Size: px

Start display at page:

Download "『HTML5&CSS3デザイン現場の新標準ガイド』特典PDF"

れいがやまがた
5 years ago
Views:

2 & PRACTICAL DESIGN GUIDE HTML Chrome 59 Android Chrome 59 Safari 10.1 要素ブラウザ対応一覧 ios Safari 10.3 Firefox 54 〇対応部分対応.1 で採用されたタグ Edge 15.1で採用されたタグ IE11 未対応要素名 a リンク a (download) ダウンロードリンクの作成 abbr 略語 084 address コンテンツに関する問い合わせ先 063 area イメージマップのエリアの構成 article 完結したコンテンツ 058 aside 補足関連情報 059 audio オーディオ 308 b 注目してほしい語句 base ベース URL bdi 双方向アルゴリズムの隔離 bdo 双方向アルゴリズムのオーバーライド 091 blockquote 引用 067 body コンテンツの記述 027 br 改行タグ 093 button ボタン canvas Canvas caption テーブルのキャプション 244 cite 作品のタイトル著者名 URL 083 code コンピュータコード 088 col テーブルの列のグループ 248 colgroup テーブルの列のグループ data マシンリーダブルな情報 datalist 入力候補の作成 dd 説明リストの語句の説明 del 削除したコンテンツ details 追加情報 dfn 定義する語句 084 div 汎用タグ 073 dl 説明リスト 070 dt 説明リストの語句 070 em 強調強勢 embed プラグインを使ったコンテンツの埋め込み fieldset フォームコントロールのグループ化 figcaption フィギュアのキャプション 071 figure フィギュア 071 footer フッター 062 form フォーム Chrome は 62 以降が対応

3 HTML 要素名 h1 / h2 / h3 / h4 / h5 / h6 キーとなるワード見出しタイトル表題など head メタデータの記述 header ヘッダー hr パラグラフレベルの区切り 065 html ルート要素 025 i 学名や慣用句などの語句 090 iframe インラインフレーム iframe (srcdoc) インラインフレームに表示するコンテンツの記述 img 画像 img (srcset / sizes) 画像の選択肢と選択に使用する情報 input (button) 汎用ボタン input (checkbox) チェックボックス input (color) 色のフォームコントロール input (date) 年月日のフォームコントロール 330 input (datetimelocal) 日時のフォームコントロール 330 input ( ) メールアドレス専用のテキストフィールド 329 input (file) ファイルアップロード 332 input (hidden) 隠しフィールド 332 input (image) 画像ボタン input (month) 年月のフォームコントロール 330 input (number) 数値のフォームコントロール 330 input (password) パスワード専用のテキストフィールド input (radio) ラジオボタン input (range) 大まかな数値レンジのフォームコントロール input (reset) リセットボタン input (search) 検索用のテキストフィールド input (submit) 送信ボタン input (tel) 電話番号専用のテキストフィールド input (text) テキストフィールド input (time) 時間のフォームコントロール 330 input (url) URL 専用のテキストフィールド 329 input (week) 週のフォームコントロール 330 ins 追加したコンテンツ kbd コンピュータへの入力内容 keygen 暗号鍵 label フォームコントロールのラベル 328 legend フォームコントロールのグループのキャプション 340 li リストの項目 069 link 関連した URL についての情報 main メインコンテンツ map イメージマップ mark ハイライト 091 math MathML 311 menu コマンドリスト menuitem コマンドの設定 meta メタデータ meter メーター 335 nav ナビゲーション 059 noscript スクリプトが動作しない環境用の情報 Safari は 11 以降が対応で削除予定とされ 327 WHATWG と.2 草案で削除

4 HTML 要素名 object オブジェクト 307 ol 順番が重要なリスト 069 optgroup 選択肢のグループ 334 option プルダウン型の選択肢 output 計算結果 p パラグラフ param オブジェクトのパラメータ picture 画像 pre 整形済みテキスト progress 進捗状況 q 引用 rb ルビを付けるベースとなる語句 085 rp ルビに未対応なブラウザ用の設定 086 rt ルビの記述 085 rtc ルビ用のコンテナ 085 ruby ルビ 085 s 変更更新情報 082 samp コンピュータからの出力内容 088 script スクリプト script (nonce) コンテンツセキュリティポリシー関連の設定.1 section 汎用的なセクション select プルダウン型の選択肢 small 但し書き注意 source <picture> の選択肢 source <video> / <audio> の選択肢 308 span 汎用タグ 093 strong 重要 081 style 内部スタイルシートエンベッドスタイルシート style (nonce) コンテンツセキュリティポリシー関連の設定 sub 下付き summary 追加情報の概要 sup 上付き svg SVG table テーブル 244 tbody テーブルの行のグループメインデータ 249 td テーブルのデータセル template テンプレート textarea 複数行のテキストフィールド 334 tfoot テーブルの行のグループフッター 249 th テーブルの見出しセル 244 thead テーブルの行のグループヘッダー time 日時 title ページのタイトル tr テーブルの行 track テキストトラック u 不明瞭な語句 090 ul 順不同なリスト 069 var 変数 video ビデオ 308 wbr 改行を認める箇所 Edge は 15 以降が対応 Edge は 15 以降が対応

5 & PRACTICAL DESIGN GUIDE Chrome 59 Android Chrome 59 Safari 10.1 プロパティブラウザ対応一覧 ios Safari 10.3 Firefox 54 〇対応で採用されたプロパティ Edge 15 ベンダープレフィックス付きで対応 4 4で採用されたプロパティ IE11 部分対応古い規格で対応など W3Cの仕様書に未採用なプロパティ独自のリストマークの定義ページの URL の判別 4 フォントリソースの指定メディアクエリメディアクエリメディアクエリのネスト名前空間の指定対応状況の判別ビューポートの設定 032 : calc() 数式 361 : counter() カウンター : imageset() 画像の選択肢 : lineargradient() 線形グラデーション 323 : radialgradient() 円形グラデーション 323 : 線形グラデーションの繰り返し repeatinglineargradient() 323 : 円形グラデーションの繰り返し repeatingradialgradient() 323 : var() 変数 Edge は 15 以降が対応 361 aligncontent フレックスアイテムのマルチラインの位置揃え 215 aligncontent グリッドの縦方向の位置揃え 237 alignitems フレックスアイテムの縦方向の位置揃え 213 alignitems グリッドアイテムの縦方向の位置揃え 239 alignself フレックスアイテムごとに縦方向の位置揃えを指定 214 alignself グリッドアイテムごとに縦方向の位置揃えを指定 Edge/IE ついては P.242を 239 all すべてのプロパティの設定をリセット 361 animation キーフレームによるアニメーション IEの問題については P.を 353 animationdelay アニメーションのディレイ animationdirection アニメーションの再生方向 animationdulation アニメーションの再生時間 animationfillmode アニメーションの再生時間外の表示 animationinterationcount アニメーションの再生回数

6 animationname アニメーションのキーフレーム名 animationplaystate アニメーションの再生状態 animationtimingfunction アニメーションの補間方法 backfacevisibility 3D トランスフォームの背面の表示 348 background 背景の設定をまとめて指定 320 backgroundattachment 背景画像の固定対象 backgroundblendmode 背景画像のブレンド backgroundclip 背景画像の表示エリア 318 backgroundcolor 背景色 backgroundimage 背景画像 backgroundorigin 背景画像の表示位置の基点 backgroundposition 背景画像の表示位置 backgroundrepeat 背景画像の繰り返し backgroundsize 背景画像のサイズ border ボーダー 147 bordercollapse テーブルのボーダーの重ね合わせ 252 bordercolor ボーダーの色 borderimage ボーダー画像 321 borderimageoutset ボーダー画像のアウトセットを指定 322 borderimagerepeat ボーダー画像の繰り返しのスタイルを指定 322 borderimageslice ボーダー画像の分割位置を指定 322 borderimagesource ボーダー画像を指定 322 borderimagewidth ボーダー画像の太さを指定 322 borderradius ボックスの角丸 198 borderspacing テーブルのボーダーの間隔 251 borderstyle ボーダーのスタイル 147 bordertop / borderright / borderbottom / borderleft 上下左右のボーダー 148 bordertopcolor / borderrightcolor / borderbottomcolor / borderleftcolor 上下左右のボーダーの色 bordertopleftradius / bordertoprightradius / 左上右上右下左下の角丸の半径 borderbottomrightradius / borderbottomleftradius bordertopstyle / borderrightstyle / borderbottomstyle / borderleftstyle 上下左右のボーダーのスタイル 148 bordertopwidth / borderrightwidth / borderbottomwidth / borderleftwidth 上下左右のボーダーの太さ 148 borderwidth ボーダーの太さ 147 bottom ポジション基点の下からの距離 boxdecorationbreak 分割されたインラインボックスの背景とボーダー 322 boxshadow ボックスのドロップシャドウ 199 boxsizing width / height にパディングとボーダーを含める設定 150 breakafter 要素の後の改段

7 breakbefore 要素の前の改段 294 breakinside 要素の中の改段 294 captionside テーブルのキャプションの表示位置 clear 前にあるフローティングボックスの影響を排除 clippath クリッピングパス color テキストの色 columncount マルチカラムレイアウトの段の数 291 columnfill マルチカラムレイアウトの段組みの高さの処理 293 columngap マルチカラムレイアウトの段の間隔 292 columnrule マルチカラムレイアウトの区切り線 292 columnrulecolor マルチカラムレイアウトの区切り線の色 292 columnrulestyle マルチカラムレイアウトの区切り線のスタイル 292 columnrulewidth マルチカラムレイアウトの区切り線の太さ 292 columns マルチカラムレイアウト 290 columnspan マルチカラムレイアウトの複数段にまたがる表示 293 columnwidth マルチカラムレイアウトの段の横幅 291 content 仮想的なボックスのコンテンツ content テキストコンテンツを画像に置き換える counterincremnet カウンターの増減値 190 counterreset カウンターのリセット 190 cursor カーソルの形状基本 cursor カーソルの形状で追加された値 direction 書字方向使用が推奨 298 display ディスプレイタイプ基本 154 display (block) ディスプレイタイプブロック 157 display (inline) ディスプレイタイプインライン 157 display (runin) ディスプレイタイプランイン display (flowroot) ディスプレイタイプフロールート display (flex) ディスプレイタイプフレキシブルボックスレイアウト HTML の dir 属性 /<bdo>/<bdi> の display (grid) ディスプレイタイプグリッドレイアウト Safari は 10.1 ios は 10.3 以降が対応 164 display (table) ディスプレイタイプテーブルレイアウト display (ruby) ディスプレイタイプルビレイアウト display (inlineblock) ディスプレイタイプインラインブロックボックス display (inlineflex) ディスプレイタイプインラインのフレックスコンテナ Edge/IE については P.242を display (inlinegrid) ディスプレイタイプインラインのグリッドコンテナ Safari は 10.1 ios は 10.3 以降が対応 168 display (inlinetable) ディスプレイタイプインラインのテーブルボックス 168 display (listitem) ディスプレイタイプリスト 170 display (none) ボックスを構成しない子階層も構成しない display (contents) ボックスを構成しない子階層は構成する emptycells テーブルの空セルの表示 filter フィルタ 356 filter SVG を利用したフィルタ flex Edge/IE については P.242をフレックスアイテムの伸長比 / 縮小比 / ベースサ IE の問題については P.206 P イズの設定下部の赤字の注釈を 007

8 flexbasis フレックスアイテムのベースサイズ IE の問題については P.206 P flexdirection フレックスアイテムを並べる方向 209 flexflow flexdirection と flexwrap の設定をまとめて指定 211 flexgrow フレックスアイテムの伸長比 204 flexshrink フレックスアイテムの縮小比 204 flexwrap フレックスアイテムのマルチライン表示 210 float フロート flowfrom リージョンボックスに流し込むコンテンツを指定 295 flowinto リージョンコンテンツを流し込むボックスを指定 295 font 書式設定をまとめて記述する基本 font 書式設定をまとめて記述する fontstretch を含む場合下部の赤字の注釈を Chrome は 60 以降が対応 269 Safari と ios Safari は 11 以降が対応 fontdisplay 外部フォントの読み込みに関する処理の指定 fontfamily フォント fontfeaturesettings OpenType を利用した字形の指定 262 fontlanguageoverride 複数言語の字形の切り替え 263 fontsize フォントサイズ fontsizeadjust 代替フォントのフォントサイズの自動調整 258 fontsmoothing macos 環境のフォントのアンチエイリアス処理 fontstretch フォントの幅 fontstyle 斜体 fontvariant 字形 fontvariant OpenType を利用した字形の指定 fontweight フォントの太さ grid グリッドの作成に関する設定をまとめて指定 240 gridarea グリッドアイテムを配置するエリアの指定 231 gridautocolumns グリッドの列の暗黙トラックサイズの指定 225 gridautoflow グリッドアイテムの自動配置の方向 224 gridautorows グリッドの行の暗黙トラックサイズの指定 225 gridcolumn gridcolumnstart と gridcolumnend の設定をまとめて指定 229 gridcolumnend グリッドアイテムを配置するラインの指定 Edge/IE については P.242を 226 gridcolumngap グリッドアイテムの列の間隔 235 gridcolumnstart グリッドアイテムを配置するラインの指定 Edge/IE については P.242を 226 gridgap グリッドアイテムの間隔 234 gridrow gridrowstartとgridrowend の設定をまとめて指定 Edge/IE については P.242を 229 gridrowend グリッドアイテムを配置するラインの指定 Edge/IE については P.242を 226 gridrowgap グリッドアイテムの行の間隔 235 gridrowstart グリッドアイテムを配置するラインの指定 Edge/IE については P.242を 226 gridtemplate グリッドの作成に関する設定をまとめて指定 240 gridtemplateareas グリッドエリアの作成 230 gridtemplatecolumns グリッドの列のトラックサイズの指定 Edge/IE については P.242を 219 gridtemplaterows グリッドの行のトラックサイズの指定 Edge/IE については P.242を 219 hangingpunctuation ぶら下がり 279 height 高さ height 親要素やコンテンツに合わせた高さ 151 hyphens ハイフネーション Safari と ios Safari は 11 以降が対応

9 imageorientation 画像の向きの調整 313 imagerendering 画像の拡大処理のアルゴリズム 324 initialletter ドロップキャップの設定 127 justifycontent フレックスアイテムの横方向の位置揃え 212 justifycontent グリッドの横方向の位置揃え 236 justifyitems グリッドアイテムの横方向の位置揃え 238 justifyself グリッドアイテムごとに横方向の位置揃えを指定 Edge/IE については P.242を 239 left ポジション基点の左からの距離 letterspacing 文字の間隔 linebreak 禁則処理のルール 279 lineclamp テキストを指定した行数で省略する 277 lineheight 行の高さ liststyle マーカーボックス関連の設定 173 liststyleimage リストマークの画像 173 liststyleposition マーカーボックスの挿入位置 171 liststyletype リストマークの種類基本 liststyletype リストマークの種類で追加された値 margin マージン 143 margintop / marginright / marginbottom / marginleft 上下左右のマージン 143 mask マスク maskclip マスクの表示エリア maskimage マスクの画像 maskorigin マスクの基点 maskposition マスクの位置 maskrepeat マスクの繰り返し masksize マスクのサイズ maxheight 高さの最大値 153 maxwidth 横幅の最大値 153 minheight 高さの最小値 153 minwidth 横幅の最小値 mixblendmode ブレンド 359 nbspmode ノーブレークスペースの処理 277 objectfit 画像ビデオの表示エリアへのフィッティング 312 objectposition 画像の表示位置の調整 313 opacity ボックスの不透明度 194 order フレックスアイテムの並び順 208 outline アウトライン outlinecolor アウトラインの色 outlineoffset アウトラインのオフセット outlinestyle アウトラインのスタイル 196 outlinewidth アウトラインの太さ 196 overflow オーバーフローしたコンテンツの表示方法 overflowscrolling 慣性スクロールを有効化 overflowwrap 長い単語の改行ルール 276 overflowx 横方向にオーバーフローしたコンテンツの表示方法 186 overflowy 縦方向にオーバーフローしたコンテンツの表示方法 186 padding パディング Edge は 15 以降が対応

10 paddingtop / paddingright / paddingbottom / paddingleft 上下左右のパディング perspective 3Dトランスフォームの子要素の透視投影 349 perspectiveorigin 3Dトランスフォームの子要素の透視投影の投影中心 349 position ポジション基本 180 position (relative) ポジション相対配置 180 position (absolute) ポジション絶対配置 181 position (fixed) ポジション固定配置 position (sticky) ポジションスティッキー配置 quotes 引用符の記号 resize ボックスのリサイズ right ポジション基点の右からの距離 rubyalign ルビの位置揃え 168 rubyposition ルビの表示位置 167 shapeoutside シェイプ 184 tablelayout テーブルの列の横幅の決定方法 tabsize タブ幅 280 taphighlightcolor タップしたメニューのハイライト表示 124 textalign 行揃え textalignlast 最終行の行揃え 271 textcombineupright 縦中横 298 textdecoration 下線上線取り消し線基本 textdecoration 下線上線取り消し線スタイルと色の指定 284 textdecorationcolor 下線上線取り消し線のスタイル 284 textdecorationline 下線上線取り消し線の種類 284 textdecorationskip ラインのスキップ textdecorationstyle 下線上線取り消し線のスタイル 284 textemphasis 圏点 286 textemphasiscolor 圏点の色 286 textemphasisposition 圏点の表示位置 287 textemphasisstyle 圏点のスタイル Firefox と Edge も webkit 付きで対応 textfillcolor アウトライン内のテキストの色 textindent １行目のインデント textjustify 両端揃えの調整方法 Firefox は 55 以降が対応 271 textorientation 縦書きの中の文字の向き 297 textoverflow オーバーフローしたテキストの省略表示 276 textrendering テキストのレンダリング処理 SVG 289 textshadow テキストのドロップシャドウ 287 textsizeadjust 小さいフォントサイズの自動調整 textstroke テキストのアウトライン texttransform テキストトランスフォーム textunderlineposition 下線の表示位置 top ポジション基点の上からの距離 touchcallout ポップアップメニューを無効化 transform 2D トランスフォーム 342 transform 3D トランスフォーム 344 transformorigin 2D トランスフォームのローカル座標系の原点 Firefox と Edge も webkit 付きで対応

11 transformorigin 3D トランスフォームのローカル座標系の原点 346 transformstyle 3D トランスフォームの子要素への適用 349 transition トランジション 350 transitiondelay トランジションのディレイ 352 transitionduration トランジションの再生時間 352 transitionproperty トランジションの 352 transitiontimingfunction トランジションの補間方法 352 unicodebidi 双方向アルゴリズム HTML の dir 属性 /<bdo>/<bdi> の使用が推奨 298 verticalalign 垂直方向の位置揃え 272 visibility ボックスのビジビリティ visibility (collapse) テーブルのビジビリティ表示スペースを残さずに非表示にする visibility (collapse) フレックスアイテムのビジビリティ表示スペースを残さずに非表示にする 216 whitespace 改行タブスペースの反映と自動改行の有無 width 横幅 274 width 親要素やコンテンツに合わせた横幅 151 willchange 変化するプロパティをブラウザに伝える 352 wordbreak 単語の改行ルール 275 wordspacing 単語の間隔 wordspacing 単語の間隔 % による指定 280 wordwrap 長い単語の改行ルール 276 wrapflow エクスクルージョン 185 wrapthrough wrapflow の影響を排除 185 writingmode 縦書き 296 zindex ボックスの重なり順

12 著者紹介エビスコムさまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開コンピュータインターネット関係では書籍デジタル映像 CG ソフトウェアの企画制作 WWW システムの構築などを行う主な編著書 : 6ステップでマスターする最新標準 HTML+ デザインマイナビ出版刊これからの標準を学ぶマルチデバイス対応サイト構築同上これからの標準を身につける HTML+ デザインレシピ同上スタンダードデザインガイド同上スタンダードデザインガイド改訂第 2 版同上スマートフォンサイトのための + 同上 XHTML/HTML+ スーパーレシピブック同上 WordPress3 サイト構築スタイルブック同上 WordPress3 デザイン & カスタマイズスタイルブック同上 Movable Type サイトデザイン & レシピ事典同上 WordPress AMP 対応モダン Web 制作レッスンブックソシム刊 Dreamweaver デザインブック CC2015 対応同上 WordPress デザインブック & 準拠同上 & デザインブックソシム刊 WordPress レッスンブック & 準拠同上 WordPress ステップアップブック同上 & レッスンブック同上 STAFF 編集 DTP: カバーデザイン : 担当 : エビスコム三宮暁子 (Highcolor) 角竹輝紀 & デザイン現場の新標準ガイド 2017 年 8 月 31 日初版第 1 刷発行著者発行者発行所エビスコム滝口直樹株式会社マイナビ出版 pcbooks@mynavi.jp

アニメーション animation 3 アニメーションの指定 10 animation-delay 3 アニメーションのディレイ 10 animation-direction 3 アニメーションの方向 10 animation-duration 3 アニメーションの再生時間 10 a

アニメーション animation 3 アニメーションの指定 10 animation-delay 3 アニメーションのディレイ 10 animation-direction 3 アニメーションの方向 10 animation-duration 3 アニメーションの再生時間 10 a 3 プロパティ一覧定義機能 @charset エンコードの種類の指定 @font-face 3 Web フォント @import 外部スタイルシートファイルのインポート @keyframes 3 アニメーションのキーフレームの指定 10 @media 3 メディアクエリ @namespace 3 名前空間の指定 @page ページメディアの設定 @page:first

『HTML5&CSS3デザイン 現場の新標準ガイド』特典PDF

『HTML5&CSS3デザイン現場の新標準ガイド』特典PDF