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

class= active

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リンクにclass=“active”と追加することで、現在選択されていることを示すように見た目を変更することができます。
講師:
02:46

字幕

Bootstrap のメニューを挿入するとこの様に一部だけ色が濃い所がありますね。これは今選択しているページがわかるようにしているactive というクラスによるものです。実際にコードを見てみましょう。まずはテキストエディターを開きその部分を見てみます。こちら、「トップページ」と入力されている部分を見つけましょう。「トップページ」と書いてあるものがありますね。ではこの「トップページ」と隣の「自己紹介」何が違うのかを見比べてみましょう。このコードは、ここからここまでの様です。そうすると、ほとんど構造は一緒ですね。ただ唯一違うのが、このリストのLi タグに class が付いていることです。「トップページ」には Class="active" があるのに「自己紹介」には、ない様ですね。これが原因の様です。これを一度削除してドキュメントを保存します。ブラウザーで更新したらどのように変わるのかを見てみましょう。ブラウザーに戻り、更新します。同じ見た目になりました。では先程の active というのが見た目に影響していたことがわかりました。テキストエディターに戻り先程とは違う「自己紹介」の所につけてみましょう。 貼り付けておいたのをPaste します。もう一回保存をして更新をしてみます。今度はこっちが黒くなりましたね。この様に active というクラスは今いる所を見分けるために少し見た目を変えている様です。これは Bootstrap の他のパーツでも同様です。Class="active"、通常は私たちはあまり触ることはありません。一個 Class="active" として見た目が変わったものを用意しておけばエンジニアさんの方で今のページと照らし合わせて動的に出力してくれるようにもしてくれます。Class="active" がどういうものかをしっかり把握しておきましょう。これを元に戻します。保存し、更新をします。これで使い方が分かりました。このレッスンでは Class="active"というのはどういうものかどのような動作をするのか等を紹介しました。

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

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

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

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

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

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