Bootstarapとslickで機能性の高いWEBページを作る【初級第8回-2】

初級コース第二期最終回となりました。
今回はこれまでに学んだことに加え、新たな知識としてBootstarapを学びます。
WEBページには必須ともいえるフレームワークですが、どのような仕組みになっているか触れていきましょう。
そして、質の高いコードに触れ、HTML,CSS,JSの理解を深めましょう。

教材の準備

Bootstarap

Bootstrapとは、HTML/CSS/JavaScriptから構成されるフロントエンドWEBアプリケーションフレームワークです。
よく使われるデザインや機能を最初からセットとして用意してあり、これを使うだけで誰でもそれなりのWEBサイトを構築できる、というものです。

Bootstarapを使う為の準備

実は、先程の教材にはすでにBootstarapが使えるようにしてあります。
CSSとJavaScriptファイルを読み込ませるだけで使えるようになりますので、以下を参考にしてやってみましょう。

Bootstrap – 世界で最も人気のあるフロントエンドのコンポーネントライブラリ

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">&times;</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="&lt;script&gt;" title="&lt;script&gt;" />

コードを書いたら読み込まれているか確認してください。
問題がなければ、以下の内容を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ページを作りました。
Bootstrapの方は、その機能の一部しか紹介できませんでしたが、これを使いこなせるようになると、パズル感覚でページの作成が可能になります。そして、slickの方では少量のコードで多機能なスライダーが利用でき、これがあるだけでWEBページとしての見た目がぐっと上がります。
難しいものではないので、積極的に使っていきましょう。

自主学習のススメ