分12今回はコンポーネントとして使うデザインパーツ(コンポーネント)を紹介します。デザインパーツとはデザインパーツを紹介する前に,デザインパーツを「そのまま使うこと」の意味を考えてみましょう。前回紹介した基本スタイルは尖った指定などはなく,比較的どんなサイトでも無難に使えるデザインです。これから紹介するタブやぺージング,ナビゲーション,ジャンボトロン,メニューなどのデザインパーツはclassを指定するだけで簡単に使えるパワフルなコンポーネントであり,その分Bootstrapらしさを演出するパーツになっています。CSSやLESSを書かずに,つまりデザインをせず,すべてBootstrap任せてしまえば,どうしても,同じ見た目になってしまいます。画像・写真等のビジュアル要素が少ないテキストベースのサイトではより顕著に現れるでしょう。そのため,サイトを制作する上で要件・納期を考慮し何処を「オリジナル」にするか,またはどこを「カスタマイズ」するか?をあらかじめ念頭にいれるようにしましょう。デザインパーツの利用方法デザインパーツを使うにあたって、デザインパーツの中には別途,JavaScriptライブラリ(bootstrap.min.js)とjQueryを用意する必要がある場合があります。その時には,jQuery→bootstrap.min.jsという順番で読み込むようにしましょう。新しくなったグラフィックアイコンBootstrap2まではCSSスプライトを利用したラスタベースのアイコンでしたが,Bootstrap3のアイコンはWebフォントを採用することでベクターベースになりました。それにより,任意のサイズに拡大したり,Retinaディスプレイ等で表示しても劣化のない鮮明なビジュアルが得られるようになりました。フォントであるため,白・黒の二択ではなく,デザインに合わせてcolorプロパティで自由に配色を設定できます。自由度が広がったため,従来通りボタンに使う以外にもデザインのアクセントに利用するなど,用途はアイデア次第で広がります。使い方は,空のspanタグにglyphiconというclassと,表示させたいグラフィックアイコンのclassをつけることで,利用できます。glyphicon-[アイテム名]"></span>グラフィックアイコンのclassは,公式サイトにグラフィックアイコンとclassを記載したリストがあります。開閉可能なドロップダウンメニューを作ります。Bootstrapのドロップダウンプラグインが導入されている必要があります。bootstrap.min.jsに含まれているため,jQueryとbootstrap.min.jsが正常にセットアップされていれば動きます。以下すべてのJavaScirptライブラリが読み込まれていることを前提に解説します。この開閉可能なドロップダウンメニューは,次のように書いていきます。外箱の用意まずドロップダウンメニューを作るにはdropdownというclassを指定したdiv要素を作ります。その中に必要な要素を入れて入れることでドロップダウンを構築します。この要素にopenというclassがついたり消えたりすることでドロップダウン開閉のギミックが成り立ちます。次にドロップダウンを発動させるためのボタンを用意します。class="caret"></span><!--←「▼」マークを表示する-->このコードで重要な属性はdata-toggle属性とdropdown値です。この属性のついた要素をクリックすると,ドロップダウンの開閉が行われます(注1⁠)⁠。button要素でなくa要素など,他の要素でも構いません。APIが提供されます。そのためJavaScriptに明るくないデザイナーの強い味方になります。各イベントにフックすることも可能です。これにより,動的に内容を書き換えたり,様々な拡張もjQueryでできます。詳細はJavaScriptを紹介する回で説明します。ドロップダウンメニューの中身を作るドロップダウンメニューの本体をul要素で記述します。dividerというclassを指定した空li要素を入れることで区切り線を作ることができます。href="#">削除</a></li></ul>ドロップダウン項目にタイトルをつけるドロップダウンメニューにタイトルをつけることができます。li要素のclassにdropdown-headerを指定します。class="dropdown-header">ファイル操作</li>ボタングループボタンを束ねて表示することができます。使い方は簡単で,ボタンをbtn-groupというclassを指定したdiv要素でラップするだけです。前項で取り上げたボタングループをさらに束ねることで,ツールーバー状にできます。こちらも使い方は簡単で,ボタングループをラップしているdiv要素群に対して,btn-toolbarというclassを指定したdiv要素でさらにラップするだけです。</div></div>ボタンググループのサイズボタングループもボタン同様に4種類のサイズが用意されています。btn-groupというclassに追加して,次のclassを指定することで利用できます。凄く小さいサイズ次のように書くことができます。</div>ボタングループにドロップダウンメニューをネストするボタングループにドロップダウンメニューをネストすることができます。その際記述が変則的になるため,注意が必要です。</div></div>ボタングループにドロップダウンメニューをネストする際にはラップするdiv要素にdropdownではなく,btn-groupというclassを指定します。ここだけ変則的になりますので注意が必要です。縦並びのボタングループボタングループはボタンを縦並びにして纏めることもできます。こちらの使用方法も簡単で,btn-groupと指定していたclassの代わりにbtn-group-verticalを指定するだけです。:</div>ジャストフィットボタングループ親要素の横幅一杯に広がるタイプのボタングループを作ることもできます。btn-groupを指定した要素にbtn-group-justifiedというclassを追加して使います。a要素とbutton要素でマークアップ方法に差異があり,注意が必要です。a要素の場合はラップする親要素にbtn-group-justifiedを追加するだけです。btn-default">は</a></div>しかし,button要素の場合は個別のbutton要素に対してbtn-groupでラップした上で,btn-group-justifiedを使う必要があります。</div></div>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.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。