こんにちは！新人森田です。
気付いたらもう３月で、しかも３月３日ひな祭りです。
せっかくだしひなあられは食べておこうと思います。

ハレノヒブログのプチリニューアルはその後も少しずつ進行してたりします。
たとえばここ！

タグの使用頻度に応じて強弱をつけました。
ブログの記事を読む際にこの辺も使っていただけたらと思います。

それからここ！

さり気なく真ん中バースデーのバナーもおいてあります。
友だち検索機能が付いたりと日々成長中です。
DLがまだの方はこちらからもどうぞ！

では今日の本題に入りたいと思います。
BootstrapでWebサイトを作ろう１〜４ではhtmlとcssのみで制作しましたが、今回はそこにJavascriptを使ってみます。
BootstrapがあればJavascriptも怖くない！

Javascriptを導入する

JavascriptとはWebページに動きをつけるためのプログラミング言語です。
Bootstrapにはあらかじめjsフォルダの中に“bootstrap.js”が用意されているので、まずはこれを使うタグを書きます。

<script>で“bootstrap.js”だけ書いたらjqueryがないと動かないとシステムエラーが出てしまいました。
jqueryのサイトから“the compressed, production jQuery 1.11.0”を頂いてjsフォルダの中に保存し、“bootstrap.js”の前に同様に書き込みます。

これで導入準備は完了です。

カルーセルを作る

メインビジュアルの部分をカルーセルにします。
横にスライドする動きを使って、複数のコンテンツビジュアルを表示するのがカルーセル（意味は回転木馬）です。

↑はサンプルコードをほぼそのままコピペしたものですが、カルーセルはこんな風に“Indicators”、“Wrapper for sliders”、“Controls”の３つのパーツから成り立っているようです。カルーセルにのせる画像を、元の画像も合わせて３種類にしてみました。

おお、見事にスライドしてます。
“jquary”と“bootstrap.js”に動き方などが設定してあるおかげで、htmlをいじるだけでもう出来ました。

ドロップダウンを作る

次はメニューバーにドロップダウンのボタンを付けてみます。

上に囲ってある“Toggle navigation”というのは、スマホサイズまで縮めた時にメニューが収納されるアレです。
そして下の“dropdown”の部分がドロップダウンのボタンを設定している箇所です。

ちゃんと表示されてますね。

画面幅を縮めていくと…

メニューがきちんと収納されました。

まとめ

Javascriptの文法をまったくといっていいほど知らない私でも簡単にJavascriptを使えてしまいました！
本当におそるべしjquery&Bootstrap。
今回はサンプルコードをコピペして動作確認しつつ微調整というシンプルな作業でしたが、こだわろうと思えばもっと作り込めそうです。
今後jqueryとかもっと使えるようになるために、まずはBootstrapのJavascriptを色々使ってみようと思います！押忍！