こんにちは、かなきち(@kanakichi0801)です。
前回の続きで、今回は以下の部分をコーディングしていきます。さっそく作成するという方はこちらをクリック！
今回はちょっと長めです。めげずに一緒にやりきりましょう！
前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！
0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net
1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net
2. 3カラムを隣接セレクタ(li + li)を使ってコーディングした記事↓
blog.mimipen.net
3. 特殊文字を使いメニュー表を実装した記事！↓
blog.mimipen.net
コーディング練習 第四回目！
Google mapを埋め込んでアクセスエリアを実装してみよう！※ target="_blank"やメーラーの立ち上げ方の説明もあります。
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
- 完成コード
- コーディングルール
- デザインデータを元に計画をたてる
- アクセスエリアの大枠
- Google mapを埋め込もう
- アクセス情報エリアを作ろう
- サイトリンクを設置
- ACCESSの完成コード
- まとめ
完成コード
[html]
<div class="access"> <div class="access__inner"> <div class="base__title"> <h2><div>ACCESS</div>アクセス</h2> <div class="deco"></div> </div> <div class="access__box cf"> <div class="access__map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe> </div> <div class="access__address"> <h3>みみぺんカフェ</h3> <div class="access__address__box"> <div>〒100-8111</div> <div>東京都千代田区千代田１−１</div> <div>TEL:000-0000-0000</div> <div class="sup"> <div>営業時間：10:00 〜 17:30</div> <div>定休日：毎週月曜日</div> <div>駐車場：10台</div> </div> </div> <div class="access__staff__message"> スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。 </div> <div class="site__link"> <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div> <div class="site__link__item mail"><a href="mailto:info@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div> </div> </div> </div> </div> </div>
[css]
/*-------------------------------------------------------------- ACCESS --------------------------------------------------------------*/ .access{ width: 1040px; margin: 0 auto; padding: 100px 0 145px; } .access__box{ margin-top: 40px; } .access__map{ width: 680px; float: left; } .access__address{ width: 340px; padding-left: 20px; box-sizing: border-box; float: right; } .access__map iframe{ width: 100%; height: 425px; border: none; } .access__address h3{ margin-bottom: 23px; padding: 17px 0 18px; font-size: 20px; font-weight: bold; border-bottom: solid 3px #74859f; } .access__address__box, .access__staff__message, .access__address__box .sup{ font-size: 14px; line-height: 1.5; } .access__address__box .sup{ margin: 20px auto; padding: 15px; background-color: #eee; } .access__address .site__link{ font-size: 0; margin-top: 25px; } .access__address .site__link .site__link__item{ display: inline-block; } .access__address .site__link .site__link__item + .site__link__item{ margin-left: 20px; } .access__address .site__link a{ display: block; width: 70px; height: 70px; padding: 20px 16px 0; box-sizing: border-box; background-color: #74859f; border-radius: 35px; } .access__address .site__link img{ width: 100%; height: auto; }
もっとレベルを上げてコードを書きたい方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！
以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入ります。
コーディングルール
初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。
1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう！デザインデータはこちらをクリック。
メニューエリアのデザインデータを元に以下のように考える。
かなきちメモ(クラス名や使用するプロパティを考える)
全体をaccess__boxで囲い、左のマップにはaccess__map、右のアクセス情報エリアにはaccess__addressとクラス名をつけ、floatを使って両端に寄せる。ツイッターとメールのボタンはsite__linkというクラス名で囲いinline-blockを使って横に並べよう...
などなど事前に考えます。
アクセスエリアの大枠
アクセスエリアの大枠の構造をHTMLで実装
[HTML]
<div class="access"> <div class="access__inner"> <div class="base__title"> <h2><div>ACCESS</div>アクセス</h2> <div class="deco"></div> </div> <div class="access__box"> <div class="access__map"> </div> <div class="access__address"> </div> </div> </div> </div>
クラス名のルール付けとh2(base__title)のパーツ化を以下の記事で説明しました。
blog.mimipen.net
access__mapとaccess__addressはfloatプロパティを使用して両端に並べたいのでaccess__boxに以下の記事でパーツ化したcfというクラス名を記述しています。
blog.mimipen.net
<div class="access__box cf">
メニューエリアの大枠にCSSを指定する
[CSS]
.access{ width: 1040px; margin: 0 auto; padding: 100px 0 145px; } .access__box{ margin-top: 40px; } .access__map{ width: 680px; float: left; } .access__address{ width: 340px; padding-left: 20px; box-sizing: border-box; float: right; }
記事内で説明した内容ばかりなので説明は省きます。
access__addressというクラスに、box-sizing: border-box;というプロパティと値を指定しています。これはborderやpaddingを指定した幅や高さに含めるという意味です。指定した値は今回で言うwidth: 340pxのことで、含めているのは、padding-left: 20pxになります。
Google mapを埋め込もう
Google mapからHTMLコードをコピーする手順
1.google map にアクセスする。
2.埋め込みたい住所を検索する
3.[共有]をクリックする。
4.地図を埋め込むをクリック
5.HTMLをコピー
HTMLコードを貼り付ける
HTMLコードをマップを貼り付けたい箇所に貼り付けます。access__mapの間に貼り付けます。
[HTML]
<div class="access__box"> <div class="access__map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> </div> <div class="access__address"> </div> </div>
不要なHTMLコードを削除する
HTML5では、frameborderが廃止されました。Google mapのHTMLコードにはいらないコードが多いのでまるっと取ってしまいましょう。好みですが、widthやheightも合わせて削除しました。削除したコードが以下のものです。
[HTML]
<div class="access__box"> <div class="access__map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp"></iframe> </div> <div class="access__address"> </div> </div>
google mapのスタイルを整える
不要なコードを削除するとborderが出てきてしまいます。それも合わせて整えていきましょう。
[CSS]
.access__map iframe{ width: 100%; height: 425px; border: none; }
access__mapに幅を指定していたので、widthは100%とします。frameborderを消し、グレー線が見えてしまっていたのでborder: none;で線を消しました。
以下のような状態になればOKです！
このままでも良いのですが、これだと近くの駅などの周辺情報がわかりませんね。そんな時は倍率を変えましょう。
先ほどのリンクを見ます。
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp
HTMLコードの中に「!4f13.1」というコードがあり、コードの中で「13.1」が倍率を表している部分です。1〜180までの間で指定することができ、1が拡大した時、180が縮小した時です。
今回は、35と指定しました。
※ちなみに、33〜39の拡大率は同じでした。少しづつ数値を変えて調整してみてください。
google mapの倍率に関しては こちらサイトを参考にしました。
アクセス情報エリアを作ろう
アクセス情報エリアのHTML構造
[HTML]
<!-- 〜 省略 〜 --> <div class="access__box"> <div class="access__map"> <!-- 〜 省略 〜 --> </div> <div class="access__address"> <h3>みみぺんカフェ</h3> <div class="access__address__box"> <div>〒100-8111</div> <div>東京都千代田区千代田１−１</div> <div>TEL:000-0000-0000</div> <div class="sup"> <div>営業時間：10:00 〜 17:30</div> <div>定休日：毎週月曜日</div> <div>駐車場：10台</div> </div> </div> <div class="access__staff__message"> スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。 </div> </div> </div>
特に変わったことはしていないので、説明は省きます。
アクセス情報エリアのCSS
[CSS]
.access__address h3{ margin-bottom: 23px; padding: 17px 0 18px; font-size: 20px; font-weight: bold; border-bottom: solid 3px #74859f; } .access__address__box, .access__staff__message{ font-size: 14px; line-height: 1.5; } .access__address__box .sup{ margin: 20px auto; padding: 15px; background-color: #eee; }
h3タグには、border-bottomを使用してラインを引いています。
border-bottom: solid 3px #74859f;
.access__address__box、.access__staff__messageは、クラス名は違いますがフォントサイズと行間が同じなのでまとめて書きました。クラス名をまとめる場合は、「,」でクラスをつなぎます。
サイトリンクを設置
サイトリンクのHTML構造
[HTML]
<div class="access__staff__message"> スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。 </div> <!-- ↓以下を追加 --> <div class="site__link"> <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div> <div class="site__link__item mail"><a href="mailto:info@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div> </div>
ツイッターリンクとメールリンクを設置してみました。順に説明していきます。
ターゲットブランク(target="_blank")とは？
ツイッターのHTML構造を見てみましょう。
<div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div>
<a href="URLが入ります" target="_blank"></a>の部分です。
ボタンを押した時に以下のように、別ウィンドウで開いたことはありませんか？
ピーンとこない場合は、画像自体にリンクを貼り付けたので試しに画像をクリックしてみてください。
この動きを実装するにはaタグにtarget="_blank"という属性を追加します。
ターゲットブランク(target="_blank")は、どういう場合に使うの？
一言で言うと、リンク先のページからリンク元に戻れない場合です。別サイトやPDFファイルにページ移動させたい場合にリンク元へ戻る手段が無いのでターゲットブランク(target="_blank")を使用します。同一サイトでもリンク先のページからリンク元の戻る手段がない場合はtarget="_blank"を使うのが良いでしょう。
メーラーを立ち上げる
次にメールのHTML構造を見てみましょう。
<div class="site__link__item mail"><a href="mailto:info@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>
<a href="mailto:info@test.com">の部分です。※@は特殊文字コードで@の意味です。
ボタンを押した時に以下のように、パソコンやスマートフォンに入っているメーラーが立ち上がります。
この動きを実装するには、メールアドレスの先頭にmailto:という値を追加します。
メーラーが立ち上がってすごく便利じゃんと思うかもしれませんが、基本的にサイトを作成する場合はmailto:は使用しません。コンタクトフォームを作ることをおススメします。ホームページで使われたのソースコードは全世界の人が見れる情報です。このmailto:を使いメールアドレスを記述すると、その情報を悪用してスパムメールを大量に送られる可能性が高くなります。「お客様からお問い合わせをいただきたいのに、スパムメールが多くて大事なメールが見つからない」なんてことが起きてしまうのです。HTMLだけでメーラーを立ち上げることができることだけ覚えておきましょう。
サイトリンクのCSS
.access__address .site__link{ font-size: 0; margin-top: 25px; } .access__address .site__link .site__link__item{ display: inline-block; } .access__address .site__link .site__link__item + .site__link__item{ margin-left: 20px; } .access__address .site__link a{ display: block; width: 70px; height: 70px; padding: 20px 16px 0; box-sizing: border-box; background-color: #74859f; border-radius: 35px; } .access__address .site__link img{ width: 100%; height: auto; }
これまでに勉強した内容を使えばできる部分なので、inline-blockの説明は省きます。
.access__address .site__link .site__link__item + .site__link__itemでは以下の記事で説明した隣接セレクタを使用して、メールボタンの左側に余白をつけました。隣接セレクタについては以下の記事を参考にしてください。
blog.mimipen.net
.access__address .site__link a{ display: block; width: 70px; height: 70px; padding: 20px 16px 0; box-sizing: border-box; background-color: #74859f; border-radius: 35px; }
ボタンの大きさを指定し、box-sizing: border-boxを指定します。先ほど説明した内容ですが、これを入れることでborderやpaddingを指定した幅や高さの中に含めることができます。
指定しないと [指定した値 + padding]の大きさになります。
縦方向の中央寄せは、初心者のうちは少し難しいので今回はpaddingで指定しています。
要素を縦方向の中央寄せにする方法
代表的なものは、table-cellを使う方法、position、flexboxを使う方法があります。※positionを使用した方法を下部で説明しています。
border-radius: 35px; /*幅と高さ70pxの半分の値を指定しています。*/
border-radiusは、角丸にするプロパティです。枠を角丸にするだけではなく、円を作成するのにも役立ちます。
ACCESSの完成コード
サンプルページ
[html]
<div class="access"> <div class="access__inner"> <div class="base__title"> <h2><div>ACCESS</div>アクセス</h2> <div class="deco"></div> </div> <div class="access__box cf"> <div class="access__map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe> </div> <div class="access__address"> <h3>みみぺんカフェ</h3> <div class="access__address__box"> <div>〒100-8111</div> <div>東京都千代田区千代田１−１</div> <div>TEL:000-0000-0000</div> <div class="sup"> <div>営業時間：10:00 〜 17:30</div> <div>定休日：毎週月曜日</div> <div>駐車場：10台</div> </div> </div> <div class="access__staff__message"> スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。 </div> <div class="site__link"> <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div> <div class="site__link__item mail"><a href="mailto:info@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div> </div> </div> </div> </div> </div>
[css]
/*-------------------------------------------------------------- ACCESS --------------------------------------------------------------*/ .access{ width: 1040px; margin: 0 auto; padding: 100px 0 145px; } .access__box{ margin-top: 40px; } .access__map{ width: 680px; float: left; } .access__address{ width: 340px; padding-left: 20px; box-sizing: border-box; float: right; } .access__map iframe{ width: 100%; height: 425px; border: none; } .access__address h3{ margin-bottom: 23px; padding: 17px 0 18px; font-size: 20px; font-weight: bold; border-bottom: solid 3px #74859f; } .access__address__box, .access__staff__message, .access__address__box .sup{ font-size: 14px; line-height: 1.5; } .access__address__box .sup{ margin: 20px auto; padding: 15px; background-color: #eee; } .access__address .site__link{ font-size: 0; margin-top: 25px; } .access__address .site__link .site__link__item{ display: inline-block; } .access__address .site__link .site__link__item + .site__link__item{ margin-left: 20px; } .access__address .site__link a{ display: block; width: 70px; height: 70px; padding: 20px 16px 0; box-sizing: border-box; background-color: #74859f; border-radius: 35px; } .access__address .site__link img{ width: 100%; height: auto; }
まとめ
googleマップの埋め込み方・aタグのターゲットブランクtarget="_blank"・メーラーを立ち上げる方法について説明させていただきました。今回は特にボリュームが多くなってしまい、読みづらくなっていたらすみません。ここまで来たらあと少し！次でPCサイトを完成させます！
わかりにくいところがあればツイッターなどでお気軽にご質問ください。いただいた内容を元にブログのブラッシュをさせていただきます。
以下にHTMLタグもしっかり使ったコードも載せておくので参考に見てみてください。
HTMLタグをしっかり使ったコード
[html]
<section class="access"> <div class="access__inner w__base"> <h2 class="base__title"><span class=" en">ACCESS</span>アクセス</h2> <div class="access__box cf"> <div class="access__map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f35!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe> </div> <div class="access__address"> <h3>みみぺんカフェ</h3> <address> <div class="access__address__box"> <p>〒100-8111</p> <p>東京都千代田区千代田１−１</p> <p>TEL:000-0000-0000</p> <ul class="sup"> <li>営業時間：10:00 〜 17:30</li> <li>定休日：毎週月曜日</li> <li>駐車場：10台</li> </ul> </div> </address> <p class="access__staff__message"> スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。 </p> <ul class="site__link"> <li class="twitter"><a href="https://twitter.com/kanakichi0801"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></li> <li class="mail"><a href="mailto:info@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></li> </ul> </div> </div> </div> </section>
[css]
/*-------------------------------------------------------------- ACCESS --------------------------------------------------------------*/ .access{ padding: 100px 0 145px; } .access__box{ margin-top: 40px; } .access__map{ width: 680px; float: left; } .access__address{ width: 340px; padding-left: 20px; box-sizing: border-box; float: right; } .access__map iframe{ width: 100%; height: 425px; border: none;/*frameborderを消したことでborderがついてるため*/ } .access__address h3{ margin-bottom: 23px; padding: 17px 0 18px; font-size: 20px; font-weight: bold; border-bottom: solid 3px #74859f; } .access__address__box, .access__staff__message{ font-size: 14px; line-height: 1.5; } .access__address__box .sup{ margin: 20px auto; padding: 15px; background-color: #eee; } .access__address .site__link{ font-size: 0; margin-top: 25px; } .access__address .site__link li{ display: inline-block; } .access__address .site__link li + li{ margin-left: 20px; } .access__address .site__link a{ position: relative; display: block; width: 70px; height: 70px; background-color: #74859f; border-radius: 40px; } .access__address .site__link img{ position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 38px; }
初心者用のコードと大きく違う点は、.access__address .site__link imgをpositionを使い縦方向の中央寄せにしていることでしょうか。
上下左右の中央寄せは以下のコードで実現できます
親要素{ position: relative; width: 値; height: 値; } .access__address .site__link img{ position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
上下の中央寄せは以下のコードで実現できます
親要素{ position: relative; height: 値; } .access__address .site__link img{ position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
次の記事はこちら↓
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)