今回作ったもの
PARK CAFEのページを、スマートフォンでも見やすく表示できるようにしました。
学んだポイント
@mediaを使うと、画面幅に合わせたCSSを書けます。- ヘッダーは、画面が狭いときに縦並びへ変更できます。
- 2カラムのレイアウトは、画面が狭いときに1カラムへ変更できます。
ハンズオンを再現してみよう
STEP 1：作業前の表示を確認する
配布用ファイルを展開します。
VS Codeでフォルダを開き、index.htmlをLive Serverで表示します。
ブラウザの幅を約375pxまで狭くします。
ヘッダーとABOUTセクションが、横に狭く押し込まれることを確認します。
STEP 2：メディアクエリを用意する
style.cssの一番下に、次のメディアクエリを追加します。
@media (max-width: 768px) {
/* スマートフォン向けのCSSをここに書きます */
}このあと追加するCSSは、すべてこの{ }の中に書きます。
STEP 3：ヘッダーを縦並びにする
.headerに次の指定を上書きします。
- 幅：
100% - 左右の余白：
20px - 並び方：
flex-direction: column - 要素の間隔：
15px
.navbarの間隔は20pxにします。
リンクの文字サイズは12pxにします。
保存すると、ロゴの下にナビゲーションが表示されます。
STEP 4：ABOUTを1カラムにする
.about-contentに次の指定を上書きします。
- 幅：
100% - 左右の余白：
20px - カラム：
grid-template-columns: 1fr - 要素の間隔：
30px
.about-imageの高さは220pxにします。
保存すると、画像の下にABOUTの文章が表示されます。
セルフチェック
- 375px幅でヘッダーが縦並びになる
- ABOUTの画像と文章が1カラムになる
- 769px以上で元のPC用レイアウトに戻る
参加できなかった方へ
まずはstyle.cssの末尾にあるメディアクエリを確認しましょう。
次に、画面幅を狭くしてヘッダーとABOUTの表示を見比べましょう。
表示が違うときは、style_answer.cssと見比べましょう。