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

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

　前回に続いて、スマホ用のウェブサイトのメインの部分を修正して、サイトを完成させましょう。
　今回はまず、フレックスボックスの２つの画像の項目を修正します。

　フレックスボックスの中のラーメンの画像は、画面幅を小さくしていくと、このように、画像の縦横比が崩れて縦長の表示になってしまいます。

　インデックスHTMLを見ると、フレックスボックスの画像は、「フレックス」クラスのディブの中に、イメージの要素があって、その右の表題と説明文が、別のディブに入っていて、２つともこの構造になっています。

　CSSでは、「フレックス」クラスの設定と、
　「フレックス」クラスのイメージは、ウィズが５０％で、パディングが上下左右に１０ピクセル設定されています。ウィズの５０％だけが設定されていますので、横幅が十分にあるときには、画像の縦横比率に問題がないのですが、一定の範囲を超えて画面幅が狭くなると、比率が崩れています。

　そこで、今回は、スマホ用のコードではなくて、このPC用のコードの「フレックス」クラスのイメージのセレクターの、「ウィズ　５０％」の末尾から、改行して、
ここに「ハイト　コロン　５０％　セミコロン」と入力して、
これで縦横比を５０％に設定して、

これでブラウザを開いて、ページを更新すると、
このように表示されて、ページの幅を変えても、画像の縦横比が維持されます。

　次に、画像の横の表題と説明文が、すこし大きいので、これを修正します。

　スタイルCSSでは、「フレックス」クラスではフォントの大きさは何も指定していませんので、

　下に行って、スマホ用のコードで、
「ミソ　イメージ」の、閉じカッコから、改行して、一行開けて、
「フッター」のセレクターとの間に、「ドット　フレックス　ｈ２　波カッコ」と入力して、
　カッコ閉じを改行して、　「フォント　ハイフン　サイズ　コロン　１レム　セミコロン」、
　改行して、　「ライン　ハイフン　ハイト　コロン　１．２レム　セミコロン」と入力します。

　これで、フレックスクラスのｈ２要素に、フォントサイズと行間を設定して、

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

　さらに、スタイルCSSで、「フレックス　ｈ２」の閉じカッコから、改行して、一行開けて、
　「ドット　フレックス　P　波カッコ」と入力して、
　カッコ閉じを改行して、こちらは「フォント　ハイフン　サイズ　コロン　スモール　セミコロン」と入力します。

　これで、ブラウザを開いて、ページを更新すると、
　このように、ちょうどいい具合に表題と説明文が表示されました。

　最後に、店主の画像とその説明文を修正します。

　インデックスＨＴＭＬでは、「ｉｄ　テンシュ」のディブの中に、「テンシュ　ジェイペグ」のイメージ要素と、説明文のｐ要素が配置されています。

　そしてＣＳＳでは、「ｉｄ　テンシュ」のパディングが上下左右に１００ピクセル、フォントサイズが２０ピクセル、ラインハイトの行間が１０ピクセルに設定されています。
　そして「ｉｄ　テンシュ」のイメージ要素は、「ボーダーレディウス」が５０％で、丸くトリミングされています。

　デベロッパーツールを開いて、セレクトアイコンを選択して、
　店主の画像にマウスオーバーすると、
　「ディブ　テンシュ」には、パディングが上下左右に１００ピクセル設定されていて、その中に「テンシュ　ジェイペグ」が画像そのままの大きさで、３００掛ける３００ピクセルで配置されています。
　そして説明文は、狭い表示領域の中に２行になって表示されています。

　それでは、スタイルCSSを開いて、
　「ｉｄ　テンシュ」と、テンシュのイメージのコードを、行番号をドラッグしながらなぞって、行を選択して、コントロールキーとＣキーでコピーして、

　下に行って、「スマホ用の表示」の項目で、
「フレックス」クラスのP要素の下、「フッター」の上の、閉じカッコから、改行して、一行開けて、
　コントロールキーとＶキーを同時に押して、コピーしたコードをペーストします。
　ここに、スマホ用の「ｉｄ　テンシュ」の要素を設定します。

　それでは、まず「ｉｄ　テンシュ」は、パディングを「３０ピクセル」、
　フォントサイズは、「スモール」と設定します。
　「ラインハイト」はそのままにしますので、行を選択して、デリートキーで削除します。
　そして、「テンシュ」のイメージについては、「ボーダーレディウス」の末尾から、改行して、
　「ウィズ　コロン　３０％　セミコロン」と入力します。

　これで、ブラウザを開いて、ページを更新すると、
　テンシュの画像と説明文が小さく表示されて、ちょうどよく配置されました。

　これでスマホ用のサイトの修正ができました。
　　
　以上で、レスポンシブ入門編を終わりますが、レスポンシブなウェブサイトの作り方を理解できたでしょうか。今回はスマホ用のサイトを作りましたが、これを拡大していくと、タブレットサイズの表示では少し見にくくなる場合がありますので、時間のある方は、タブレットサイズのウェブサイトも作ってみてください。

それではまた。