レベル1: 初級編

HTML/CSSの基本的な概念でつまずきやすいポイント

Flexbox 問題集

問題1 align-itemsが効かない問題2 justify-contentで中央寄せできない問題3 flex-growが期待通りに動かない問題4 flex-wrapで折り返されない問題5 flex-directionの影響

Grid 問題集

問題1 グリッドアイテムが表示されない問題2 grid-templateが効かない問題3 グリッドの隙間が開かない問題4 アイテムが重なってしまう問題5 グリッドエリアが機能しない

Position 問題集

問題1 absoluteが効かない問題2 fixedが画面に固定されない問題3 relativeの意味がわからない問題4 top/leftが効かない問題5 stickyがうまく動かない

Display 問題集

問題1 inline要素に幅が設定できない問題2 block要素が横並びにならない問題3 inline-blockの隙間問題4 display: noneとvisibility 問題5 tableレイアウトの問題

Margin 問題集

問題1 マージンの相殺問題2 margin: autoが効かない問題3 親要素からはみ出す問題4 負のマージンの挙動問題5 インライン要素のマージン

Padding 問題集

問題1 box-sizingの影響問題2 パディングで要素がはみ出す問題3 %指定の基準問題4 インライン要素のパディング問題5 背景色とパディング

Width/Height 問題集

問題1 height: 100%が効かない問題2 vwとvhの使い方問題3 min-widthとmax-width 問題4 画像のアスペクト比問題5 calc()の使い方

Text/Font 問題集

問題1 text-alignが効かない問題2 line-heightの単位問題3 文字の折り返し制御問題4 emとremの違い問題5 vertical-alignの謎

Z-index 問題集

問題1 z-indexが効かない問題2 スタッキングコンテキスト問題3 親子関係のz-index 問題4 transformとz-index 問題5 負のz-index

Background 問題集

問題1 背景画像が表示されない問題2 background-sizeの違い問題3 background-positionの基準問題4 背景のスクロール問題5 グラデーションの作り方