Boostrap テンプレート ver7

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

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

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

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

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

 

ポイント

 

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

・タブレットのプレフィックスは 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>

 

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

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


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

 

ラップした #mapiframe に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のシュミレーターでひと通り確認し、問題点を全部修正しました。(※実機では確認していません)

以上です。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

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