HTML5のpicture要素は表示条件ごとにsourceを選びimg要素を残す
- HTML5のpicture要素では、sourceのmediaとsrcsetで画像候補を示し、最後にimg要素を置きます。構図の切り替え、記述順、alt、表示確認を解説します。
カテゴリー: ホームページ制作
aria-describedbyは入力欄と補足説明をIDで関連付ける
- aria-describedbyは、入力欄と補足説明を同じ文書内のIDで関連付けます。labelとの役割、基本コード、複数説明の指定、IDと入力検査で混同しやすい点を解説します。
HTML5のoutput要素は計算結果と入力欄をfor属性で対応させる
- HTML5のoutput要素は計算結果を表し、for属性で元の入力欄を示します。小計の実装例、再計算処理、送信時にサーバーで検算する理由を解説します。
JSON-LDは表示用HTMLと同じデータから出力して内容を一致させる
- JSON-LDは表示用HTMLと別々に手入力せず、同じデータから出力します。HTMLへの埋め込み例、項目の対応表、更新時の確認手順を解説します。
HTML5のtime要素は表示文とdatetime属性の機械可読値を分ける
- HTML5のtime要素では、画面に見せる日付とdatetime属性の機械可読値を対応させます。日付、時刻、時間帯付き日時の書式と更新方法を解説します。
HTML5のdatalist要素は入力候補を示すが選択肢を固定しない
- HTML5のdatalist要素はinput要素へ入力候補を示します。list属性とid属性の結び方、select要素との違い、入力値を固定したい場合の検査方法を解説します。
HTML5のmark要素は検索語など文脈上の関連部分を示す
- HTML5のmark要素は、検索語や引用への注目など、別の文脈との関連で目立たせる部分に使います。em要素、strong要素、span要素との違いを例で解説します。
CSSのshape-outsideはfloatした要素の外形へ文章を回り込ませる
- CSSのshape-outsideはfloatした要素の外形へ文章を回り込ませます。circle()の例から、border-radius、shape-margin、通常のmarginとの違いを解説します。
HTML5のtemplate要素はcontentをcloneNode(true)で複製してから文書へ挿入する
- HTML5のtemplate要素は、そのままでは表示されません。contentのDocumentFragmentをcloneNode(true)で複製し、値を設定して文書へ挿入する手順を解説します。
object-fitのcontainとcoverは画像全体を見せるか枠全体を埋めるかで使い分ける
- object-fitのcontainは画像全体を枠内へ収め、coverは縦横比を保って枠全体を埋めます。枠の寸法、切れる範囲、object-positionの決め方を解説します。
figure要素とfigcaption要素は本文から一単位として参照する図と説明を組にする
- figure要素は本文から一単位として参照できる図やコード例をまとめ、figcaption要素で説明を付けます。alt属性との違いと配置方法を解説します。
HTML5のhidden属性は内容が現在の状態に関係するかで使う
- HTML5のhidden属性は、現在の状態に関係しない内容へ指定します。真偽属性としての書き方、CSSによる非表示との違い、切替時の確認方法を解説します。
HTML5のmain、article、sectionはページ全体、独立した内容、章で使い分ける
- HTML5のmain、article、sectionは、ページ固有の主要部分、独立して再利用できる内容、見出しを持つ章として使い分けます。divとの違い、入れ子、確認手順も解説します。
Page Visibility APIではdocument.hiddenで非表示を判定し、visibilitychangeで処理を止めて戻す
- Page Visibility APIではdocument.hiddenでページの非表示を判定し、visibilitychangeで定期処理を停止、再開します。visibilityStateとの違いと実装例を解説します。
CSSのwill-changeは変化するpropertyを必要な要素へ短時間だけ指定する
- CSSのwill-changeは、変化するpropertyをuser agentへ事前に伝えるrendering hintです。指定値、短時間だけ使う手順、過剰指定とstacking contextの注意点を解説します。
img要素のsrcsetは画像候補と密度または幅descriptorを対応させる
- img要素のsrcsetは、画像URLへxまたはw descriptorを対応させます。密度別と幅別を混ぜず、sizes、src、altを含めて設計する方法を解説します。
