BootstrapでスピーディーにレスポンシブWebデザイン

dropdownメニュー

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
javascriptで書かなければならないドロップダウンメニューもbootstrapではあらかじめ用意されています。
講師:
08:24

字幕

Bootstrap のメニューに挿入されているこちらのドロップダウンはCSS でも書くことができますがあまりコーディングが得意でない方などはちょっと難しそうですよね。JavaScript でも書ける、と言われてもむしろそっちの方が書けないということもあるかと思います。こちらの Bootstrap ではこのようにドロップダウンも最初から動くものが用意されています。HTML データを見てみましょう。こういった JS の操作などに関しては一番下の script で読み込まれている jQuery とBootstrap 側で用意しているこの bootstrap.min.js によって制御されています。非常にありがたいですね。ではドロップダウンのコードを見てみましょう。ここにありました。class="dropdown" とあるのでここに間違いないでしょう。では試しにこのラベルを変更してみましょう。保存をして更新ボタンを押します。文字が変わりましたね。ちゃんと合っているようです。そうしたら、ここのコードを見ていきましょう。まず li としてクラスに dropdown が割り振られています。このクラスを削除してみたら何か変わるでしょうか。 試しにやってみましょう。ファイルを保存して更新。ちゃんと動いているようですし何ら影響が無いようです。そうすると、ここはあくまでもドロップダウンと分かりやすくする為とあとは若干の見た目の調整のみになっているんですね。次、こちらのリンク。リンク自体は設定されておらず#のままです。ですが、ここに class="dropdown-toggle"そして data-toggle="dropdown" とあります。クラスですので、こちらも見た目を制御しているものでしょう。試しに一回このように削除してみます。ファイルを保存してこっちも何か変わるんでしょうか。更新ボタンを押してみます。変わりが無いですね。こちらも削除しても大丈夫なようです。もう一度テキストエディターに戻って今度は data-toggle を削除してみるという意地悪をしてみます。これでも動くんですかね。皆さんはどう思いますか。保存をして更新を押します。動かなくなりましたね。URL を見るとこれが先程のページそして動かないところをクリックすると#が挿入されました。そう言えば#はどこかにありましたね。テキストエディターに戻ってここですね。この#。リンク先の#が動いていてこっちが動いてないようです。 そうですね。こっちは先程意地悪して無くしてしまったものです。こうすることで、ちゃんと動くんですね。こっちが優先されるようです。ファイルを保存してちゃんと元通りになったかを見てみましょう。ブラウザを更新します。クリックすると、無事動きました。構成は非常にシンプルでしたね。data-toggle にちゃんとdropdown を用意してあげれば大丈夫なようです。また、この b class="caret" とは何でしょうか。試しにこの caret というクラスを削除してみましょう。ファイルを保存します。ブラウザを更新すると右側にあった三角が無くなっていますね。テキストエディターに戻って戻してあげましょう。ファイルを保存します。三角が帰ってきました。この三角は Bootstrap のCSS に用意されているものです。ページの CSS に遷移して右側の Helper classes をクリックします。ここに Carets というのがあるのでクリックしてみましょう。この三角がこの span class="caret" で実装できるようです。要は、この class="caret" が入っていればどこでも使えるようです。 ドロップダウンメニューなどそういったものに使うには非常に便利でしょう。他にも Bootstrap にはClose 用のアイコンとかこのように背景の色を変えるなどとても親切によく使うものを用意してくれています。非常に便利ですね。ではレッスンページとテキストエディターに戻ります。更に構成を見ていくとここ、この ul の中にメニューが入っていることが分かります。Action、Another action、Something else heredivider があってSeparated link となっています。ブラウザで見ても、同じですね。Action、Another actionSomething else hereSeparated linkここを変えることで内容を変更できるようです。このように保存をして更新をしてみます。クリックすると、差し変わりました。ここは ul でなくても大丈夫です。例えば、このようにコードを削除してul を div に変更してみましょう。そして適当に文字を入れていきます。これで保存をしブラウザを更新するとこのように見た目はまだスタイルが設定されていないですがちゃんと動きましたね。 このようにクラスなど構成を維持していれば比較的変更が簡単であるということがよく分かります。戻しますね。今のはこちらEdit の Undo で戻りました。Command+Z です。Windows だと Ctrl+Z ですね。エディターによってしまうので全部とはありませんがもしお使いのエディターの場合こちらの編集とかを見るとどのように戻るかなどが書いてあると思います。これでドロップダウンの一通りの内容を把握することができました。非常にシンプルでしたね。一番注意しなくちゃいけないのはこの data-toggle がちゃんとこの形になっているか、です。あとは比較的ここの操作が簡単にできました。ですが、最後に注意が必要です。先程差し替えたここのメニューの所今 クラスが dropdown-menu となっています。この ul を div に変えるのは大丈夫ですがここのクラスを変更してみるとうまく動かなくなります。まずはセーブをして更新をしてみます。このように最初から内容が表示されるようになるんです。戻って、戻してみましょう。保存をしてリロードするとちゃんと動くようになりました。注意点は2つです。data-toggle の dropdown という所とここのクラスの dropdown-menu をしっかり用意しておくこと。 この2つ注意してください。本レッスンではドロップダウンのコードを一緒に見ていきました。

BootstrapでスピーディーにレスポンシブWebデザイン

Twitter社が提供するBootstrapは、よく使うテンプレートをまとめてCSSを読み込むだけですてきなスタイルを適用できるとても優れたフレームワークです。このコースではBootstrapについて解説しながら、その簡単な使い方やlessによる便利なスタイルのカスタマイズ方法について紹介します。

2時間22分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。