CSSのtransform-originはtransformの基準点を要素内の位置と長さで指定する
- CSSのtransform-originは、transformを適用する基準点を横位置と縦位置で指定します。初期値、keyword、percentage、lengthの違いを解説します。
カテゴリー: ホームページ制作
getComputedStyle()はCSSの適用結果を読み、style属性の指定値と分けて使う
- getComputedStyle()はスタイルシートや継承を含むCSSの適用結果を読みます。element.styleとの違い、resolved value、読み取りと変更の分け方を解説します。
Object.keys()とfor…inは自身の列挙可能propertyだけか継承propertyも含むかで使い分ける
- Object.keys()はobject自身の列挙可能property名を配列で返し、for...inは継承propertyも列挙します。hasOwnProperty()による絞込みと順序の注意を解説します。
getBoundingClientRect()はviewport基準の座標を返し、ページ位置にはscroll offsetを足す
- getBoundingClientRect()のleftとtopはviewport基準です。ページ全体の位置を求める場合はpageXOffsetとpageYOffsetを足し、再計測が必要な場面も分けて考えます。
SVGはviewBoxで内部座標系を決め、preserveAspectRatioで表示領域への収め方を指定する
- SVGのviewBoxは内部座標系を決め、preserveAspectRatioは表示領域への収め方を決めます。meet、slice、noneの違いをコード例で解説します。
Flexboxのjustify-contentは主軸、align-itemsは交差軸をそろえる
- Flexboxのjustify-contentは主軸、align-itemsは交差軸で項目をそろえます。flex-directionで変わる軸、値の違い、中央配置と両端配置の例を解説します。
FileReader.readAsDataURL()で選択した画像を送信前にプレビューする
- FileReader.readAsDataURL()を使い、input type=fileで選択した画像を送信前にプレビューします。load、error、resultの扱いとサーバー検査との違いを解説します。
MutationObserverはDOMの変更をまとめて受け取って必要な処理だけを動かす
- MutationObserverは監視するNodeと変更の種類をobserve()で指定します。MutationRecordのtypeを調べ、必要な更新だけを行い、不要になった監視をdisconnect()で止める使い方を解説します。
JSON.parse()とJSON.stringify()は文字列から値を読む処理と値を文字列へ変える処理を分ける
- JSON.parse()はJSON文字列を値へ変え、JSON.stringify()は値をJSON文字列へ変えます。基本例、SyntaxError、構造確認、循環参照を解説します。
preventDefault()とstopPropagation()は既定動作を止めるかイベント伝播を止めるかで使い分ける
- preventDefault()はキャンセル可能な既定動作を止め、stopPropagation()はイベント伝播を止めます。capture、target、bubbleと仮例で違いを解説します。
FormDataはフォームの文字列とファイルを組み立てXMLHttpRequestで送る
- FormData(form)でフォームの文字列とファイルを集め、append()で文字列やBlobを追加し、XMLHttpRequest.send()でmultipart/form-dataとして送ります。
requestAnimationFrame()は描画ごとに次の更新を予約してアニメーションを動かす
- requestAnimationFrame()は1回の呼び出しで1回の更新を予約します。継続時はコールバック内で次を予約し、handleをcancelAnimationFrame()へ渡して停止します。
matchMedia()は画面幅の数値ではなくMedia Queryの一致をJavaScriptで調べる
- JavaScriptのmatchMedia()はMedia Queryの一致を調べ、MediaQueryListを返します。matches、addListener()、innerWidthとの違いを解説します。
progress要素とmeter要素は処理の進行か既知範囲の測定値かで使い分ける
- HTML5のprogress要素は処理の進行、meter要素は既知範囲の測定値を表します。valueやmax、値が不明な状態、low・high・optimumを解説します。
textContentとinnerHTMLは文字列をテキストとして置くかHTMLとして解析するかで使い分ける
- textContentは文字列をテキストとして置き、innerHTMLはHTMLとして解析して要素の中身を置き換えます。表示例、混在する要素の作り方、確認手順を解説します。
DOMContentLoadedとloadはDOM解析完了か画像を含む読込完了かで使い分ける
- DOMContentLoadedはDOM解析後、loadは画像などの読込後に発生します。DOM操作、画像寸法、document.readyStateによる実行済み判定を解説します。
