サロン紹介部分をコーディングするためのヒント

1.レイアウト(配置)

Concept、Menu、Access部分は、２つのボックスを横並びにしている点が共通しています。
ここでも最初に作った「row」クラスが使えます。

また、ConceptとAccessエリアは最大幅が1140px=containerクラス。
中の２つのブロックは50％：50％のレイアウトなのでcol-5クラスが使えます。

この骨組み部分、HTMLでは下記のように書きます。
上下に間隔を開けるために「my-10」クラスも入れました。このクラスも最初に作りましたね。

<!-- Concept -->
<section class="container my-10">
    見出し部分を入れる
    <div class="row">
        <div class="col-5"></div>
        <div class="col-5"></div>
    </div>
</section>

ここからクラスを加えて、learn moreの位置などを設定してみて下さい。

Menu部分は「col-5」クラスではなく、別のクラスを作ると綺麗に設定できますよ。

2.見出し上の装飾

見本では、見出しの上に振られている数字の下に下線が入っています。

数字を囲っているdivもしくはpにクラスを付けて、素直にborder-bottomを指定すると線が端まで伸びてしまいます。
下図のような見た目になるはずです。

数字の下だけに線を引くためには、数字を囲っている部分をブロック要素からインライン要素に変える必要があります。
方法はいくつかありますので考えてみて下さい。

3.Google mapについて

googlemapから埋め込み用のコードを取ってきて、htmlファイルに張り付けます。

これだけで表示はされますが、スマホ幅まで縮めると下図のように横にはみ出します。

これを修正するためには、<iframe>タグの中に入っている「width=""」の値を変更してください。