分12ナビゲーションナビゲーションの基本系はul要素にnavというclassと,デザインに応じたclassを指定することで利用できます。現在選択されているメニューはli要素にactiveというclassを指定することで対応します。href="#">メッセージ</a></li></ul>タブ型ナビゲーションタブ型ナビゲーションは,基本形のナビゲーションにnav-tabsというclassを追加して使用します。:</ul>ピル型ナビゲーションピル(つまり錠剤)型のナビゲーションはあまり日本では聞かない言い回しですが,カスタマイズする場合は背景をベタから差し替えるだけでオリジナリティを出すことができます。カスタマイズのベースとしては比較的使いやすい部品です。使い方はnav-pillsを追加でclassに指定して使います。:</ul>カスタマイズ例Web2.0(リッチUI)時代に流行った,次のようなグロー掛かったデザインのナビゲーションも簡単につくれます。LESSについてはまだ触れてませんし,画像を使用すると再現が難しくなるため,多少長くなりますが今回はCSS3で次のような指定をしています。rgba(255,255,255,0.3);}ピル型ナビゲーションを縦積みするピル型ナビゲーションを縦積みすることでサイドカラムなどで便利に活用することができます。使い方はnav-pillsに加えて,nav-stackedというclassを指定します。:</ul>ナビゲーションを両端詰めにする横並びタイプのナビゲーションを親要素の幅に左右にジャストフィットするように配置します。項目が増えても均等に割りつけられるため,CMSでの活用時にも便利なスタイルです。:</ul>ナビゲーションの中にドロップダウンメニューを入れるナビゲーションの中にドロップダウンメニューを入れる場合,少し変則的なコードになるので紹介します。ドロップダウンメニューの回で紹介した全体を囲むdropdowndを,メニューのli要素のclassとして記述します。button要素ではなくa要素を使います(そのためbtnなどの指定は不要です⁠)⁠。先ほど紹介したナビゲーションバーとは違い,グローバルナビゲーション向けのナビゲーションバーを紹介します。このナビゲーションバーは,スマートフォンサイズ(768px未満)ではナビゲーションの内容がまとめられボタンでトグルする動作をします。便利そうな機能ですが,一般ユーザーはこのようなインターフェースに慣れてないため,この機能だけでサイトを巡回するために必須の機能を提供するのには実は向きません。そのため,サイト巡回に必要な機能はこのナビゲーションバー以外の方法でも提供するべきです。コンパクトに収納される特性を利用してサイト全体へのナビゲーションを配置するなどの活用法があります。ログインすると利用できる機能など使い込んでる人向けの機能をまとめるのも良いでしょう。--></nav>少し複雑なコードになっているため,上から順番に見ていきます。ナビゲーションバーの使い方はnav要素にnavbarというclassと,ナビゲーションバーの種類を指定することで利用ができます。上記画像のナビゲーションバーは標準タイプなのでnavbar-defaultと指定します。role="navigation">何度か登場したcontainer要素。これはナビゲーションバー内部のコンテンツをセンタリングするための要素でcontainer-fluidまたはcontainerを選べます。class="container-fluid">containerを選ぶと最大幅1170pxのセンタリングになります(中のコンテンツだけ⁠)⁠。</div>スマホ表示の際のボタンとタイトルを定義しています。タイトルについては特になくても機能します。このボタン要素はBootstrapのdata-apiでトグルの機能が割り当てられています。data-target属性にトグルする要素のidを指定しておきます(1対1で呼び出せればclassでも可能ですがidを使うほうがスマートでしょう⁠)⁠。-->この中身がメニューとなり,スマホ表示にトグルする内枠となります。</ul>このリスト要素に必用なリンク等を収納して使います。ナビパーツの様に中にドロップダウンメニューなどを入れることもできます(スマートフォンでの表示時も問題なく動作します⁠)⁠。複数のリスト要素を用意することや,リスト要素にnavbar-rightというclassを追加して右に寄せることもできます。基本的な使い方を覚えたところで,ナビゲーションバーのバリエーションを見ていきましょう。nav要素に追加・置き換えでclassを指定するだけで様々なバリエーションのナビゲーションバーが利用できます。flexを利用して常にトップにナビゲーションが表示されるようになる。そのため,コンテンツをナビゲーションバー分(70px)ずらして配置する必要がある。常に下にナビゲーションを表示する作りとなる。そのため,コンテンツの下方に70px分の幅を開ける必要がある。黒ベースのナビゲーションバーにするためのclass。これはnavbar-defaultの替わりに使う。ジャンボトロンジャンボトロンは,サイトのメインビジュアル用のパーツです。Bootstrap2時代はヒーローユニットと呼ばれていました。これをそのまま利用すると一気にBootstrapらしさが出るため,あまり利用する機会は多くないでしょう。使う場合は背景をカスタマイズしたりして工夫してみましょう。使い方は簡単でjumbotronというclassのついたdiv要素で囲むだけです。role="button">続きを読む</a></p></div>ページヘッダーh1要素などをラップする簡単なデザインパーツです。ここをカスタマイズするだけで結構見栄えが変わるので利用する機会が比較的多いパーツでしょう。こちらも利用方法は簡単で,page-headerというclassを指定したdiv要素で囲むだけです。<h1>美味しい乾物活用法<small>ふえる超銀河わかめを有効活用</small></h1></div>カスタマイズ例は次のとおりです。margin:0;}まとめざっと駆け足でよく使うデザインパーツを紹介しました。今回はサイト制作ということでWebアプリなどでよく使うダイヤログやプログレスバーなどの部品は省略しました。他にも便利な部品は色々ありますので,ぜひ公式サイトに目を通してみてください。12Bootstrap著者プロフィール齋藤みつる(さいとうみつる)高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。