Bootstrapでスライドショーを作ろう

Bootstrapで作成するカルーセルスライダー

Javascript/jQueryコースを定期受講されている生徒様に、Bootstrapでスライドショーを簡単に設置するレッスンを行いました。

Bootstrapにはスライドショーのように動作を実現するためのJavaScriptのコンポートが用意されています。
その中で、スライドショーを簡単に設置できるのがカルーセルです。

コピペで今すぐ利用できるコードはこちらです。

カルーセル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

レッスンでは、講師が用意したサンプルサイト(HTML+CSS+JavaScript)を元に、上記のようなリファレンスを適宜参照しながら生徒様が実際にスライドショーを設置する流れをガイドしていきます。

Javascript/jQueryコースを、順路に沿って学んでいくと、たった30分程度のレッスンでこのような本格的なスライドショーを設置できるようになります。

レッスンで学ぶメリットとは?

無料ブログやワードプレスをご利用されている方なら、あらかじめ用意されたコンポーネントを選択して画像を当てはめるだけで所定の場所にスライドショーを設置することも可能でしょう。

しかし、それは既製品の「使用マニュアル」に従って機械的に設定することに近いので、スライドショーがどのようなHTMLでできているのか、基本的な仕組みに触れることはまずありません。

そのため、既製品をマニュアル通りにしか使うことができません。少しアレンジしてくても、マニュアルがなければ実現できないでしょう。

CODEMYのレッスンでは、よそのサイトに載っているコードをコピペすることはありますが、必ずコードの意味を解説するので、基本的な仕組みを概念から捉え、理解することができます。

すると、実際に利用するサービスがワードプレスだろうと何だろうと、いつでも基本に立ち返って「この場合はここを書き換えればよいだろう」と自分で考える視点が身に付きます。

たとえばBootstrapは、HTMLで作成するホームページにも使えますし、ワードプレスに代表されるCMSのテンプレートにもBootstrapを土台に作成されたものが多数ありますが、CODEMYのレッスンで仕組みから学んでおけば、「ワードプレスだから使えないのでしょうか?」「プラグインがないとカスタマイズできないのでしょうか?」などと、中身のわからないものを扱うような不安や疑問にいちいち惑わされることなく、自力で判断し解決できる本当の実力が養われます。

豆知識「なぜカルーセルっていうの?」

カルーセル(carousel)は回転木馬という意味の英単語です。

メリーゴーラウンド

つまり、メリーゴーラウンドのことです。

メリーゴーラウンドは正面から見ると、左から右へ次から次へと木馬がスライドしていくように見えますね。

これに見立てて、スライドショーのことをカルーセルと表現することがあるようです。

スライドショーには、左から右へ動くものだけでなく、上から下へ動くもの、ふわっと消えてふわっと現れる(フェードイン&フェードアウト)ものなど、様々なものがありますが、その中で特に、左から右へ動くタイプをカルーセルスライダーと呼びます。

耳慣れない専門用語でも、「カルーセル とは」「カルーセル 意味」などの検索ワードでGoogle検索すると、すぐに答えが得られます。それを読んで「ああ、そういう意味だったのか。なるほど、納得した。」という体験を何度も繰り返すと、知らないこと知っていることに変えていくことが楽しくなり、スキルアップが飛躍的に加速します。

いろんな用語に触れて知識を広げていきましょう。