Bootstarapとslickで機能性の高いWEBページを作る【初級第8回-2】
教材の準備
以下のページに簡単な手順を書き記しましたので、参考にしてください。
Bootstarap
Bootstrapとは、HTML／CSS／JavaScriptから構成されるフロントエンドWEBアプリケーションフレームワークです。
よく使われるデザインや機能を最初からセットとして用意してあり、これを使うだけで誰でもそれなりのWEBサイトを構築できる、というものです。
Bootstarapを使う為の準備
実は、先程の教材にはすでにBootstarapが使えるようにしてあります。
CSSとJavaScriptファイルを読み込ませるだけで使えるようになりますので、以下を参考にしてやってみましょう。
Bootstarapのグリッドシステム
サイトの横幅を均等に分けるガイドラインを「グリッド」と呼びます。
Bootstrapでは12本のグリッドが存在し、それをもとにレイアウトデザインを行います。
まずは、触れてみましょう。
<div class="container"> <div class="row"> <div class="col-lg-2"> <div class="card"> <div class="card-body"> <h4 class="card-title">grid_1</h4> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <div class="card-body"> <h4 class="card-title">grid_2</h4> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">grid_3</h4> </div> </div> </div> </div> </div>
詳しくは講義内で解説しますが、col-lg-2と書かれている数字の箇所、ここが肝です。
この数字の合計が12になると、画面横幅いっぱいになると覚えておけばいいと思います。
あとはこの数字を変更して、確認することでグリッドの理解が深まるでしょう。Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
とほほのBootstrap 4入門 – グリッド
Bootstarapをサンプルから使う
サンプルを利用してパーツを組み合わせたデザインを構成しましょう。
サンプル例は以下のページから。
Bootstrap 4 Cheat Sheet
では、よく使いそうなものをいくつか利用してみましょう。
<!-- カード -->
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<!-- collapse -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
各項目ごとに貼り付けて確認すると、それぞれ違ったデザイン、機能が表示されます。
このようなものがファイルを読み込むだけで使えるというのは、数年前では考えられない進化だと思います。
今までは何十分もかけて使えるようにしていた機能が、コピペだけで使えるわけですから、とても贅沢だとも言えます。
だからこそ、早く使い慣れたうえで特性を理解し、自分の思った通りにカスタマイズする段階まで行くことが重要です。
用意された道具だけでは限界がありますから、使っていくうちにどういうものかを理解するのが、Bootstarapを使う目的です。
slick
slickとは
jQuery（javascript）のプラグインで、お手軽にスライダーが利用できるようになる優れものです。
スマホ対応によりスワイプでスライドさせられるなど、高機能で軽量なのが広く利用される理由となっているようです。
slickの利用
以下のページからファイルをダウンロードします。
slick – the last carousel you’ll ever nee（公式サイト）
ファイルを展開したら教材フォルダassetsの中に設置します。
以下の内容をhtmlファイルにコピペします。
指示通りの箇所に設置が必要なので、講義内で解説します。
/*head内に*/ <link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/> /*bodyの最後に*/ <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22assets%2Fslick%2Fslick.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
コードを書いたら読み込まれているか確認してください。
問題がなければ、以下の内容をhtmlファイルにコピペしましょう。
<div class="slider"> <img src="https://qomolangma.jp/wp/wp-content/uploads/2019/08/slide_001.jpg"> <img src="https://qomolangma.jp/wp/wp-content/uploads/2019/08/slide_002.jpg"> <img src="https://qomolangma.jp/wp/wp-content/uploads/2019/08/slide_003.jpg"> <img src="https://qomolangma.jp/wp/wp-content/uploads/2019/08/slide_004.jpg"> </div>
続いて、assets/js/script.jsファイルを開いて、以下の内容をコピペします。
$(function(){
$('.slider').slick({
infinite: true,
autoplay:true,
autoplaySpeed:1000,
speed: 1000,
dots:true,
});
});
動作確認してみましょう。
コードの記述箇所を間違うとスライダーが動作しないので、動かなかった人は内容を確認してください。
とてもシンプルなコードですが、スライダーとして動作すると驚きがあります。
実は、jsファイルに記述したコードでスライダーに機能をつけられるます。
書き方は慣れるまで複雑ですが、触ってみましょう。
【jQuery】カルーセルスライダーslickの使い方とサンプル集 │ ジャングルオーシャン
【jQuery】高機能スライダープラグイン「Slick」の使い方 | misoblog
まとめ
Bootstrapの方は、その機能の一部しか紹介できませんでしたが、これを使いこなせるようになると、パズル感覚でページの作成が可能になります。そして、slickの方では少量のコードで多機能なスライダーが利用でき、これがあるだけでWEBページとしての見た目がぐっと上がります。
難しいものではないので、積極的に使っていきましょう。
自主学習のススメ
今回行った内容が深く理解できることでしょう。
