簡易ランディングページの作成6日目

9月6日（金）の日記です。

先日は生のHTML・CSSでランディングページを書きましたが、本日は同じWebページを今度はBootstrap4にて書く事にしました。
目的としてはBootstrapの復習もそうですが、やはり実務ではBootstrapを使う機会が多いと思うので、ランディングページも一度はBootstrapで書く経験をしておいた方が良いと判断した為です。また、今まではPC版を作成してからスマホやタブレットへのレスポンシブを追加していきましたが、今回はスマホ版を先に完成させ、そこからタブレット → PC版に発展させていく形を取ります。

結果、無事に完成させる事が出来ましたので、下記にUPしたランディングページのURLを載せておきます。

https://eewano.github.io/landing_page_bootstrap/index.html

感想としましては、...本当にBootstrapは楽で凄いです。先にレイアウトやカラーを決めてしまえば、後は margin や padding の調整でほぼ完成してしまいます。新たに実装したい事も、Bootstrap 独自のクラス名を追加すればほとんどは望む通りに反映されるので、ただただ「凄い」としか言い様がありません。

しかし、Bootstrap の書き方をキチンと理解していないと、思う様なレイアウトにならない事も今回のランディングページの作成で分かりました。「何で row や col の書き方は間違ってないのにブロックを並べて margin 等を設定すると勝手に折り返してしまうのだろう？」という自体にも陥りましたが、これは div の囲み方（ブロック構造）が間違っていた様です。
Bootstrapの肝である、container, row, col の関係と書き方は熟知しておかなければ！　ですね。

また、現代はスマホが主流なので、まずはスマホ版のレイアウトを完成させてからPC版等にレスポンシブを対応させていく方が良いかもしれませんね。というか、Bootstrap の仕組みを考えると、スマホ → タブレット → PCの順序でレスポンシブを対応させるのが最も理にかなっているのかもしれません。