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

レスポンシブ入門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表示で上に表示されて、画面幅を狭くすると、フローティングメニューが画面の下に表示されます。
今回は以上です。それではまた。
-
前の記事
レスポンシブ入門2 ビューポートとメディアクエリ 2022.06.13
-
次の記事
レスポンシブ入門4 メインコンテンツの修正① 2022.06.20