Boostrap テンプレート ver7

『Bootstrap4で無料テンプレートを作成する』シリーズ7回目です。

今回の作業は主に細かいところをCSSで整えました。

完成形は以下になります。

デモサイト

今回からコードをZipファイルでダウンロードできるようにしました。

無料テンプレート

 
以下、制作するにあたってのポイントをまとめています。

 

ポイント

 

PC・タブレットでは２カラム、スマホでは１カラム

・タブレットのプレフィックスは md

・スマホのプレフィックスは sm

いろいろなサイトを見ると、スマホでカラム落ちにするケースが多いですね。

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <img class="img-fluid" src="https://placehold.jp/150x150.png">
    </div>
    <div class="col-md-6 col-sm-12">
      <img class="img-fluid" src="https://placehold.jp/150x150.png">
    </div>
  </div>
</div>

 

flex-derection

flex-directionはならべる方向を指定するプロパティです。

See the Pen
flex-direction by Masanori Honjo (@masanori_honjo)
on CodePen.

MESSAGE のセクションでは画像とテキストをジグザグにいれています。

スマホでみるときはカラム落ちさせるのですが、2行目は画像とテキストを逆に表示させる必要があります。

Bootstrap4ではFlexユーティリティのクラス（.flex-row-reverse）が用意されているのでこれを使いました。

<div class="row flex-row-reverse">
    <div class="col-md-6" data-anijs="if: scroll, on:window, do: fadeInRight animated, before: scrollReveal">
        <img class="img-fluid" src="images/sec02_02.jpg">
    </div>
    <div class="col-md-6 p-5" data-anijs="if: scroll, on:window, do: fadeInLeft animated, before: scrollReveal">
        <h2>MESSAGE</h2>
        <p>ちかごろ世間で日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
    </div>
</div>

 

Sticky top

ヘッダーがブラウザの最上部に達すると固定するクラスです。Bootstrap4で用意されています。

これにより上からニョキっとメニューがでるJqueryは外しました。

<header class="sticky-top">
    <nav class="navbar navbar-expand-md navbar-light bg-primary">
        <!-- ロゴ -->
        <a class="navbar-brand text-white" href="#">Sample Company</a>
：

 

ヘッダー固定時のページ内リンクのズレを解消

ヘッダーを固定しているのですが、ページ内リンクの際、ヘッダーの高さが邪魔をして、ターゲット要素がズレてしまいます。

これをCSSで解決しました。

/* ヘッダー固定時のページ内リンクのズレをCSSで解消 */
#sec01::before, #sec02::before, #sec03::before {
    content: "";
    display: inline-block;
    height: 56px; /*ヘッダーの高さ*/
    margin-top: -56px; /*ヘッダーの高さ*/
    vertical-align: top;
}

 

ターゲット要素に対して疑似要素を使ってCSSを指定します。

 

Google Maps

GoogleMapAPIは月間28,500ページビューまでは無料ですが、それ以上は課金されます。

無料でGoogleMapを使うならiframeを使います

<iframe src="https://maps.google.co.jp/maps?&output=embed&q=京都駅"></iframe>

 

ただ、このままだとレスポンシブに対応しません。

レスポンシブに対応させるために、まず iframe を div などのボックス要素でラップします。

<div id="map">
    <iframe src="https://maps.google.co.jp/maps?&output=embed&q=京都駅"></iframe>
</div>

 

ラップした #map と iframe にCSSを指定します。

#map{
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

#map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

 

iPadだけ高さ変更

iPadだけ背景動画の下に無駄なスペースができていました。

jQueryでユーザーエージェント判定を行い、iPadのときだけ別にクラスを追加。（※力技）

 

jQuery

 

CSS

/* iPadだけ高さ変更 */
.height-changed{
    height:53vh;
}

 

一応これでChromeのシュミレーターでひと通り確認し、問題点を全部修正しました。(※実機では確認していません)

以上です。

 

-Bootstrap4 テンプレート, 周辺知識