CSSのremとemは基準になるfont-sizeの違いで使い分ける
- CSSのremはルート要素、emは使う要素のfont-sizeを基準にします。ただしfont-size自身のemは親要素が基準です。入れ子の計算例と使い分けを解説します。
カテゴリー: ホームページ制作
JavaScriptのclassListはclass名を文字列でつながずDOMTokenListとして操作する
- JavaScriptのclassListは、class名をDOMTokenListとして扱います。contains、add、remove、toggleの違いと、classNameとの使い分けを解説します。
localStorageは同一オリジンへ文字列を保存するが正本データには使わない
- localStorageは同一オリジンのブラウザーへ文字列を保存します。setItem、getItem、removeItemの使い方と、容量超過、削除、正本データとの分離を解説します。
querySelector()とquerySelectorAll()は最初の1件か静的NodeListかで使い分ける
- querySelector()は最初に一致する要素かnull、querySelectorAll()は全件を持つ静的NodeListを返します。戻り値とDOM変更後の違いを解説します。
CSSのbox-shadowは位置、ぼかし、広がり、内側を順に指定する
- CSSのbox-shadowは、横位置、縦位置、ぼかし、広がり、色を順に指定します。inset、複数の影、レイアウトへ与えない影響まで解説します。
fieldsetとlegendはラジオボタンの質問と選択肢を一組にする
- fieldset要素は関連するフォーム部品をまとめ、legend要素は組全体の質問を示します。ラジオボタンのname、id、labelとの役割の違いを例で解説します。
HTML5のpattern属性は入力形式を正規表現で確認する
- HTML5のpattern属性は、input要素の値全体を正規表現で確認します。required属性との違い、入力条件の表示、サーバー側検査までを解説します。
CSSの:nth-child()は同じ親の中で要素の位置を数える
- CSSの:nth-child()は、同じ親を持つ要素を文書上の順番で数えます。odd、even、An+Bの読み方と、:nth-of-type()との違いを具体例で解説します。
CSSのtransitionは変えるプロパティと時間を分けて指定する
- CSSのtransitionは、変化させるプロパティと時間を分けて指定します。基本構文、短縮形、allやdisplayの注意、複数指定を解説します。
CSSのcalc()は割合から固定幅を引く計算に使う
- CSSのcalc()は、100%から固定幅の余白を引くように、割合とpxやemを一つの値で計算できます。空白、box-sizing、代替指定まで解説します。
CSSのopacityとrgba()は子要素まで透明にするかで使い分ける
- CSSのopacityは文字や子要素を含む要素全体へ透明度を適用し、rgba()は指定した色だけを半透明にします。子要素で透明度を戻せない理由と使い分けを解説します。
CSSのbackground-sizeはcoverで全面を覆いcontainで画像全体を収める
- CSSのbackground-sizeでは、coverは縦横比を保って背景領域を覆い、containは画像全体を領域内へ収めます。切り抜きと余白の違い、指定例、確認方法を解説します。
HTML5のdata-*属性はJavaScript用の値を要素へ持たせる
- HTML5のdata-*属性は、要素へページ固有の値を持たせ、JavaScriptからgetAttributeやdatasetで扱えます。命名、文字列変換、標準属性やサーバー側処理との分担を解説します。
CSSのmin-widthとmax-widthで可変幅に下限と上限を設ける
- CSSのmin-widthとmax-widthは、可変幅の要素が狭くなりすぎる場合と広がりすぎる場合に幅を制限します。計算順、はみ出す条件、メディアクエリーとの違いを解説します。
HTML5のinput typeはemail、url、telを入力目的で使い分ける
- HTML5のinput typeにあるemail、url、telを、入力目的、ブラウザーのUIと制約検証、電話番号の書式、サーバー側検証から使い分けます。
CSSのborder-radiusは四隅ごとに水平と垂直の半径を指定する
- CSSのborder-radiusで角丸を作る方法を、四隅の値の順序、水平と垂直の半径、背景とborder、子要素を切り抜く場合の違いから説明します。
