分123横並びのフォーム第2回で説明したグリッドシステムを利用できるフォームです。form要素にform-horizontalというclassを指定して使います。するとform-groupのついたdiv要素がグリッドシステムでいうrow要素の働きをします。label要素にはcontrol-labelというclassをつけた上でグリッドシステムで幅を,input要素はdivでラップした上でグリッドシステムで幅を指定します。前項で基本的にlabel要素はfor属性でinput要素を参照すると述べましたが,例外があります。それがチェックボックスとラジオボタン要素です。この要素は例外的にlabel要素でinput要素をラップします。</label></div>インラインチェクボックス選択肢名が短いチェックボックスやラジオボタンを横並びで表示したい時,チェックボックスの場合はcheckbox-inline,ラジオボタンの場合はradio-inlineというclassをlabel要素に指定します。3</label>静的な要素フォーム内に入力できない確定の情報を表示したい場合,p要素にform-control-staticというclassを指定することで,フォームのデザインに合わせて静的な要素を表示できます。最近ではフォームにバリデーション機能(入力のミスをチェックする機能)をつけることが多くなっています。Bootstrapでもバリデーション結果を表示するためのclassが用意されています。使用方法はform-group要素(form-groupをclassに指定した要素)にhas-[ステータス]というclassを追加することで利用できます。送信時のチェックや登録フォームでユーザー名が重複してないかなどのチェックに使うことになると思いますが,大抵の場合はJavaScript・jQueryを使用して動的に指定することになるでしょう。id="inputError1"></div>グラフィックアイコンを併用したバリデーション前項ではフォームの色を変更しましたが,グラフィックアイコンと併用して利用することもできます。その場合には後述で説明するグラフィックアイコンのclassを追加し,かつform-control-feedbackというclassを指定します(グラフィックアイコンの詳しい使い方は次回説明します⁠)⁠。form-control-feedback"></span></div>フォームサイズの変更フォームのサイズを変更することもできます。縦幅(フォントサイズ)を変更するためにBootstrapでは2つのclassが用意されています。サイズをより大きくするinput-lgと,より小さくするinput-smです。それぞれ,input要素に指定して使います。placeholder=".input-sm">横幅を変更したい場合には,グリッドシステムでラップすることが推奨されています。</div></div>フォームの解説テキストinput要素の下に解説文章を表示する方法が提供されています。form-groupのついた要素内で,(⁠input要素と兄弟要素になるように)help-blockというclassを指定した要素を配置します。class="help-block">補足説明を記載します。</span>ボタンの意味に合わせたデザインbutton要素にはbtnというclassと,ボタンの意味・ステータスに合わせたclassを指定することで,フォームのボタンをデザインできます。button要素以外にもa要素・input要素(type属性がbutton・submitのもの)に指定して使うこともできます。実行において慎重な判断が必要な旨を示唆するボタン。ボタンとしての判定サイズを持ちつつリンクと仕手の見た目を提供する。btn-link">Link</button>ボタンのサイズ変更Bootstrapではボタンのサイズはノーマルを含め4種類提供されます。次のclassを追加で指定することで利用できます。btn-xs">凄く小さいサイズ</button></p>ブロックレベルボタン通常button要素はインラインレベルでレンダリングされます。ログインウィンドウなどで横幅一杯(ブロックレベル)として配置したい場合があります。その場合にはbtn-blockというclassを追加することでブロックレベル要素にできます。btn-block">新規登録</button>ボタンのアクティブ表示ボタンが現在押されてる状態を示すために,activeというclassに指定することでアクティブであることを表示できます。表示方法の選択などで利用できるでしょう。role="button">Link</a>ボタングループとボタンのアクティブ表示を利用したUI実際のUIを例に見ていきましょう。このUIは,表示方法を切り替えるボタンをボタングループにすることで,表示方法が「2種類あること」を説明し,ボタンのアクティブ表示で「どちらが選択されているか」を示しています。※右側の表示件数の選択UIは次回説明するドロップダウンリストを利用しています。画像レスポンシブイメージclassBootstrapはレスポンシブデザインをベースで設計されています。そのため,画面サイズに応じて画像が伸縮する必要が出てくるでしょう。その際に指定を便利にするのがimg-responsiveというclassです。height:auto;が設定されます。はみ出ないように天地成り行きで画像を調整してくれます。alt="レスポンシブイメージ">イメージサーフェスimg要素にクラスを指定して使用します。角丸・円・フレームと種類がありますがCSS3のboader-roundプロパティで実装されていますので,IE8では丸みがかかりません。そのことを念頭において使用しましょう。class="img-thumbnail">ヘルパークラス群アラートの表示に使用するクラスから一般的な便利コンポネートが用意されています。その中で,サイトデザインに欠かせないクラスを抜粋して紹介します。これらのクラスにはLESSでミックスインとして利用することを前提にしたクラスも多くあります。さらなる活用法はLESSカスタマズの回に説明します。フロート関連のクラスサイト構築には必須となったfloatプロパティの設定を便利にするクラス群です。clearfixfloatプロパティを使ったサイトを制作したことある方なら,お世話になっているだろうclearfixも組み込まれています。御存知の通りclearfixとはfloatの「浮動化」と「後続する内容の流し込み」の特性によってfloat要素をラップする要素に高さがなくなる問題(背景が指定できない・レイアウトが崩れる等)をHTMLを汚さずにスマートに実装するためのCSSの設定です。使用方法は単体のclearfixと同様にfloatプロパティを設定した要素を子要素に持つ親要素に指定します。ほげぴよ...</div>クイックフロート左右へのフロートを簡単に実現するためのclassは次のとおりです。この設定は!importantルールがつくため、使用の際は注意しましょう。次回に説明するナビバーコンポーネントの整列にも利用します。したレスポンシブユーティリティとは別に,コンテンツの表示・非表示を簡単にできます。このclassの設定には!importantルールがつくため、常用するというよりはJavaScsript・jQuery等から動的に操作するときに使ったほうが良いでしょう。要素の場所は確保されるが不可視になるsr-onlyクラス前項の「一行フォーム」で軽く説明しましたが、このclassを指定することでこのclassを指定された要素は1px×1px要素になり,表示上見えなくなります。display:noneではなく,このような指定にしているのには理由があります。それは視覚障がい者などが利用するスクリーンリーダー(音声読み上げソフト)で読み上げる対象となるためです。表示はしてほしくないけど,読み上げて欲しい要素にこのclassを指定します。その他のBootstrapの基本スタイルここまででよく利用するBootstrapのスタイルを解説してきましたが,上記以外にも役に立つスタイルがあります。WebアプリUI設計のコンポーネントとしてシステムメッセージを表示するスタイルなども用意されていますが,今回の連載はサイトデザインが目的なので割愛しました。英語にはなりますが,公式サイトに詳細な説明とサンプルコードがあり,コピーアンドペーストで利用できるのもが一杯ありますので,欲しい機能が上記の説明にない場合は一読してみることをおすすめします。次回は,もう少し複雑なデザインパーツであるコンポーネントを紹介します。123Bootstrap著者プロフィール齋藤みつる(さいとうみつる)高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・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.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。