vertical-alignはブロック全体を上下中央に配置するプロパティではない
- vertical-alignが効かない原因は、普通のblock要素へ指定していることです。inline-level、line-height、table-cellを目的に応じて使い分けます。
カテゴリー: ホームページ制作
display:inline-blockの隙間はHTMLの空白文字から生じる
- display:inline-blockでmarginを0にしても隙間が残る原因は、要素間の改行や字下げです。空白を消す方法と、負のmarginを避ける理由を解説します。
CSSのfloat解除は後続要素のclearと親要素のclearfixを使い分ける
- CSSのfloat解除は目的で方法が変わります。後続要素を下へ送るclearと、親要素に高さを持たせるclearfix、overflowを使う場合の違いを解説します。
z-indexが効かないときはpositionとstacking contextの境界を確認する
- z-indexが効かないときは、positionの指定、同じstacking context内の重なり順、親要素のz-indexを確認します。数値を上げても前へ出ない理由をHTMLとCSSの仮例で説明します。
position: absoluteの基準位置は最も近いposition指定祖先で決まる
- position: absoluteの基準位置は、最も近いposition指定祖先が作る包含ブロックです。祖先がある場合とない場合、top・right・bottom・left、relativeとの役割、通常フローへの影響を説明します。
CSSのmarginが相殺する条件を兄弟、親子、空ブロックで分ける
- CSSの上下marginは、同じBFC内で境界を隔てるpaddingやborderなどがないと相殺します。兄弟、親子、空ブロック、負のmargin、BFCの条件を例で解説します。
placeholderとlabelの違いは入力例と項目名の役割にある
- HTML5のplaceholderは入力例や書式の短いヒント、labelは入力欄の項目名です。表示、送信値、requiredの検査、アクセシビリティを分けて説明します。
HTML5のrequired属性は入力必須を示すがサーバー側でも検査する
- HTML5のrequired属性は、input、select、textareaの入力必須を示します。記述例、選択欄の空値、novalidate、サーバー側でも検査する理由を説明します。
CSSセレクタの優先順位は重要度、詳細度、記述順で判断する
- CSSセレクタの優先順位は、重要度と出所、詳細度、記述順の順で判断します。ID、クラス、属性、擬似クラス、要素の数え方と、継承や!importantとの違いを例で説明します。
CSSのbox-sizingでcontent-boxとborder-boxの幅計算を切り替える
- CSSのbox-sizingは、widthを内容領域へ適用するcontent-boxと、padding・borderを含む外寸へ適用するborder-boxを切り替えます。親幅からはみ出す計算例と使い分けを解説します。
HTMLのlang属性はページの言語をhtml要素へ指定する
- 日本語のHTML文書ではhtml要素へlang="ja"を指定します。文字コードとの違い、言語コードの選び方、ページ内で言語が変わる箇所の書き方を解説します。
HTMLの表はth要素とscope属性で見出しとデータを対応させる
- HTMLのデータ表では、見出しセルをth要素にし、scope属性のcolとrowで見出しが対応する方向を示します。td要素との違い、単純な表の書き方、複雑な表の扱いを解説します。
フォームのlabel要素は入力欄とfor属性で関連付ける
- フォームのlabel要素は、for属性と入力欄のid属性を同じ値にして関連付けます。明示的・暗黙的な書き方、name属性との違い、クリックと支援技術で確認する方法を解説します。
ホームページの文字化けはHTMLとHTTPヘッダーの文字コードをそろえて直す
- ホームページの文字化けは、送信されたHTMLの実際の文字コード、HTTPのContent-Type、HTML内のcharset宣言を照合して直します。確認順と修正例を解説します。
レスポンシブWebデザインとは？同じURLとHTMLを画面幅に合わせて表示する方法
- レスポンシブWebデザインは、同じURLとHTMLを使い、Media Queriesで画面幅に応じた表示へ切り替える方法です。別URLや動的配信との違い、実装と確認の順序を解説します。
画像のalt属性の書き方は見えない状況で伝える内容から決める
- alt属性の書き方を、情報画像、装飾画像、リンク画像、画像内文字に分けて解説します。画像が見えないときも、情報と機能を残す判断例を示します。
