Menuエリアのコーディング | SkillhubAI(スキルハブエーアイ)

Menuエリアのコーディング

続けてMenuのエリアを作っていきましょう。

Menuエリアの構造を作る

ブラウザ幅によってConceptと同じように見えるかもしれませんが、Menuエリアはフルスクリーン幅で表示する部分です。
かつ、画像部分とテキスト部分が50%ずつ(1:1)の割合にしたConceptエリアとは少し幅が違いますよね

divを横並びにするための「row」クラスで囲うのは一緒。
ですが、中身はcol-5ではなく別のクラスを作成する必要があります。

index.html

file

新しく作ったクラスに、それぞれflex:1;と設定します。

どちらもflex:1ならば、1:1でcol-5と同じ結果になるように見えます。
違いは、flex:1とだけ指定した場合は、中に入っている要素の大きさに合わせてフレックスボックスの幅が変動します。

style.css

file

 

とりあえず、これだけの状態でブラウザで見てみましょう。

file

左右に開いてしまっているように見えます。
この原因は、画像がフレックスボックス(<div class="image">)内いっぱいに広がっていないためです。

file

左右カラムの調整をする

cssで、画像がフレックスボックス(<div class="image">)内いっぱいに広がるように設定しましょう。

file

ブラウザ表示を見てみると、左右のボックス間に余白が無いことが分かります。
また、「description」内の文字が端まで伸びきってしまって読みにくいですね。

この2つの問題を改善するために「description」クラスに余白を付けましょう。

file

これでMenuエリアのPC向けレイアウトは完成です。