【保存版】Bootstrapの学習方法まとめ
こんにちは、マサです。
1月の下旬頃からBootstrapを学習し、その過程と学習のまとめを記事にしてきました。
前回の記事できりのいいところまで進んだので、次の言語の学習に進む前に、自分なりのBootstrap学習ロードマップをまとめておこうと思います。
Bootstrapの学習ロードマップ
どの言語も同じなのですが、インプットしたらアウトプットするというのが大事です。
ですが、Bootstrapの機能すべてでこれを実行するにはかなり時間がかかります。
ですので、ある程度のところで見切りをつけながら効率よくやっていきましょう。
順序としては、
- ①基本的な役割の理解
- ②全体的な機能の理解
- ③必要な機能のインプットとアウトプット
- ④制作物を通してアウトプット
これでいいと思います。
順番に解説していきます。
①基本的な役割の理解
まずは、Bootstrapがどんなものなのかを理解するためのステップです。
最初に書いたこの記事でどんなものかは分かると思います。
Bootstrapは何か？という根本的な部分を掘り下げています。
また、私が学習し初めのときはYoutubeでともすたチャンネルさんを活用しました。
最初の動画だけでいいので見るとかなり理解が深まると思います。
そして、基本的な役割はこれらの記事やYoutubeをそのまま見ていけば理解ができるかと思います。
Layout、Content系のまとめ
Bootstrapのグリッドシステムへの理解は絶対に必要ですが、必ずしも完璧に理解する必要はこの段階ではないと思っていて、2つ目と3つ目に貼った記事でこういった面もあるんだな、くらい理解で頭の片隅に置いておくのがいいでしょう。サラッとでOKです。
②全体的な機能の理解
BootstrapにはComponentsと呼ばれる中に使える機能がたくさんあります。
これの中から必要な機能を選んで枠組みとしていくイメージです。
そして、その枠組の中で更に細かく記述をしていくのに、Layout、Content、Utilitiesが使えます。
最初の2つはそもそもの基本的なところなので、前述した【1. 基本的な役割の理解】で参考記事を貼ってます。
対して、残りの1つUtilitiesはComponentsの補助的な感じで使えるツールのような位置づけだと思っています。
ComponentsとUtilitiesもそれぞれ参考記事をまとめておきました。
Components系のまとめ
機能の種類で似ているものをカテゴリ分けしつつ、機能の紹介記事を書いています。
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
Utilities系のまとめ
Utilitiesに関してはComponentsに比べて量が少ないので、1記事のみです。
ここまでで単体ごとのカスタム機能の使い方はある程度理解できたかと思います。
これを深く理解するのは参考書が正直一番役立つかと思います。
私が買った参考書はこれです。
Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!
- 作者:相澤 裕介
- 発売日: 2018/05/01
- メディア: 単行本
必要機能が網羅的に解説されてあるので理解が深まります。
もう1つ最後まで迷っていたのがこれ。
Bootstrapの参考書を買うならこのどちらかで間違いないでしょう。
ただ、注意点としては1つの制作物を作っていく、という流れでは無いので、ザーッと目を通して使えそうな所に付箋をします。
そして、必要な時に確認するくらいで良いでしょう。順番にやる必要はないです。
③必要な機能のインプットとアウトプット
ざっくりと理解したら次に必要な機能の掘り下げです。
上記に貼った記事でも細かくは内容を掘り下げてないので、主観で大丈夫なので、この機能は使う場面がありそうだな、と思ったところだけをコードをコピペしつつ実際にコーディングしてみます。
私は特にグリッドレイアウトに関してはこうしました。
また、例を挙げるとカルーセルスライダーやカードやフォームなんかは定番で使いやすそうなものですから、自分でも触れておくほうがいいでしょう。
④制作物を通してアウトプット
そして最後のステップですが、制作物を作ってみることです。
私はデザインから自分で考えつつサイトコーディングを行いましたが、大変な分かなり身につきました。
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
また、結局使いませんでしたがやYouTubeにも同じようなレッスンがあったので、当初はこっちをやろうと思っていました。
制作物はどれか1つをやれればいいです。Bootstrapはそこまで時間を掛けすぎないほうがいいと思いますので。
【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の記事を終えます。
それでは。
【Bootstrap】架空ECサイト作成の手順④
今回でメインの部分は終わりです。
さっそく前回の続きからいきましょう。
Bootstrapで架空サイトを作成してみる
①の記事では、全体像の把握とヘッダーからナビまでのデザイン。
②の記事ではSection1と2のデザイン。
③の記事ではSection3と4のデザインをやってきました。
今回はSection5と6のデザインについてです。
Section5のデザイン
画像を見ていただければわかるように、Section5は2つのコンテンツで構成されています。
まずは、左側。Newsの部分ですが、ポイントはクリックで開閉する機能をつけていることです。
また、トップのNewsはデフォルトで開いていて、Newと書いたBadgeをつけています。
まず、この開閉するバーはアコーディオンと言いますが、BootstrapではComponentsのCollapseにあります。
Accordion exampleの欄ですね。
また、併用しているBadgeも同じくComponentsにありますね。
構成はこんな感じになっています。
<!-- アコーディオンとカードの構成 -->
<div class="row my-5 mx-lg-4 py-5">
<!-- アコーディオン -->
<div class="accordion col-lg-6" id="newslist">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0 row mx-auto">
<button class="btn btn-light px-3 d-sm-flex" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p class="news-item-text text-nowrap text-left m-0"><time class="pr-sm-4 text-black-50" datetime="2020-00-00">2020.00.00</time></p>
<p class="news-item-text text-nowrap m-0">配送料無料キャンペーン実施中！！
<span class="badge badge-danger text-nowrapmx-3 p-2 my-auto">New</span></p>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#newslist">
<div class="card-body">
<p class="news-item-text my-3">オンラインストアでお買い上げのお客様は購入金額に関わらず、配送料が無料になります。<br>
ぜひこの機会にご利用ください！</p>
<p class="news-item-link mt-5 mb-3"><a class="text-danger" href="">オススメアイテムをチェック！＞</a></p>
<p class="news-item-link"><a class="text-danger" href="">キャンペーン詳細はコチラ！＞</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-light collapsed px-3 d-sm-flex" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<p class="news-item-text text-nowrap text-left m-0"><time class="pr-sm-4 text-black-50" datetime="2020-00-00">2020.00.00</time></p>
<p class="news-item-text text-nowrap m-0">〇〇に春アイテムが掲載！！</p>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#newslist">
<div class="card-body">
<p class="news-item-text my-3">今週発売のファッション誌「〇〇」の「Spring Item特集」ページにブランドアイテムが掲載されています。ぜひ、御覧ください。</p>
<p class="news-item-link mt-5 mb-3"><a class="text-danger" href="">詳細はコチラ！＞</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-light collapsed px-3 d-sm-flex" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<p class="news-item-text text-nowrap text-left m-0"><time class="pr-sm-4 text-black-50" datetime="2020-00-00">2020.00.00</time></p>
<p class="news-item-text text-nowrap m-0">スタッフスタイリング更新しました！！</p>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#newslist">
<div class="card-body">
<p class="news-item-text my-3">春のイチオシアイテムをBoot-Fashion精鋭のスタッフたちが着こなしてくれました。</p>
<p class="news-item-link mt-5 mb-3"><a class="text-danger" href="">詳細はコチラ！＞</a></p>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
ほぼコピペで済むので、注意するところはこれまでと同様に、レスポンシブ対応くらいですね。
画面幅が狭くなったときに文章が折り返さないように、text-nowrapはなるべく使うようにしています。
他のポイントとしては、初めに開いておきたい要素には aria-expanded="true"で指定することや、 開閉する動きをつけているので、data-targetとidを一致させるなどですね。
それ以外は細かい余白、配置の調整なので、コードを見れば分かるかと思います！
また、Badgeの使い方がいまいちな場合、ComponentsにあるList groupを参考にするのが分かりやすいと思います。
次に右側の部分ですが、ここにはSection4で使った、画像の上に文字をつけるカードを使っているので、基本的な使い方は前回と全く同じです。
<!-- サイドのカード -->
<div class="card bg-dark text-white recruit-img col-lg-5 col-8 mx-auto mr-lg-4 ml-lg-4 p-0 my-5 my-lg-0">
<img class="img-fluid w-100 h-100" src="images/recruit-min.jpg" alt="" style="min-width: 360px; min-height: 260px;">
<div class="card-img-overlay recruit-content">
<h5 class="card-title mt-5 pt-5">
<a href="#" class="card-link stretched-link">
<b>私達と一緒に</b><br>
<b>働いてみませんか？</b>
</a>
</h5>
</div>
</div>
<!-- =================================================== -->
</div> <!-- アコーディオンとカードを覆うrow-->
<!-- ============================================================= -->
ポイントは写真に薄暗い背景色を追加して、白地の文章を目立つようにしているところです。
よく見るデザインですよね。これに関しては疑似要素を使うので、head内のstyleタグかCSSに書いていきます。
.recruit-img {
position: relative;
height: 100%;
}
.recruit-img::before {
content:'';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
background-color: rgba(0, 0, 0, 0.3);
}
あとは同じくレスポンシブ対応で細かく書いていけばOKです。
また、imgタグに付いているstyleタグはimgの大きさを予め編集しておけば必要ありません。。
Section5に関してはこれくれいです。
Section6のデザイン
ここのデザインはSNSなどへの流入ですね。最近はECサイトでも多いと思います。
head部分を記述した最初の記事でFont AwesomeのCDNを貼り付けましたが、ここで使います。
<!-- コンタクトの構成 -->
<div class="row my-5 py-5 contact bg-light">
<p class="col-5 mb-5 mb-lg-0 mx-auto p-0 pl-md-5 align-self-center" style="white-space: nowrap; min-width: 210px;"><b>Boot-Fashion Offical</b></p>
<ul class="col-8 mx-auto col-lg-6 nav">
<li class="nav-item mx-auto mx-md-5">
<a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item mx-auto mx-md-5">
<a class="nav-link" href="#"><i class="fab fa-line"></i></a>
</li>
<li class="nav-item mx-auto mx-md-5">
<a class="nav-link" href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="nav-item mx-auto mx-md-5">
<a class="nav-link" href="#"><i class="fab fa-facebook-f"></i></a>
</li>
</ul>
</div>
<!-- ================================================================= -->
</main>
左側のBoot-Fashion Offical と書いてあるpタグの部分に関してはレスポンシブ対応に苦戦しました。。
Section5のときと同様、テキストを折り返さないようにして、余白をきれいに揃える必要があります。
また、この
とアイコンの位置関係はmd以前で変わり、縦並びになります。
ただ、アイコン同士は画面幅に関わらずに横並びにしたいので、 Navsの機能を使うため、class名に nav やnav-itemを用いています。
Section6に関してはこれくらいです。
まとめ
今回はSection５、６のデザインについてでしたが、ほぼ以前に使った機能でデザインは進めていく感じでした。
メインで使った機能は、
- Collapse(Accordion)
- Badge
- Navs
でした。
次がラストのフッターのデザインについてです。
それでは。
【Bootstrap】架空ECサイト作成の手順③
では、さっそく前回の続きからいきましょう。
Bootstrapで架空サイトを作成してみる
前々回の記事では、全体像の把握とヘッダーからナビまでのデザインを、前回の記事ではSection1と2のデザインについて見ていきました。
今回はSection3と4のデザインについてです。
Section3のデザイン
ここのデザインで使っている機能は少しSection2と似ていて、同じようにカードを使っていきます。
構成はこんな感じ。
<div class="row topics card-deck pt-5 border-bottom border-dark"> <!-- 同じ構成のカードが上に2つありますが、カットしています。 --> <div class="col-lg-4 col-md-6 my-5"> <div class="card bg-dark text-white p-0 h-100"> <!-- カードアイテムを囲うdivにh-100を指定することで、残りの3つとサイズが異なっても高さを合わせることができる --> <img class="cadr-img img-fluid w-100 h-100" src="images/topics-3-min.jpg" alt="" style="min-height: 470px; object-fit: cover;"> <!-- 中身の多い3枚目のカードは中身がはみ出さない最低の高さをmin-heightで指定 --> <div class="card-img-overlay topic-item"> <h5 class="card-title"> <b>Recommend</b><br> <b>Styling</b></br> <b>&</b><br> <b>Item</b><br> <b>Collection</b><br></h5> <p class="card-text my-5 py-5 py-lg-0 my-xl-5 py-xl-5"><b>ユーザーに人気の商品をスタイリングと併せてピックアップ。</b></p> <a href="" class="card-link stretched-link">View Now</a> </div> </div> </div> </div> <!-- cardを囲う --> <!-- ========================================================== -->
ポイントはまずSection2で使ったカードの違いですが、3つ目の div を見れば違いが分かります。
card-img-overlay です。
このclass名を使用することでカードの背景の上に文字を重ねることができます。
そして、Section2でも使った card-deckを親要素にすることで、並んだ3つのカードがくっつかずに均等に配置されます。
その上でSection2と同様に、レスポンシブ対応すれば大体はOKです。
また、コメントでも書いてあるとおり、画像のサイズに関しては予め統一しておけば必要のないタグもあります。
これはSection1のCarouselでやったことと同じですね。
ただ、上記のコードにも書いているように高さの指定はしましょう。
2つ目のコメントにある h-100の指定はカード同士の高さを揃えるためで、カードを囲う要素に指定してあげることで、高さがバラバラになりません。
3つ目のコメントのmin-heightの指定も同様に、中身の文章がカードからはみ出さないようにするためで、記述することで、例えば中身の文章が追加されても、この設定をしておくことで、きれいに収まります。
(今回のデザインだとこのmin-heightを指定しないと、 md~lg の間で要素が画像からはみ出てしまう）
正直このあたりの指定はやっていてややこしかったので、面倒な場合は例えば各要素の高さを%指定するなどの対応をする方がシンプルになるかと思います。
また、h-100 のようなサイズの簡易的な書き方はUtilitiesのSizingの欄に書いてあります。
また、Section2と同様にStretched linkも使用しています。
こちらはhover時に半透明になるように設定。
Section3に関してはこれくらいです。
Section4のデザイン
では次にSection4のデザインです。
これは簡単です。
ムービーを使用していますが、Bootstrapの機能はムービー用に便利なものが用意されています。
まずは構成から。
<!-- ムービーの構成 --> <h2 class="heading py-5 my-5 text-center" style="line-height: 100px; vertical-align: bottom;">Movies</h2> <div class="row no-gutters pb-5 border-bottom border-dark"> <div class="col-lg-5 ml-lg-auto mr-lg-4 embed-responsive embed-responsive-16by9"> <video src="moves/move-1.mp4" controls autoplay muted playsinline></video> </div> <div class="col-lg-5 mr-lg-auto ml-lg-4 mt-5 pt-5 mt-lg-0 pt-lg-0 embed-responsive embed-responsive-16by9"> <video src="moves/move-2.mp4" controls></video> </div> </div> <!-- ========================================================== -->
使用している機能はEmbedです。
これはUtilitiesにあります。
またvideoタグの使い方に関してはコチラの記事を参考にさせていただきました。
また、class名に書いている no-gutters は余白を少し調節するために使っています。
row や col と併用して使うものですが、これの使い方については以前に記事にしているので興味ある方はどうぞ。
あとは、レスポンシブに合わせて余白を調節していけばOKです。
動画の幅と高さについては Embed を使用しているので自動的に調整されますし、便利ですね。
まとめ
今回はSection３、４についてまとめました。
使った機能は主に
- Cards (card-img-overlay)
- Embed
です。
細かいものも含めると、Stretched link やSizingもありますね。
特に最近は広告でも動画を使っていたり、YouTubeの人気っぷりなど、動画を使うことも増えてきているので、それに付随するタグの使い方などは勉強になりました。
次はSection５、６です。
それでは
【Bootstrap】架空ECサイト作成の手順②
では、前回の続きからいきます。
Bootstrapで架空サイトを作成してみる
前回の記事では全体像の把握とヘッダーからナビまでのデザインを見ていきました。
今回はSection1と2のデザインについてです。
Section1のデザイン
まずはどういった構成になっているかですが、
Section1にはBootstrapのComponents系の機能の1つである、Carouselが使われています。
今回使用したのは、With indicatorsにあるものです。
また、画像はimagesフォルダの中のcarousel-1~3の画像を使用しています。
<!-- カルーセルの構成 --> <div class="row m-5"> <div id="c1" class="col-md-8 mx-auto carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#c1" data-slide-to="0" class="active"></li> <li data-target="#c1" data-slide-to="1"></li> <li data-target="#c1" data-slide-to="2"></li> </ol> <div class="carousel-inner mx-auto"> <div class="carousel-item active"> <img class="d-block w-100 img-fluid" src="images/carousel-1.jpg" alt="" style="max-height: 430px;"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="images/carousel-2.jpg" alt="" style="max-height: 430px;"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="images/carousel-3.jpg" alt="" style="max-height: 430px;"> </div> </div> <a class="carousel-control-prev" href="#c1" role="button" data-slide="prev"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#c1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!-- ====================================================== -->
ほぼコピペで済むので、ポイントはあまりないですが、前回のロゴのときにもつけたclass名、 img-fluid をつけています。
これでレスポンシブ対策はOK。
また、ウィンドウ幅が大きい時には画像が大きくなりすぎるので、 row と col を使用して、 md以降は少し小さくなるように調整しています。
中央寄せの方法について、この場合は colを使用しているので mx-auto としましたが、代わりにこうしても結果は同じです。
<div class="row m-5 justify-content-center"> <div id="c1" class="col-md-8 carousel slide" data-ride="carousel">
justify~ の場合は親要素のclass名につけることだけ注意ですね。
これで画面幅が大きくなったとき、2:8:2で両端に余白を取ってくれます。
あとは、imgにそれぞれついている styleタグですが、これは自分のミスです。笑
Photoshopで編集する時に画像の大きさを統一しなかったためスライドするたびに画像の高さが変わっていました。
ですので、1番小さい高さの画像の高さにあわせてそれ以上大きくならないように max-height を設定しています。
これは画像の大きさが統一されていればいらないです。
では、Section1についてはこのくらいですので、次に行きましょう。
Section2のデザイン
ここで使用している機能は、
- Cards
- Buttons
- Stretched link
です。
上の2つは先ほどのCarouselと同様にどちらもComponents系の欄にあります。
Stretched link は Utilities にあります。
Cardsの使用
まずは Cards からですが、
画像のように連続したカードを並べたいので、Card decksにあるカードのタイプを使います。
ここに書いている通りで、カード同士が接触しません。
この機能を用いて、カードを4つ作成します。
<!-- カード(New Arrival)の構成 --> <h2 class="heading pt-5 my-5 text-center border-top border-secondary" style="line-height: 100px; vertical-align: bottom;">New Arrivals</h2> <div class="row card-deck pt-5"> <!-- カード全体を囲う--> <div class="col-lg-3 col-md-6"> <div class="card shadow-sm mb-5 bg-white rounded"> <img crass="w-100 img-fluid" src="images/new-arrivals-1-min.jpg" alt="" style="object-fit: cover; height: 200px;"> <div class="card-body"> <p class="card-text">Tops</p> <h5 class="card-title mb-5">¥5,500-</h5> <a class="stretched-link" href=""> <p class="text-secondary text-right m-0" style="font-size: 1.4rem;">more...></p> </a> </div> </div> </div> <!--上記の繰り返しを3つ--> <div class="row justify-content-end my-5 mr-1 border-bottom border-dark"> <button type="button" class="btn btn-outline-secondary btn-lg mb-5 mr-5">View more</button> </div> <!-- ====================================================== -->
使っているclass名はほとんど初歩的なものなので、自由に使用すればOKをだと思います。
ここでのポイントは、 col を lg と md の両方使用していることです。
画面幅が992pxを超えたら4つのカードがすべて横並びになるようにしているため、col-3 となり、768px～991pxの間は2つずつにしたいので col-6 として、それ以下は col を解除し、カードが縦並びになるようにしています。
また、img に付いている style タグですが、これは公式からコピペした svg タグを消して代わりにこちらで height を設定したためです。
object-fit: cover; は平たく言えば、画像の自動トリミングのためのタグですね。
大きさを設定しなくても中心を捉えてくれます。
カードに関してはこんな感じです。
Buttonsの使用
Buttons はカードの下にある View more のことです。
Outline buttons を使用しています。
あとは、余白と位置調整を使って好きな場所に移動したらOK。
Stretched linkの使用
Stretched link は親要素に内包されている aタグのclass名につけるだけで、その親要素の内部にあるものを aタグで覆ってくれる便利な機能。
先ほどのHTMLの場合 aタグがカード全体を覆ってくれているので別ページに遷移しやすくなっています。
また、このとき more にアンダーラインがでるようにするのは別途スタイルの記述が必要です。
.card-body > a:hover > p { text-decoration: underline #6c757d; }
Section2に関しては以上です。
おわりに
今回はSection1と2のデザインについてでした。
使った機能は、
- Carousel
- Cards
- Buttons
- Stretched link
です。
個人的にはCarouselとCardsのレスポンシブをどうしようか、というところで苦戦しましたが、なんとかきれいに収まりました。
次はSection3と4についてです。
それでは
【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までをやっていこうと思います。
それでは！
【HTML/CSS】学習に役立つツールと効率的なやり方④【その他編】
さて、今回で最後です。
HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。
HTML/CSSの学習に欠かせないツールとは
前回までの3回の記事でプログラミング学習する方法として、以下を挙げました。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
以前も書きましたが、私はスクールには通わず独学で勉強を進めているのでそこはよくわかりません。
しかし、それ以外に関しては色々と使ってきました。
今回は主にその他の勉強方法について私が使っていて感じたこと、オススメの手順を書いていきます。
その他の学習方法とは
noteやブログ、Twitterを活用する
学習サイトや動画、参考書での学習の他にできる学習方法とは何でしょうか？
それは他の先輩エンジニアのnote、ブログ、Twitterなどの媒体を活用して学習を進めることです。
活用方法としてはざっくりと2つに分かれて、
- 教材などの実践するツールとして活用
- 進め方などのスケジュール管理を参考にして活用
このどちらかになります。
分かりにくいので一言で言うと、
前者が学習そのもののやり方で、後者が学習を効率良く進める為のやり方です。
それぞれ詳しく書いていきます。
実践ツールとして活用する学習方法
前者の実践ツールとして使う場合はこれまでの自分の学習スケジュールの中に埋め込むもので、前回までの記事でも紹介してきた参考書や動画、学習サイトと進め方は同じようなものです。
例を出すと有料noteや、Twitterで発信している方の作っているコーディング教材などです。
では、私が使ってよかったものを挙げます。
くりのすけさんのnote教材
難易度的には、Progateやドットインストールを終えて次にアウトプットの学習を進めたいときにどうしよう、、といった方向けです。
実際にWeb制作で活躍している方の実践で活用できるnoteですから、これほど貴重なものはないですよね。。
私もかなり勉強になりました！
時間短縮の為にサクッと成長したい人には1番オススメです。また、前回の記事含め私のように色々な学習ツールを使ってみたい方は、順序としてはProgateの道場やドットインストールで｢ウェブサイトを作れるようになろう｣を終えた段階で取り組む方がいいと思います！
【無料公開】
— くりのすけ＠WEB制作×副業 (@kurinosuke32) 2020年1月2日
昨年から、コーディング練習note①～⑥を投稿してます！
現在、note①に関しては無料公開してます！
興味ある方は、この機会に勉強してみてください💪
✅Progateの後、悩んでいる方
✅サイト模写に挫折しそうになっている方にオススメです❗https://t.co/kDWpW4cEI6
個人的にはこのnoteと前回に紹介した｢HTML5/CSS3 モダンコーディング ｣の参考書の2つを活用するのが1番の効率良く成長できると思ってます。
色々と試してきた中で特に成長できたものだからです。
これすけさんのnote教材
HTML/CSSを勉強している方でも、特にデザイン系のことが知りたい！という方には特にオススメです！
コーディング作業自体の難易度は先ほどのくりのすけさんのnoteとさほど変わらないと思いますが、こちらはデザインカンプの作り方から紹介されているので、デザイン方面でめちゃくちゃ勉強になります！
ですので、HTML/CSSを勉強し始めた方が今すぐに、という訳ではないですが、その後でPhotoshopやIllustrator、XDなどのAdobe系を勉強したいなぁ、という方は将来的に絶対買っておいて損は無いnoteであると言えます。
コーディングは出来るけどデザインは出来ない…という方に1からWebサイトをデザインするノウハウをまとめてます✍️
— こばやす✍️Webデザイナー (@kobayas_s) 2020年1月10日
①現場で使う構成の見本
②ワイヤーフレームの作り方
③デザインレイアウト
④デザインのブラッシュアップ
⑤レスポンシブデザイン方法
が全て詰まってます👍https://t.co/nbClZjuQTm
進捗管理などの参考として活用する方法
後者のこちらはTwitterやブログで発信されている学習の進め方などのまとめですね。(有名な例を出すとデイトラ、マナブさんの学習ロードマップなど)
ブログタイトル的には先ほどの前者の方を指すのでしょう、なので少しタイトルとはズレるかもしれませんが、それらを含め効率的に学習を進めていくためのスケジュール管理に他の先輩エンジニアたちの経験を活かすというのは非常に大事なことですので、一緒に紹介します。
私はこのスケジュール管理を初めに参考にしつつ、学習を開始しましたが途中で迷走せずに済みました。
30DAYSトライアル
これは先ほど少し触れましたし、以前記事でも紹介しました。
自分の最終目標に向けて、30日間を1セットとして、1st～3rdまで段階的に学習を進めていけるもので、東京フリーランスさんのブログで紹介されています。
特に勉強し始めた初心者の方だとまず初めにスケジュール管理に困るはずです。
ですので、これを使えば次に何をどう勉強すればいいかが明確になるので、自分で中長期的なスケジュールを立てられない方は絶対に活用するほうがいいです。
マナブログさんのロードマップ
マナブさんの学習ロードマップですね。
私はこのロードマップを見て、それを自分なりに変えつつ進めていきました。
ざっくりと学習の順序とモチベーションをあげるにはオススメの記事です。
おわりに
さて、今回は前回までのように引き続き学習サイトや動画、参考書以外の学習方法をまとめました。
学習のやり方は人それぞれです。
Progateのように有名な学習サイトからやるもよし、手っ取り早くYoutubeを見ながら始めるもよし、参考書を買って進めるもよしです。
ただ、今回までの記事でも書いてきたように、私がHTML/CSSの学習をやる上で一番効率のよい方法だと思うのは、
- 学習のスケジュールを明確にする
- 学習サイトを使って勉強を開始
- note教材などを使って実践的なアウトプット
- モダンコーディングの参考書
この順番かなと思います。
参考にしてもらいつつ色々な学習ツールの中から方法を選んでいただければ幸いです！
それでは
