Emmetでコード入力を速めよう

Bootstrapでリストからナビゲーションバーをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リストにBootstrapのスタイルを定めて、ナビゲーションバーにしてみます。
講師:
04:09

字幕

このレッスンではリストにした要素に Bootstrap のスタイルを割り当てて ナビゲーションバーにしてみます。 今ブラウザで開いているこのページの上の方に ナビゲーションバーを加えてみましょう。 HTML ドキュメントを開きました。 この div 要素の中に加えていきます。 jumbotron の上ですね。 ここに まずは nav 要素です。 nav 要素でクラス名をつけます。 navbar 、Bootstrap のクラスです。 もう1つクラスを与えます。 navbar の default 。 そして子要素を加えていきます。 子要素はまず div 要素。 div 要素は div とタイプせずに 省略できますので すぐにクラスを与えます。 container と。 そしてまた子要素ですね。 ul 要素です。クラスを2つ与えます。 nav と navbar の nav と。 更に子供として当然 li 要素が来て 3つ加えましょう。 その中に a 要素。 href は全部ハッシュを入れます。 href と = の # で これで Tab を打ちます。 展開されました。 文字を入れないと レイアウトが確かめにくいので navbar ナビゲーションバーの タイトルですね。 まずは「ホーム」 そして「このサイトについて」 あと「連絡」 コンタクトですね。 これで1回保存しましょう。 そしてブラウザでプレビューしてみます。 ページの上の方に ナビゲーションバーがつきました。 もう少しだけ手を加えます。 まずこのページはトップページの想定なので 今ナビゲーションで選ばれているのが 「ホーム」 だと分かる表示を 加えたいと思います。 あとナビゲーションの左にロゴ代わりの ブランドを示すテキストを入れます。 HTML ドキュメントに戻りまして この ul の上ですね。 ここにブランドを示すテキストを入れます。 a 要素で入れることにします。 a 要素でクラスはnavbar-brand と。 そして Tab ですね。 href は # にしておきます。 テキストを書きましょう。 lynda.com としておきます。 それから「ホーム」が 選ばれた状態にしたいと。 ここでクラスを設定します。 li の要素に対して class で文字通り active です。 これで保存して確認してみましょう。 ファイルを保存します。 そして「ブラウザでプレビュー」です。 lynda.com というブランドを示すテキスト それから「ホーム」が現在アクティブだと いう少し濃い目の表示になりました。 このレッスンではリストにした要素に Bootstrap のスタイルを割り当てて ナビゲーションバーを作ってみました。 その場合にはまず nav 要素を加えました。 クラスは navbar と navbar-default です。 あと必要な要素にナビゲーションバーに 関わるクラスを設定しました。 これで ul 要素と li 要素で構成した リストが ナビゲーションバーのスタイルに なったということです。

Emmetでコード入力を速めよう

EmmetはHTMLやCSSのコーディングを強力に支援するプラグインです。Dreamweaverをはじめ、さまざまエディタにも対応しています。このコースではHTMLとCSSの基礎を学んだ方向けに、Emmetを使うさいの基本的な入力方法について解説します。このコースでEmmetを学習して、コーディングの効率を大幅にアップしましょう!

1時間02分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月25日

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

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

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