PCレイアウトが完成したら、スマートフォン幅でも見やすく表示できるようにcssの設定を行っていきましょう。
ブラウザの検証ツールなどを使い、表示領域が小さくても崩れ・はみ出しが無いか確認しながら作業してください。
1.viewport,@mediaの設定
スマートフォン向けの設定をする前に、htmlファイルの<head>内にviewport指定があるかを確認しましょう。
記述していない方は追記してください。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
次にcssファイルの下部にメディアクエリを設定します。
ヒントをご覧になった方は下記のように.rowのスタイルを書かれているはずです。
（※コメントアウトは無くても問題ありません）
ここから下に、スマホ向けのcssを書いていきましょう。
2.ヘッダー＆ヒーロー部分
ヘッダーは「row」クラスのdivの中を3つに区切り横並びにすることで、ボックスを配置していました。
スマホ幅ではこれを縦並びに変更します。
そして、スペーサーとして使っていたdiv(.space)を非表示に、.global-navは幅を100％に設定しましょう。
次にヒーロー画像の部分です。
今のままでは背景画像が見切れてしまいますし、高さもありすぎですよね。
heroクラスには既に「background-size: cover;」を指定しているので、高さ値を変えるだけで調整することが出来ます。
3.コンテンツ部分
① Concept
コンセプトエリアで調整が必要なのは、Learn moreの位置だけです。
今の状態だと中央に配置されており、上のテキストとの間隔が詰まっていますね。
Learn moreを右に寄せるために、まずcol-5クラスの幅を100％にします。
そして「.learn-more」にmarginを設定するために下記の設定を行います。
style.css
ブラウザで確認すると、右寄りの配置に変わっています。
② Menu
Menuの部分では、PC向けに設定した「padding: 0 6rem;」が効いているのでテキスト部分の幅が狭くなっています。
ですので、こちらはpaddingの値をゼロに変更しましょう。
写真下の数字の間隔が狭いので、margin-topも加えます。
③ Staff
Staffエリアでは、PCモニターを想定してスタッフの写真部分をmin-height: 783px;で指定していました。
スマートフォンで見ると、かなり縦長に感じますね。
スマートフォン表示用に、min-heightプロパティ値を設定し直します。
文字を入れているボックス(.staff-description）も、配置・幅を見やすいように調整してください。
④ Access
アクセスの部分はここまでの設定で、ほぼスマートフォンでも見られる状態になっています。
調整が必要なのはLearn-more部分だけです。
ですが、ここで.learn-moreをセレクタにしてcssを書いてしまうと、①Conceptで使っている部分にも影響してしまいます。
ですので、セクション全体に「map」クラスを新しく加えました。
こうすることで下記のように「mapクラスの中にあるlearn-moreクラス」という限定したスタイル指定が行えるようになります。
index.html
style.css
↓
4.フッター部分
最後にフッターを見本に近づけていきましょう。
まず、フッターナビゲーションが２段で表示されるように設定します。
メディアクエリ内に書くのは下記３つのスタイル指定です。
次に店舗情報（.footer_text）の部分を直します。
設定するのは下記の２項目。
- フレックスアイテムを縦並びにし、文字を中央揃えに変更します。
- 並び順を初期化する＝htmlファイルに書かれている順に戻します。
cssセレクタは半角コンマで区切ることで、一括指定が出来ます。
これでスマートフォン向けのスタイル変更が完了しました。
次回、見直しを行って微調整すれば完成です。