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

レスポンシブ入門5 メインコンテンツの修正②
・メインコンテンツの修正
みなさんこんにちわ。中学生のためのプログラミング講座です。今回はレスポンシブ入門編の第5回、最終回です。
前回に続いて、スマホ用のウェブサイトのメインの部分を修正して、サイトを完成させましょう。
今回はまず、フレックスボックスの2つの画像の項目を修正します。
フレックスボックスの中のラーメンの画像は、画面幅を小さくしていくと、このように、画像の縦横比が崩れて縦長の表示になってしまいます。
インデックスHTMLを見ると、フレックスボックスの画像は、「フレックス」クラスのディブの中に、イメージの要素があって、その右の表題と説明文が、別のディブに入っていて、2つともこの構造になっています。
CSSでは、「フレックス」クラスの設定と、
「フレックス」クラスのイメージは、ウィズが50%で、パディングが上下左右に10ピクセル設定されています。ウィズの50%だけが設定されていますので、横幅が十分にあるときには、画像の縦横比率に問題がないのですが、一定の範囲を超えて画面幅が狭くなると、比率が崩れています。
そこで、今回は、スマホ用のコードではなくて、このPC用のコードの「フレックス」クラスのイメージのセレクターの、「ウィズ 50%」の末尾から、改行して、
ここに「ハイト コロン 50% セミコロン」と入力して、
これで縦横比を50%に設定して、
これでブラウザを開いて、ページを更新すると、
このように表示されて、ページの幅を変えても、画像の縦横比が維持されます。
次に、画像の横の表題と説明文が、すこし大きいので、これを修正します。
スタイルCSSでは、「フレックス」クラスではフォントの大きさは何も指定していませんので、
下に行って、スマホ用のコードで、
「ミソ イメージ」の、閉じカッコから、改行して、一行開けて、
「フッター」のセレクターとの間に、「ドット フレックス h2 波カッコ」と入力して、
カッコ閉じを改行して、 「フォント ハイフン サイズ コロン 1レム セミコロン」、
改行して、 「ライン ハイフン ハイト コロン 1.2レム セミコロン」と入力します。
これで、フレックスクラスのh2要素に、フォントサイズと行間を設定して、
これで、ブラウザを開いて、ページを更新すると、 このように表示されます。
さらに、スタイルCSSで、「フレックス h2」の閉じカッコから、改行して、一行開けて、
「ドット フレックス P 波カッコ」と入力して、
カッコ閉じを改行して、こちらは「フォント ハイフン サイズ コロン スモール セミコロン」と入力します。
これで、ブラウザを開いて、ページを更新すると、
このように、ちょうどいい具合に表題と説明文が表示されました。
最後に、店主の画像とその説明文を修正します。
インデックスHTMLでは、「id テンシュ」のディブの中に、「テンシュ ジェイペグ」のイメージ要素と、説明文のp要素が配置されています。
そしてCSSでは、「id テンシュ」のパディングが上下左右に100ピクセル、フォントサイズが20ピクセル、ラインハイトの行間が10ピクセルに設定されています。
そして「id テンシュ」のイメージ要素は、「ボーダーレディウス」が50%で、丸くトリミングされています。
デベロッパーツールを開いて、セレクトアイコンを選択して、
店主の画像にマウスオーバーすると、
「ディブ テンシュ」には、パディングが上下左右に100ピクセル設定されていて、その中に「テンシュ ジェイペグ」が画像そのままの大きさで、300掛ける300ピクセルで配置されています。
そして説明文は、狭い表示領域の中に2行になって表示されています。
それでは、スタイルCSSを開いて、
「id テンシュ」と、テンシュのイメージのコードを、行番号をドラッグしながらなぞって、行を選択して、コントロールキーとCキーでコピーして、
下に行って、「スマホ用の表示」の項目で、
「フレックス」クラスのP要素の下、「フッター」の上の、閉じカッコから、改行して、一行開けて、
コントロールキーとVキーを同時に押して、コピーしたコードをペーストします。
ここに、スマホ用の「id テンシュ」の要素を設定します。
それでは、まず「id テンシュ」は、パディングを「30ピクセル」、
フォントサイズは、「スモール」と設定します。
「ラインハイト」はそのままにしますので、行を選択して、デリートキーで削除します。
そして、「テンシュ」のイメージについては、「ボーダーレディウス」の末尾から、改行して、
「ウィズ コロン 30% セミコロン」と入力します。
これで、ブラウザを開いて、ページを更新すると、
テンシュの画像と説明文が小さく表示されて、ちょうどよく配置されました。
これでスマホ用のサイトの修正ができました。
以上で、レスポンシブ入門編を終わりますが、レスポンシブなウェブサイトの作り方を理解できたでしょうか。今回はスマホ用のサイトを作りましたが、これを拡大していくと、タブレットサイズの表示では少し見にくくなる場合がありますので、時間のある方は、タブレットサイズのウェブサイトも作ってみてください。
それではまた。
-
前の記事
レスポンシブ入門4 メインコンテンツの修正① 2022.06.20
-
次の記事
記事がありません