Access部分を作成し、右側にgooglemapを埋め込みます。
２カラムに分け、テキストを入れる
まずは左右のボックスを作り、テキスト部分を入れていきましょう。
map部分は最大幅1140px。
枠組みとしては「Concept」と同じですね。
見出しをcol-5の中に入れ込むので、containerとrowクラスを同じdivに設定します。
今までに作成したクラスを使うだけで出来ます。
左側のブロックに関しては、これだけでPCレイアウト用は完成です。
google mapを追加する
右側のブロックにGoogle Mapを埋め込みましょう。
Google Mapのサイトに行って、検索バーに住所を入力します。
共有ボタンをクリック。
地図を埋め込むをクリックして、<ifreme src から始まるHTMLコードをコピーします。
↓
コピーしたコードを<div class="col-5">の中に貼り付けます。
保存してブラウザで表示を確認しましょう。
Google mapが表示されるようになっているはずです。
google mapのサイズを調整する
ここまでの状態でも、1：1の配置になっているように見えるマップエリア。
しかし、実は左右のボックスのサイズが違っています。
検証ツールで二つのdivを見比べてみましょう。
※画像は結果を組み合わせています
containerクラスはmax-width：1140px。
ですので、その半分を指定しているcol-5クラスは、幅570pxであって欲しいところですよね。
しかし、Google mapを入れた部分は横幅が600px。
親要素の <section class="container row"> からはみ出してしまっています。
これはGoogle mapから張り付けたコード内に、width="600"という記述が入っているためです。
幅が600pxに固定されているのですね。
はみ出さないようにするために、widthの値を％に変更しましょう。
これをやっておくと、スマートフォン幅に切り替えたときも自動的に画面幅に応じたサイズで表示されるようになりますよ。
heightの値の方はそのままでも、お好みで少し小さくして頂いても構いません。
↓
【ブラウザ表示】
これでPC表示用のAccessエリアが完成しました。
mainタグ内もここまでで終わり、次回からはフッターを作っていきます。