レスポンシブ入門4 メインコンテンツの修正①

レスポンシブ入門4 メインコンテンツの修正①
https://youtu.be/yzeGV_jwqJE

レスポンシブ入門4 メインコンテンツの修正①

・メインコンテンツの修正

・フッターの修正

 みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第4回です。

 今回は、スマホ用のウェブサイトのメインの部分を修正していきましょう。
 現在は右側が隠れてしまっていますので、これを修正します。

 インデックスHTMLを開くと、メインの部分は、「id コンテイナー」のディブの中に含まれています。

 次に、CSSを見ると、「id コンテイナー」はウィズが800ピクセルで、上下左右のパディングが30ピクセル、そして「マージン ライト オート」と「マージン レフト オート」で画面の中央に配置されています。

 それでは、行番号の36から、41までを、左クリックでドラッグしながら、数字をなぞって、行を選択して、
 コントロールキーとCキーを同時に押して、このコードをコピーします。

 次に、下に行って、「スマホ用の表示」の項目で、
「ナブ」のセレクターの閉じカッコから、改行して、一行開けて、
コントロールキーとVキーを同時に押して、コピーしたコードをペーストします。

 それではここで、スマホ用の「id コンテイナー」を設定します。
 まず、ウィズは100%と入力して、
 パディングは、0と入力します。
これでスマホの画面幅全体にウェブサイトのメインの部分を表示します。

そして左右のマージンは削除しますので、行番号をドラッグして、この2行を選択して、
デリートキーで削除します。

 これで、ブラウザを開いて、ページを更新すると、
このように表示されます。

 次に、中身を修正していきます。
 表題の「究極の味噌ラーメン 味噌一番」と、「一杯ずつ、心を込めてお作りします」の表題が少し大きいので、これを修正します。

 インデックスHTMLでは、「ディブ コンテイナー」の、h1要素とh2要素になります。

 スタイルCSSでは、h1のセレクターと、「id コンテイナー」の直下のh2要素のセレクターに、2つの表題が設定されていますので、
 43行目から、51行目までを、左クリックでドラッグしながら、数字をなぞって、この行を選択して、コントロールキーとCキーを同時に押して、コードをコピーします。

 そして下に行って、「スマホ用の表示」の項目で、
 「id コンテイナー」の閉じカッコから、改行して、一行開けて、
 コントロールキーとVキーを同時に押して、コピーしたコードをペーストします。

 それではここに、スマホ用のh1とh2要素を設定していきます。
 まずh1のフォントサイズを「1.5レム」と入力して、
 h2は、フォントサイズを、「1.2レム」、
 そして「パディング ボトム」を、「10ピクセル」とします。

 フォントカラーは変更ありませんので、行を選択して、デリートキーで削除します。

 これでブラウザを開いて、ページを更新すると、
 このように表示されます。

 次に、この下の味噌ラーメンの画像を修正します。

 インデックスHTMLでは、味噌ラーメンの画像は、「ミソ id」のディブの中に、「ミソ ジェイペグ」のイメージ要素と、h2要素の「究極の味噌ラーメン」の表題と、P要素の説明文があります。

 CSSでは、「ミソ id」には「パディング ボトム」が60ピクセルだけ設定されていて、
これは、味噌ラーメンの説明文の下の余白の大きさになります。

 それでは、53行目から55行目までを、ドラッグして選択して、コントロールキーとCキーでコピーして、

 下に行って、「id コンテイナー h2」の閉じカッコから、改行して、1行開けて、
コントロールキーとVキーを同時に押して、コードをペーストします。

 それでは「ミソ id」を修正していきます。
 まず、「パディング ボトム」を20ピクセルに設定します。
 そして、末尾から、改行して、「ライン ハイフン ハイト コロン 1レム セミコロン」と入力します。

 これで、ブラウザを開いて、ページを更新すると、このように表示されます。

 次に、CSSに戻って、
「ミソ id」の閉じカッコから、改行して、1行開けて、
「シャープ ミソ img 波カッコ」と入力して、

カッコ閉じを改行して、「ミソ id」の中のイメージ要素に、「ウィズ コロン 100% セミコロン」と入力して、
これで、「ミソ id」の中のイメージ要素を、「ウィズ 100%」にして、画面幅いっぱいに表示します。

 これで、ブラウザを開いて、ページを更新すると、このように表示されます。


 次に、残りの画像の要素はいったん飛ばして、
 一番下の、フッターの領域を修正します。

 インデックスHTMLでは、フッタータグの中に、P要素の文があって、

 CSSでは、フッターにパディングが上下左右に40ピクセル、背景色がグレーに設定されています。

 ここで、デベロッパーツールの、セレクトアイコンを選択して、フッターにマウスオーバーすると、
 フッターの下のパディングの部分と、フローティングメニューが重なっていて、
 フッターのパディングが40ピクセルで、
 フローティングメニューの高さも、40ピクセルで重なっています。
 
 それでは、スタイルCSSで、
 フッターのセレクターの、行番号を、ドラッグして選択して、
 コントロールキーとCキーを同時に押して、このコードをコピーして、

 下に行って、 「ミソ イメージ」の閉じカッコから、改行して、1行開けて、
 コントロールキーとVキーを同時に押して、コピーしたコードをペーストします。

 それではここに、スマホ用のフッターを設定していきます。
 パディングを、「20ピクセル」として、
 その下に、「マージン ハイフン ボトム コロン 40px セミコロン」と入力して、

 これで、フッターの上下左右のパディングを20ピクセル、そして下に余白として40ピクセルのマージンを設定します。
 背景色は変更ありませんので、この行を選択して、デリートキーで削除します。

 これで、ブラウザを開いて、ページを更新すると、このように表示されます。

 次回は、残りの画像の表示を修正して、スマホ用のウェブサイトを完成させましょう。
 今回は以上です。それではまた。