続けてMenuのエリアを作っていきましょう。
Menuエリアの構造を作る
ブラウザ幅によってConceptと同じように見えるかもしれませんが、Menuエリアはフルスクリーン幅で表示する部分です。
かつ、画像部分とテキスト部分が50%ずつ(1:1)の割合にしたConceptエリアとは少し幅が違いますよね。
divを横並びにするための「row」クラスで囲うのは一緒。
ですが、中身はcol-5ではなく別のクラスを作成する必要があります。
index.html
新しく作ったクラスに、それぞれflex:1;と設定します。
どちらもflex:1ならば、1:1でcol-5と同じ結果になるように見えます。
違いは、flex:1とだけ指定した場合は、中に入っている要素の大きさに合わせてフレックスボックスの幅が変動します。
style.css
とりあえず、これだけの状態でブラウザで見てみましょう。
左右に開いてしまっているように見えます。
この原因は、画像がフレックスボックス(<div class="image">
)内いっぱいに広がっていないためです。
左右カラムの調整をする
cssで、画像がフレックスボックス(<div class="image">
)内いっぱいに広がるように設定しましょう。
ブラウザ表示を見てみると、左右のボックス間に余白が無いことが分かります。
また、「description」内の文字が端まで伸びきってしまって読みにくいですね。
この2つの問題を改善するために「description」クラスに余白を付けましょう。
これでMenuエリアのPC向けレイアウトは完成です。