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

toggleとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ウィンドウ幅を変更するとリンクがボタンに変わりクリックすると詳細が開くようになります。toggleとはそのボタンのことです。画像に差し替えたりも可能です。
講師:
07:11

字幕

メニューを PCそしてスマートフォンこの様に切り変えると出てくるこのボタンこれはどのように変更できるのでしょうか?このレッスンで見ていきましょう。HTML を見るとずっとスクロールして実はこの部分でできています。Class に、ここnavbar-toggle とありますね。この toggle というのは同じ操作を繰り返すことでオン・オフを切り替えるものです。このボタンもこの様に開閉をクリックで切り替えられるのでtoggle です。次に、そのコードを見ていきましょう。見慣れないものがありますね。ここです。data-toggledata-targetHTML を普通に書いていてはあまり見ないものです。それぞれを見ていくと date-toggle には collapse と書いてありますね。toggle というのは先ほどやったのでなんとなくこの開閉の所だと思うのですがcollapse というのはどういう意味でしょう。Collapse とは日本語で言うと崩壊とか潰れるとかそういった意味なんですがBootstrap においてはcollapse とは開閉するというもので使われています。なのでここは toggle、開閉となるんですね。 クリックして開いて、クリックして閉じるということを指定していると言えます。その通り動いていますね。そして、deta-targetここには ID が入っているようです。target という言葉から憶測するにこの ID が入っているものに対してこの toggle の操作をしているのでしょう。ではこの ID を探してみます。bs-example-navbar-collapse-1長いですね。すぐ下にあることがわかります。ここにあったものが、こここのコメントの下にありますね。ここです。id とあってbs-example-navbar-collapse-1ここを開閉するようにと操作しているんですね。確かにこれをクリックするとここ、このトップページの情報などが出てきます。この div に対してこの操作を行っているんですね。この操作、実は一番下のjs を読み込んでいる所ここに js でbootstrap.nin.jsというファイルがあります。あともう1つが動的な動作でよく使われるjs のライブラリの jqueryも読み込まれています。この2つに予め先程のようなこの操作が書いてあるので私たちはシンプルにjs のコード等を書く必要がなくdata-toggle や data-target でそれを指定することで自分たちも実装することができるんですね。 非常に便利です。これで、ここのコードの意味は理解できましたね。次は中を見てみましょう。次を見ると、ここ<span class="sr-only"Toggle navigationとあります。sr-only とは Screen reader onlyということです。実際に目で見ている人には不要なものですが目が見えない人のために、これが何であるかを説明しているんですね。そして更に見ていくとここ span が3つ連なっています。icon-bar というのが3つありますね。実はこのボタンicon-bar というものによってCSS で書かれているのです。1個だけ、この様に削除して保存そして更新をしてみましょう。減りましたね。これ画像だと思っていたんですが、私も初めて見た時はビックリしました。確かにこの様に書けると画像を使わなくて済むので表示も速いかもしれないですね。非常に面白いコードの書き方です。そして、この3つの spanこれを削除して別のものに置き変えることも可能です。ブラウザーから Bootstrap のページのComponents にアクセスしましょう。こちらのページですね、今開いているのがComponents です。 ここに Glyphicons ということで幾つかのアイコンが用意されています。Bootstrap のファイルを一式ダウンロードするとこの様に幾つかのディレクトリがありますがここの fontsこれがその Glyphicons なんですね。フォントとして使えるのでサイズや色も変えられるので非常に使い勝手が良いです。今回は、この Glyphicons のリストの様なものをチョイスしたいと思います。使い方は非常に簡単でまず目的のアイコンを見つけたらそれをコピーしておきます。スクロールすると、その使い方が書いてあるので見てみましょう。How to use とあってここにコードがあります。これです。span にクラスとして先程コピーしたものを指定するだけという非常にシンプルなものです。テキストエディターに戻って早速やってみましょう。ここですね、先程この様にicon-bar が入っていた所です。まずは span を入力します。そして classで貼り付けましょう。先程コピーしてきたものをこの様にします。そして閉じタグを忘れずに準備が出来ました。では保存してブラウザーで実際に見てみましょう。こちらをスマートフォンのように小さくしてtoggle を出して更新を押します。 差し変わりましたね。この様に自分の使っている画像等を任意で変更することができます。少し難しそうな所でしたがゆっくり見てみると意外にシンプルでしたよね。この様な調子で Bootstrap はいろんなことをカスタマイズできます。このレッスンでは、このスマートフォン用のこちら toggle ボタンのカスタマイズ方法を紹介しました。

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

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

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

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

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

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