【今日学んだこと】HTML CSS Webデザイン

今日は、Webデザインの勉強をしました。

今日の内容をまとめていきたいと思います。

★今日の内容

■地図を表示する
地図はGoogleが提供している地図サービスである「Googleマップ」を埋め込んて使う。

○お店の情報を記述する
HTMLの<div id="contact" class="big-bg">の部分と「footer」の間に「location」というIDのついた<section>タグを追加しする。
そのなかの「location-info」クラスの付いた<div>タグの中にお店の情報を書く。
住所や電話番号などは<br>タグで改行させる。
地図を表示させるエリアは「location-map」というクラスの付いた別の<div>タグ内に書く。

○Googleマップを表示する
地図はGoogleマップを使用。
まずGoogleマップのWebサイトで表示したい場所の住所を入力。「共有」ボタンが表示されるのでクリック。
続いて表示されるパネルで「地図を埋め込む」をクリック。
コードが表示されるので、サイズを指定して、HTMLの表示したい箇所に貼り付け。

○見栄えを整える
お店の情報と地図が並んでいるので、CSSのFlexboxを使って横に並べる。各要素の幅や余白も調整する。
Googleマップを囲っている<iframe>タグが表示エリアからはみ出してお店の情報に重なっているので、幅を「100%」にしてきちんと収まるようにする。

■Facebookプラグインを挿入する
ページ下部にはFacebook、Twitter、Youtube動画を表示させる。
まずはFacebookプラグインから挿入。

○SNS部分のレイアウトを組む
HTMLで最初にそれぞれの埋め込みコードが入るボックスを作っておく。
地図を表示する<section id="location">の下に「sns」というIDのついた<section>タグを用意する。
その中にそれぞれのSNS用に「sns-box」というクラスの付いた<div>タグを書く。
CSSで背景色をつけたり、Flexboxで横並びの設定をする。

○Facebookプラグインのコードを取得
Facebookのページプラグインを生成するページにアクセスし、項目を設定する。
設定が終わったら下の「コードを取得」ボタンをクリックする。
表示されたパネルの上部にある「iFrame」タブをクリックする。
表示されたコードをHTMLの貼り付ける。
このままではレスポンシブには対応していない。

■Twitterプラグインを挿入する
○Twitterプラグインのコードを取得
Twitterプラグインの生成ページを開くと「Enter a Twitter URL」と書かれた入力欄が表示される。
そこにTwitterのURL(twitter.com/アカウント名)を入力、enterキーを押す。
Here are your display optionsの画面になり、何を表示させたいかを選べる。「Embedded Timeline」をクリック。
コードが表示されるが、サイズをカスタマイズするため「set customization options」リンクをクリック。
変更が完了したら、「Update」ボタンをクリック。コードが表示されるので、コピーしてHTMLに貼り付け。
このままでレスポンシブに対応している。

以上です！