【Bootstrap】架空ECサイト作成の手順①
簡単にトップ画像を作ってみました、マサです。
以前Bootstrapの学習をブログにまとめましたが、その後にそれらの知識を応用しつつ、アウトプットとして3日ほどで架空サイトを作りました。
今回はそのときの手順や気をつけたことをまとめようと思いこの記事を書きました。
割と構成を考えたり、デザインを考えたり、と準備の方でめっちゃ時間を取られたので、いずれ自分が見返して分かりやすいように
- 最低限の機能
- 簡単なアウトプット
- それなりにオシャレ
を目指しました。
ですので、この記事の対象としては、
- 初めてBootstrapを軸として、サイトを作ってみたい方
- 手軽にアウトプットしたい方
になります。
では行きましょう！
Bootstrapで架空サイトを作成する
全体イメージ、準備
初めに流れですが、このサイト作成はBootstrapを軸として作っていますので、Bootstrapの公式からコピペしながらそれを編集して使用するといったイメージです。
簡単におさらいすると、Bootstrapには便利な機能として、
- Content系
- Components系
- Utilities系
がありますね。
要所要所でこれらの使うべき機能を紹介しつつ進めていきます。
構成はこんな感じ
ではまず構成としては、
- 全体イメージ～ナビまで
- Section１、２
- Section３、４
- Section５、６
- フッター～終わり
といった順序で記事を書いていこうと思います。
全体像はこんな感じです。
実際に作成したサイトはコチラ
Boot-Fashion
また、念の為コードもGitHubで公開してます。
カルーセルスライダーを効果的に用いたかったので、ファッションECサイトをイメージして作りました。
コンセプトは、
- モノトーンを基調とした、ネオベーシックスタイル
- シーズンを春に設定し、シーズンコンセプトが「Coexist Nature & Modan -自然と現代の共存-」
- 分かりやすくいえば、モノトーンをベースに自然の色を取り込み、印象を柔らかくしたイメージ
- キーワード...モノトーン、シック、アダルティ、ナチュラル、ベーシック、ネオ、モダン、など
やっぱりアパレル系の仕事をしていたので、このあたりはすぐにパパっと出てきますね。笑
もちろん読み飛ばしてもらってOKです。
ただ、何となく上記のコンセプトを簡単にでも決めておくとサイトで使う色が決めやすいですね。
この架空サイトでも、白・黒・ライトグレーをベースカラーに、imgやリンクで暖色系を少し、といった所に注意してます。
準備すること
次に準備です。
私はIllustratorでロゴを簡単に作成しましたのが、そこに時間を掛けたくない方はなしでOKです。
また、素材には画像を11枚と動画を2つ使いました。
使用した画像と動画の素材は一応貼っておきます。
私もフリー素材を使っただけですので適宜コンセプトに合いそうなものをダウンロードして使ってみてください。
画像はコチラから
動画はコチラから
初めに記述すること
では実践に進んでいきます。
head内に記述するもの
まずやることとしては、head内の記述です。ポイントは、
linkタグでBootstrapの読み込み- 同じく
linkタグでFont Awesomeの読み込み
Bootstrapを使うにはいくつか種類がありますが、簡単なのはCDNを使うことです。
他の方法はここでは詳しく記述しません。
まずは、Bootstrapのサイトからコピーしてきましょう。
分かりやすいように日本語サイトを貼っておきます。
画像の赤枠のところをコピペします。
(青枠の部分は次で使用)
また、Font Awesomeは最後の方で使いますがここの記述を一気に終わらせたいのでまとめてやっちゃいましょう。
Font Awesomeは5のCDN配布を行っていないので、2つ目のサイトからコピーしてきました。
手順は画像の通り。
ここまででだいたい以下のような記述になっているかと思います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Boot-Fashion</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
また、Bootstrapは基本的なスタンスとしてCSSを極力使わずにサイト作成をできるようにしたフレームワークですから、今回はCSSを使わずにやります。
細かい設定でCSSを使いたいときもありますが、すべてHTMLのみで完結させる縛りをするため、style内の記述をすることもありますので、そこは好みでCSSを使ってください。読み込ませる場合は時に順序に決まりはないので、適当な位置にlinkタグを追加しましょう。
<link rel="stylesheet" href="css/styles.css">
また、HTMLの記述にはEmmetを使ってますので(テキストエディタにVisual Studio Codeを使ってますのでEmmetはデフォルトで設定されていて便利)、metaタグの記述もいじってません。
深い意味はないので、そのままでOKです。
！→TABキーを押しただけです。
後は en をhtml lang="ja"に変えただけ。
念の為にEmmetの解説が分かりやすいサイトも参考に貼っておきます。
記述の省略の仕方がBootstrapと少し通ずるところもあり、面白いですよね。
(例えばmargin-bottom → mb など)
そして、早速styleタグの記述ですが、これはぶっちゃけ好みです。
先ほど書いたようにCSSで書きたい場合はそちらに記述します。
styleタグをHTMLで記述する場合は、先ほど記述したlinkタグの下にそのまま追加しましょう。
私は普段CSSの初めにこの記述をするのが慣例化しているので、head内にも同様に書いておきます。
font-familyに関しては、今回メインで使いたいVerdana以外は省略してます。
普段ならHiragino Kaku Gothic ProNやMeiryoをよく使います。
<style> html { font-size: 62.5%; letter-spacing: 2.5px; } body { font-family: Verdana, sans-serif; font-size: 1.4rem; } *, *::before, *::after { box-sizing: border-box; } a { transition: all 0.4s; } a:hover { opacity: 0.4; text-decoration: none; } </style>
一旦head内の記述はこんな感じでしょうか。
bodyの最後に記述するもの
次にbodyの最後にもコピペして記述するものがあります。
上記の画像に示している青枠部分ですね。
最近はJavaScriptの記述も読み込み速度の向上などの観点から1番最後に記述することが多いみたいです。
あまり差は無いみたいですが、メリットはあるので最後に記述します。
詳しくは書きませんので、参考サイトを貼っておきます。
Bootstrapの公式からコピペするだけ。
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
ヘッダー～ナビのデザイン
ヘッダーのデザイン
さて、ようやくヘッダーのデザインです。
ここで使っている機能はComponents系の
- Navs
- Navbar
です。
そしてポイントは、
- ハンバーガーメニュー
- ナビメニューのレスポンシブ化
です。
構成はこんな感じ。
<!-- ヘッダーの構成 --> <header class="header pos-f-t mb-5 pb-5 "> <div class="collapse" id="navbarToggle"> <ul class="nav row bg-dark py-3 mx-auto"> <li class="nav-item col-4 col-sm-1 ml-auto mr-sm-5 mr-lg-0"> <a class="nav-link text-white text-nowrap" href="#">ログイン</a> </li> <li class="nav-item col-4 col-sm-1 mx-sm-5 mx-lg-0"> <a class="nav-link text-white text-nowrap" href="#">会員登録</a> </li> <li class="nav-item col-4 col-sm-1 mx-sm-5 mx-lg-0 mr-lg-5"> <a class="nav-link text-white text-nowrap" href="#">お気に入り</a> </li> </ul> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </header> <!-- ===================================================== -->
NavbarではExternal contentにハンバーガーメニューの作成の仕方があります。
今回はそれと併用して、押したときにメニューが出てくるように Navs も使っています。
ポイントは3行目のところ。公式からコピペするとこの辺りは h5 と span になっていますので、これを Navs で ul > li に変えます。
あとは id と data-target が一致していれば開閉するので、最低限の記述はできたと思います。
また、 li や a に記述しているcolやmrなどはレスポンシブ対応時のものなので自由に記述してOKです。
ここでは col-4とcol-sm-1としているので、sm=画面幅が576pxのブレークポイントで nav-item が右揃え→画面幅を3等分、になります。
更に、画面幅が狭くなっても字が折り返さないようにtext-nowrapを a タグに指定します。
あとはm-1~5、p-1~5の調整です。
1~5の値は、最初にstyleタグでfont-size: 62.5%と設定しているので3の指定で10px分の余白を取ってくれますね。
これでだいたいヘッダーのデザインはできました。
見出しのデザイン
次に見出しのロゴデザインですが、これは簡単です。
ポイントは、
ロゴのイラストに h1 と a と img を併用していることです。
構成から見ていきます。
<div class="container mt-5"> <main> <!-- ロゴタイトルの構成 --> <div class="row justify-content-center position-relative"> <h1 class="col-12 text-hide text-center"> <a class="stretched-link" href="#">Boot-Fashion <img class="img-fluid" src="images/logo.jpg" alt="ロゴ"> </a> </h1> ~
まず、ヘッダーとの違いですが、Bootstrapでdiv class="container"をつけるとデフォルトでmarginやpaddingなどの余白が設定されます。
ヘッダーは画面幅いっぱいに要素を広げたいので、 container から外し、このロゴデザインから内包するようにしたかったのでこういった構成となっています。
この辺りの余白については以前に記事にしているのでコチラをどうぞ。
そしてロゴについては使用している機能は特に無いですが、ポイントは、
- text-hide
- img-fluid
のclass名が付いていることです。
まず、text-hide ですが、これはそのままの通りでテキストを隠すもの。
普通にCSSでやろうとすると、
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
などの記述が必要ですが、Bootstrapでは、text-hideとするだけでOK。めちゃ便利でした。
なお、わざわざそんな記述するのにも理由があって、ここをh1にする理由にもなりますが、UIUX、SEOを配慮しているからです。（h1が無くてロゴだけだと検索エンジンに探してもらいにくくもなりますし）
次にimgについているclass名のimg-fluidですが、これはレスポンシブ対応のためです。
今回使ったロゴ画像は大きさを事前に決めてませんでしたが、このclass名を使うと画面幅が変わってもいい感じに伸縮してくれます。
あとは col-12 を指定して、 justify-content-center を指定してあげることで、画面幅が変わっても常に中心にロゴが来てくれます。
ロゴはこれだけなので簡単です。
ナビのデザイン
最後にナビのデザインですが、これはレスポンシブに遊びを加えていますので、ここまでしなくていいと思います。笑
まず、最低限ここで使う機能ですが、
- Navbar
だけです。
form も入ってきてますが、公式の togglerにこれとそっくりなナビバーがありますのでほぼコピペでOKです。
<!-- ナビバーの構成 --> <div class="row my-5 pb-5 border-bottom border-secondary"> <nav class="navbar navbar-expand-lg navbar-light bg-light col-12"> <a class="navbar-brand pl-2 mx-5 d-none d-sm-flex" href="#" style="font-size: 1.5rem;">HOME</a> <ul class="navbar-nav mr-md-auto d-md-flex d-none"> <li class="nav-item ml-3"><a class="nav-link" href="#">WOMEN</a></li> <li class="nav-item ml-3"><a class="nav-link" href="#">MEN</a></li> <li class="nav-item ml-3"><a class="nav-link" href="#">KIDS</a></li> <li class="nav-item ml-3"><a class="nav-link text-danger" href="#">SALE</a></li> <li class="nav-item ml-3"><a class="nav-link" href="#">TOPICS</a></li> </ul> <form class="form-inline mx-auto mr-md-5 my-2 my-lg-0 pr-2" style="flex-flow: nowrap;"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search" style="font-size: 1.5rem;"> <button class="btn btn-outline-dark btn-lg my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button> </form> </nav> </div> <!-- ===================================================== -->
あとは、画面幅に合わせて余白の調整をし、消すか消さないかを決めるだけです。
一つ注意点を挙げると、1番下の画像にある576px以下の画面幅のときですが、これ、そのままだと検索窓とボタンが横並びを解除してしまいます。
ちょっと見にくいかもですが、flex-flow: row wrapがかかっているためです。
なので、コード12行目の form のclass名に nowrap を追加しています。
以上でヘッダー～ナビまでのデザインは終了です。
次の②ではsection1～2までをやっていこうと思います。
それでは！
