30days

マップの埋め込み 【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日はアクセスセクションをやっていこうと思います!

本日のポイント

・埋め込み系のレスポンシブ対応

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形

HTML

<section id="access">
<div class="inner">
  <div class="title">
    <h2>News</h2>
    <div class="title-line"></div>
  </div>
  <div class="iframe-wrap">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d200277.71165840406!2d138.82767224485505!3d35.35125654473222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6019629a42fdc899%3A0xa6a1fcc916f3a4df!2z5a-M5aOr5bGx!5e0!3m2!1sja!2sjp!4v1558246957091!5m2!1sja!2sjp"
      width="800" height="400" style="border:0" allowfullscreen></iframe>
  </div>
  <div class="info">
    <div class="left">
      <p>住所</p>
      <p>アクセス</p>
    </div>
    <div class="right">
      <p>静岡県富士宮市北山</p>
      <p>〇〇駅から右に5分</p>
    </div>
  </div>
  <div class="btn">
    <a href="#">Googleマップで見る</a>
  </div>
</div>

SCSS

#access {
  padding: 60px 0 102px 0;
  .inner {
    max-width: 1086px;
    width: 100%;
    margin: 0 auto;
  }

  .title {
    text-align: center;
    h2 {
      color: #333333;
      font-size: 60px;
      font-weight: bold;
    }
  }

  .title-line {
    margin: 54px auto 0 auto;
    width: 105px;
    height: 3px;
    background-color: #3f51b5;
  }
  .iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 50%; /* = height ÷ width × 100 */
    margin-top: 105px;
  }
  .iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .info {
    font-size: 16px;
    font-weight: normal;
    display: flex;
    margin-top: 42px;
    padding-left: 40px;
  }
  .left {
    width: 118px;
    p:nth-child(2) {
      margin-top: 15px;
    }
  }
  .right {
    p:nth-child(2) {
      margin-top: 15px;
    }
  }
  .btn {
    text-align: center;
    a {
      padding: 16px 59px;
      color: white;
      background-color: #3f51b5;
      font-weight: bold;
      font-size: 20px;
      display: inline-block;
      position: relative;
      border-radius: 12px;
      box-shadow: 0px 3px 6px rgba(#000000, 0.16%);
      margin-top: 54px;
      &:after {
        content: url(img/access-arrow.svg);
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 18px;
        width: 7px;
      }
    }
  }
}

 

埋め込み系のレスポンシブ対応

ここに関してはHPcodeの記事を参考にしましょう!

記事通りにコードを書けば、埋め込み系のレスポンシブ対応は完成です。

気をつける点は
padding-topを50%
埋め込みhtmlを取得するときに幅800px,高さ400pxで取得する

埋め込みのhtmlをそのまま貼ると、W3Cのエラーが発生するかもしれません。
そのときはframeborder=”0″を消しましょう。

このプロパティはHTML5でなくなったようです。

見出し – 説明を左揃え

この部分ですね、簡単ですが説明します。

HTML

<div class="info">
    <div class="left">
      <p>住所</p>
      <p>アクセス</p>
    </div>
    <div class="right">
      <p>静岡県富士宮市北山</p>
      <p>〇〇駅から右に5分</p>
    </div>
  </div> SCSS 
.info {
    font-size: 16px;
    font-weight: normal;
    display: flex;
    margin-top: 42px;
    padding-left: 40px;
  }
  .left {
    width: 118px;
    p:nth-child(2) {
      margin-top: 15px;
    }
  }
  .right {
    p:nth-child(2) {
      margin-top: 15px;
    }
  }
 

まず、見出しの部分と説明部分でブロックを分けましょう
今回はleft,rightで分けています。

flexで横並べし、leftの幅を指定してあげれば、綺麗な左揃えになります。
僕は最初marginで整えていましたが、上手く揃わない時があるし面倒です笑。

そして、もはやおなじみのnth-child(2)で2行目上部に余白を与えてあげましょう。

これで文字部分は完成です。

別の記述方法の紹介

実は見出し-説明の時には説明リストタグというのがあります。
説明リストタグ by Webliker

この方法でも綺麗に横並べすることが可能です。
こちらの方がHTMLでも見出し-内容が横並べになるので、見やすくなるかと思います。
説明タグでの横並び by ferret

floatを使っているので、floatは全く理解しなくて良いというわけではなさそうですね。

ボタン

ニュースセクションのmoreボタンと作る方法は同じですね。

擬似要素でアローアイコンをつけましょう。

.btn {
    text-align: center;
    a {
      padding: 16px 59px;
      color: white;
      background-color: #3f51b5;
      font-weight: bold;
      font-size: 20px;
      display: inline-block;
      position: relative;
      border-radius: 12px;
      box-shadow: 0px 3px 6px rgba(#000000, 0.16%);
      margin-top: 54px;
      &:after {
        content: url(img/access-arrow.svg);
        display: inline-block;
        position: absolute;
        top: 18px;
        right: 20px;
        width: 7px;
      }
    }
  }

このボタンはメインビジュアルで作ったボタンと似ていますよね。
Sassを使っているなら、mixinを作って共通部分を呼び出すことが可能です。
https://hajipion.com/1002.html

今回の場合以下のプロパティが共通なので、mixinを作っておくといいかもしれません。
・background-color
・color
・box-shadow
・border-radius

しかし、共通部分のプロパティが少なすぎたり呼び出し回数が少ないなら、
わざわざmixinを作る必要もありません。

呼び出す時にどのプロパティをmixinに入れたか忘れてたりするので、
意外とmixinを作らない方が止まらずコードを書けるので楽だったりします。
皆さんも色々試してみてください。

まとめ

今回は埋め込み系のレスポンシブ対応を学びました。
そして、文字やボタンのコーディングがスムーズに書けるようになってきたかと思いますが、
余裕があればぜひ色々な記述方法を試してみてください。

補足

Code pen

See the Pen
アクセス
by hiro (@hirog)
on CodePen.

See the Pen
アクセス
by hiro (@hirog)
on CodePen.