【Bootstrap】架空ECサイト作成の手順⑤
今回で最後になります！
さっそく前回の続きからいきましょう。
Bootstrapで架空サイトを作成してみる
①の記事では、全体像の把握とヘッダーからナビまでのデザイン。
②の記事ではSection1と2のデザイン。
③の記事ではSection3と4のデザイン。
④の記事ではSection5と6のデザインをやってきました。
今回はfooter menuとfooterのデザインについてです。
footer menuのデザイン
ここのメニューの大枠は、Componentsにある、List groupのFlushを用いています。
そのまま用いるとaタグがないので、追加しましょう。
これらを踏まえた上でコードを書くと、構成はこんな感じになります。
<!-- フッターの構成 -->
<footer class="footer row my-5 py-5">
<ul class="col-lg-4 list-group list-group-flush my-4">
<li class="list-group-item"><b>ご利用ガイド</b></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">初めての方へ</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">利用規約</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">個人情報保護方針</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">特定商取引法・古物営業法に基づく表記</a></li>
</ul>
<ul class="col-lg-4 list-group list-group-flush my-4">
<li class="list-group-item"><b>ヘルプ</b></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">お問い合わせ</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">サイトマップ</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">関連情報</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">重要なお知らせ</a></li>
</ul>
<ul class="col-lg-4 list-group list-group-flush my-4">
<li class="list-group-item"><b>株式会社Boot-Fashion</b></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">企業サイト</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">会社概要</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">採用情報</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action">会員ガイド</a></li>
<li class="list-group-item"><a href="#" class="list-group-item-action"></a></li>
</ul>
</footer>
<!-- ============================================================================ -->
</div> <!-- 全体を覆うコンテナ-->
ポイントは、レスポンシブにあわせてulをグループ化して3つ作り、これにcolを適用することです。
そして、lg以降は縦並びになるようにします。
また、文章については実在するファッションECサイトを参考にすればそれっぽく仕上がります！
一番最後の行にある !-- 全体を覆うコンテナ-- は①の記事でheaderの下のロゴから始まるdiv class="container"のことです。
footerのデザイン
コピーライトを書くだけですが、これも上記と同様に実在するサイトを参考にしました。
また、先ほど書いたようにfooter menuまではdiv class="container"が掛かっていますが、このfooterは背景色を画面幅いっぱいまで広げたいので、独立してます。
<!-- ============================================================================ -->
</div> <!-- 全体を覆うコンテナ-->
<p class="copyright bg-dark text-muted p-4 m-0 text-center">© Boot-Fashion Ltd. All Rights Reserved.</p>
まとめ
短いですが、以上で終わりです！
今回このサイトを作成して感じたのは、Bootstrapを使うとやはりレスポンシブ対応がかなり楽だということ。
PC、モバイルの両方とも進めながら確認できるというのはすごく魅力的でした。
また、予めBootstrapで使える機能をわかっていれば、デザインを考える段階で想像しやすかったです。
さすが、フレームワークといったところですね。
難しかったところは、CSSで追加でスタイルを当てたい時に、HTML内でタグに直接style属性をあてるか、head内のstyleタグ内に書くかの区別ですね。
記述が長くなれば後者の方がいいのですが、短く直接わかりやすく見えて、管理しやすいという意味では前者の方が良い気もする。。
この辺りはルールを決めてからコーディングに取り組むといいと思いました。
今回作成したサイトを通して、Bootstrapを使うという選択肢も増えたのはいい経験でした。
Bootstrapは色々と記事を書いてきましたが、単体の記事は恐らくこれで最後になると思うので、次回まとめ記事にあたるものを最後に書いてBootstrapの記事を終えます。
それでは。
