レスポンシブ入門3 ヘッダー画像の表示

レスポンシブ入門3 ヘッダー画像の表示
https://youtu.be/OVRBkkfbz6Y

レスポンシブ入門3 ヘッダー画像の表示

・ヘッダー画像

・フローティングメニュー

 みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第3回です。
 今回は、スマホで表示するためにCSSを編集していきましょう。

 ブラウザの画面は、右にデベロッパーツールを配置して、境界をドラッグして、スマホサイズの画面幅にしておきます。

 まず、「ラーメン 味噌一番」のヘッダー画像ですが、
 スタイルCSSでは、「ウィズ 100%」として、画面幅に対して100%の表示で設定していますので、スマホの表示でも特に問題はありませが、ロゴの左右の余白部分を消して、ロゴだけを画面いっぱいに、大きく表示させてみましょう。

 「インデックスHTML」のファイルを開いて、
 「ヘッダー」タグの中の「イメージ」の要素が、ヘッダー画像になりますので、まず、この親要素の「ヘッダー」を設定します。

 CSSの一番最後の、「スマホ用の表示」の、「アット メディア スクリーン アンド マックス ハイフン ウィズ 599 ピクセル」 の後の波カッコの中に、85行目から、改行して、もう一度改行して、86行目に、タブキーで一段下げて、

 「ヘッダー 波カッコ」と入力して、
 カッコ閉じを改行して、この間に「ウィズ コロン 100% セミコロン」、
 改行して、「オーバーフロー コロン ヒドゥン セミコロン」と入力します。

 このヘッダーをセレクターとするコードで、画像の表示領域を設定します。
 まず「ウィズ 100%」で、スマホの画面幅いっぱいにヘッダーの画像を表示して、
 次に、「オーバーフロー ヒドゥン」で、表示領域から外れた部分を非表示にします。「ヒドゥン」というのは英語で「隠される」という意味で、表示領域からはみ出た部分を隠す、という意味になります。

 次に、ヘッダータグの中のイメージの要素を設定しますので、カッコ閉じから、改行して、一行開けて、
 「ヘッダー img 波カッコ」と入力して、
 カッコ閉じを改行して、ここに「オブジェクト ハイフン フィット コロン カバー セミコロン」、
 改行して、「トランスフォーム コロン スケール カッコ 1.4 セミコロン」と入力します。

 これで、ブラウザを開いて、ページを更新すると、このように、ロゴ部分が大きく、画面いっぱいに表示されました。

 この「オブジェクト フィット」プロパティは、指定した表示領域に画像を表示させるのに便利なプロパティです。
 そしてこの「カバー」というのは、画像の縦横比率を維持したまま、表示領域内の中央に画像を表示する値です。親要素の「ヘッダー」のセレクターで表示領域の大きさを設定して、「オーバーフロー ヒドゥン」で、はみ出た部分を非表示にして、「オブジェクトフィット カバー」でこの領域の中央に画像を表示します。

 「オブジェクト フィット」プロパティの値には、「カバー」の他に、画像の縦横比率を維持せずに、表示領域いっぱいに画像を表示する「フィル」や、縦横比率を維持しつつ、表示領域内に余白を残しながら画像全体を表示する「コンテイン」などの値があります。

 そして次の「トランスフォーム スケール」で、画像を1.4倍に拡大しています。
 このコードを、コントロールキーとスラッシュキーを同時に押してコメントアウトすると、このように、画像全体が画像領域内に配置されますが、再度、コントロールキーとスラッシュキーを同時に押して、アンコメントして、
 「スケール 1.4」で、画像の縦横比率を維持したまま、1.4倍にして、
 これで画像が拡大されて、ロゴの部分だけが表示領域内に表示されます。

 「トランスフォーム」プロパティには、要素の拡大・縮小を設定する「スケール」の他に、要素をX座標・Y座標方向に移動させる「トランスレイト」や、要素を回転させる「ロテイト」などの値があります。

 次に、ヘッダー画像の下にナビゲーションメニューがありますが、これは画面を下にスクロールすると隠れてしまいますので、画面下に常に表示させる「フローティングメニュー」にしてみましょう。

 インデックスHTMLを開いて、ナビゲーションメニューは、「ナブ」タグの中に、「UL」、「UL」というのは「アンオーダード リスト」、順不同のリストですが、この「UL」タグがあって、その中にリストの各項目の「Li」タグがあります。

 そして、スタイルCSSでは13行目の「ナブ」のセレクターと、「UL」のセレクターで、ナビゲーションメニューを設定しています。
 この「ナブ」の項目では、背景色だけを設定していますので、ここにナビゲーションメニューを画面の下に固定して表示する設定を加えていきます。

 それでは、CSSのコードの最後の、「スマホ用の表示」の、「ヘッダー イメージ」の閉じカッコから、改行して、一行開けて、
 96行目に、「ナブ 波カッコ」と入力して、
 カッコ閉じを改行して、波カッコの間に「ポジション コロン フィックスド セミコロン」、
 改行して、「ボトム コロン ゼロ セミコロン」と入力します。

 「フィックスド」というのは、「固定された」という意味で、 「ポジション フィックスド」で、要素を画面内の特定の場所に固定して配置します。
 そして「ボトム ゼロ」で、画面の一番下に配置します。

 これで、ブラウザを開いて、ページを更新すると、
 このように、画面の下にメニューが表示されましたが、左に寄って配置されています。

 メニューが左に寄ってしまった原因ですが、
 デベロッパーツールで、「Li」タグの「アンカー」の要素を選択すると、
 ボックス構造の画面には、コンテンツ領域に「オート 掛ける オート」と表示されています。つまり、ブラウザが「Li」要素の縦横の大きさを自動で設定しているので、一番左の「ホーム」のアンカー要素の幅を基準にして他の要素の幅を設定して、これを左寄せで表示している状態です。「ポジション」の値を「フィックスド」に設定すると、このような現象が起きます。

 そこで、「ナブ」のセレクターの一番最後、「ボトム 0」の末尾から、改行して、
 ここに「ウィズ コロン 100% セミコロン」と入力します。

 これで、ナビゲーションバーを画面幅いっぱいに表示しますので、
 ブラウザを開いて、ページを更新すると、このように、フローティングメニューが画面の下に正しく表示されました。
 この時、画面をスクロールしても、フローティングメニューが下に固定されて常に表示されています。
 それから、画面幅を広くしていくと、ナビゲーションメニューがPC表示で上に表示されて、画面幅を狭くすると、フローティングメニューが画面の下に表示されます。

今回は以上です。それではまた。