概要
コードの「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。
HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。
style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタを追記してください。
目的
文字・ブロック要素・親子要素で、中央揃えの指定を使い分けられるようにする
基本のflexboxを試す。
中央揃えは「何を中央にするか」で選びます
中央揃えが効かないときは、CSSを増やす前に「文字を中央にしたいのか」「幅のある箱そのものを中央にしたいのか」「親の中で子要素を上下左右の中央にしたいのか」を確認しましょう。
文字やリンクなどを横方向の中央にする
文字やインライン要素を中央にしたい場合は、対象を含む親要素にtext-align: center;を指定します。
.message {
text-align: center;
}幅のあるブロック要素を横方向の中央にする
カードやコンテンツ枠など、幅が親要素より小さいブロック要素にはmargin: 0 auto;を使います。widthまたはmax-widthがなく、要素が親幅いっぱいに広がっていると、左右の空きがないため中央へ動いたように見えません。
.card {
max-width: 600px;
margin: 0 auto;
}親の中で子要素を上下左右の中央にする
Flexboxでは、中央に置きたい子要素ではなく、その直接の親要素に指定します。
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}課題の進め方と確認方法
- 完成見本を見て、文字・箱・親子要素のどれを中央にするか決めます。
- 該当するclassをHTMLで確認し、
style.cssにセレクタを書きます。 text-align、margin、Flexboxのいずれかを一つだけ試します。- ブラウザーを再読み込みし、ウィンドウ幅を変えても中央を保つか確認します。
- うまくいかない場合は、CSSの読み込み、class名、親子関係、要素の幅を順番に確認します。
よくある間違い
text-align: center;を、中央にしたい文字自身だけに指定しているmargin: 0 auto;を指定した要素が親幅いっぱいで、左右の余白がないjustify-contentやalign-itemsを子要素に指定している- 横方向だけ中央にしたいのに、必要のない
positionを使っている - 複数の方法を同時に追加し、どの指定が効いたか分からなくなっている
先にmargin: 0 auto;で中央揃えする方法で箱の中央揃えを確認し、親子構造が分かりにくい場合はFlexレイアウト練習も参照してください。
公式資料
データ
使用ソフト
VisualStudioCode
答え（作業完了後にみてください。）
中央揃え回答
1 ファイル 0.96 KB
Login is required to access this page
