メインコンテンツへスキップ

Bootstrap3移行ガイド

PST(米国太平洋時間)2013/8/19にBootstrap3.0.0が正式に公開されました。これまでのBootstrap2.xから3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap3の使い方を2.xからの変更箇所を交えて解説しています。

解説は最新版(現在は3.3.6)に対応するよう随時(できるだけ)更新しています。
更新箇所の表示

もともとTwitter社でデザイナーや開発者によって作成されたBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの一つとなっています。

BootstrapはMark Otto、Jacob Thorntonの両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークである前に、BootstrapはTwitter社の設計として知られていました。開発から数か月経過し、Twitter社は最初のHack Week(社内イベント)を開催しました。そして、あらゆる技術レベルの開発者が外部の指導なしで跳び込んだのでプロジェクトは論破されました 。それは公開前の1年以上の間、会社で内部ツール開発のためのスタイル・ガイドとして使用され、今日も続いています。

当初2011年8月19日(金)に公開され、その後v2とv3による2つの大きな書き直しを含めて20以上の更新をしてきました。Bootstrap2では、オプションのスタイル・シートとして反応する機能性を全フレームワークに加えました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトで反応するようにするためにライブラリをもう一度書き直しました。

Bootstrap公式サイトHistoryより

今や世界中のwebサイトの1%がBootstrapを使って作成されたとの報告も出され、今後もその勢いはとどまるところを知りません。

Bootstrapは当初米Twitter社から提供されていましたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなりました。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3からはhttp://twitter.github.com/bootstrap/からhttp://getbootstrap.comに移転しました。

名称について

プロジェクトとフレームワークは、常にBootstrapと呼ばれなければなりません。前にTwitterは不要で、大文字は省略形であるBのみでsは大文字ではありません。

Bootstrap公式サイトNameより

Bootstrap

BootStrap

Twitter Bootstrap

ライセンスについて

Bootstrapは、MITライセンスの下で公開され、2011年の公開から現在まで、著作権はTwitter社が有しています。

  • PST2013/7/27にBootstrap3RC1が公開され、その後何回か更新されました。
  • PST2013/8/13にBootstrap3RC2が公開され、その後随時更新されました。
  • PST2013/8/19に3.0.0正式版が公開されました。
  • PST2013/10/29に3.0.1が公開されました。
  • PST2013/11/6に3.0.2が公開されました。
  • PST2013/12/5に3.0.3が公開されました。
  • PST2014/1/30に3.1.0が公開されました。
  • PST2014/2/13に3.1.1が公開されました。
  • PST2014/6/26に3.2.0が公開されました。
  • PST2014/10/29に3.3.0が公開されました。
  • PST2014/11/12に3.3.1が公開されました。
  • PST2015/1/19に3.3.2が公開されました。
  • 3.3.3については、3.3.2公開直後にSassでバグが見つかったので3.3.2.1として修正版が公開されましたが、それを3.3.3として再パッケージ化したので、混乱を避けるためBootstrap全体のバージョンでは存在しません。
  • PST2015/3/16に3.3.4が公開されました。
  • PST2015/5/15に3.3.5が公開されました。
  • PST2015/11/24に3.3.6が公開されました。
  • ※従来のBootstrap2.3.2はhttp://getbootstrap.com/2.3.2/に移動しました。

※Bootstrap4について

Bootstrapプロジェクトでは、2014/10/29の3.3.0公開時にBootstrap4のアルファ版が数週間でできると伝えています(アルファ版は2015/8/19に公表されました)。

Bootstrap4の特長

  • CSS開発言語がLessからSassへ変更
  • グリッドシステムの改善(モバイルデバイスに新しいグリッド層を追加)
  • オプトインでflexboxのサポート(flexboxベースのグリッドシステムとコンポーネントを利用するためCSSを再コンパイル)
  • パネル、サムネイル、囲み枠を廃止し新しいコンポーネントとしてカードを追加
  • Normalize.cssではなくRebootという新しいモジュールの中ですべてのHTMLをリセット
  • ブランドの新しいカスタマイズオプション(gradient transition shadowなどのスタイル装飾をスタイルシートからSass変数に移動)
  • Internet Explorer8とiOS6はサポート外にし、サイズの単位をpxからremとemに切り替え
  • すべてのJavaScriptプラグインを書き直し(Universal Module Definitionをサポートし、ECMAScript6に書き直された)
  • ツールチップとポップオーバーの自動配置を改善(Tetherというライブラリを使用)
  • ドキュメントを改善してMarkdown記法で書き直し(CSS、Components、JavaScriptに分かれていたドキュメントをDocumentationに統一し、検索を可能にした)

Bootstrap3との主な変更点はBootstrap4移行ガイド

Bootstrap3を出す際に、Bootstrap2のサポートを廃止したが、多くのユーザーに混乱が生じたので、Bootstrap4を公開後も引き続きBootstrap3のバグの改善やドキュメントの更新を行うとのことです。

  • モバイルファースト
  • レスポンシブデザインに1本化(bootstrap-responsive.cssは不要に、レスポンシブにしたくない場合は「レスポンシブの無効化」を参照して下さい。)
  • アイコンはpng画像からwebフォントに変更(img/は不要、fonts/が追加)
  • Internet Explorer7とFirefox3.6はサポート外に
  • フラットデザインの導入(フラットにしたくない場合のためにbootstrap-theme.cssが3RC2の途中で追加)
  • 一般的なWeb標準に準拠して、容易にアクセシビリティを高めることが可能

サポート対応ブラウザ

Chrome Firefox Internet Explorer Opera Safari
Android サポート対応 サポート対応 該当なし サポート非対応 該当なし
iOS サポート対応 該当なし サポート非対応 サポート対応
Mac OS X サポート対応 サポート対応 サポート対応 サポート対応
Windows サポート対応 サポート対応 サポート対応 サポート対応 サポート非対応
  • Internet Explorerは、8から11に対応
  • 非公式にはChromium、Linux版Chrome、Linux版Firefox、Internet Explorer7でも十分に動作するが、サポート非対応

【変更】

  • 3.2.0~:Android版Firefoxに対応した模様

Internet Explorer8と9での注意

Internet Explorer8と9もサポートされていますが、以下のCSS3プロパテイとHTML5要素が完全にはサポートされていません。
ちなみにInternet Explorer8は、Bootstrap4からはサポートから外す予定です。

Feature Internet Explorer 8 Internet Explorer 9
border-radius コーナーの角丸 サポート非対応 サポート対応
box-shadow ボックスの影 サポート非対応 サポート対応
transform 2D/3D変形 サポート非対応 -ms-transformでサポート対応
transition 変遷効果 サポート非対応
placeholder テキストフィールドの初期値 サポート非対応

Internet Explorer8では、メディアクエリを有効にするためにRespond.jsが必要です。そのため<head>内にRespond.jsを設置する必要があります(設置方法は基本のテンプレート参照)。

さらに、Internet Explorer 8の開発環境と本番環境でRespond.jsを使用する際には、以下の注意事項があります。

  • Respond.jsとクロスドメインCSS
    別の(サブ)ドメインでホストされているCSSでRespond.jsを使用する場合(例:CDNで使用)は、いくつかの追加設定が必要(詳細についてはRespond.jsのドキュメントを参照)
  • Respond.jsとfile://
    ブラウザのセキュリティ規則により、file://プロトコルではRespond.jsはファイル経由で閲覧したページでは(ローカルのHTMLファイルを開くときのように)動作しないため、Internet Explorer8でレスポンシブ機能をテストするには、HTTP(S)でページを表示して下さい(詳細についてはRespond.jsのドキュメントを参照)
  • Respond.jsと@import
    Respond.jsは@importを経由して参照するCSSでは動作しません。特にいくつかのDrupalの構成は@importを使用することが知られています(詳細についてはRespond.jsのドキュメントを参照)

Internet Explorer8は、box-sizing: border-box;min-width,max-width,min-height,max-heightとの組み合わせて使用することを完全にサポートしていないため、v3.0.1以降.containersではmax-widthではなくwidthで幅固定に設定されました。

Internet Explorer8は、@font-face:beforeと組み合わせたときにいくつかの問題がありますが、Bootstrapではグリフアイコンをその組み合わせで使用しているため、ページがキャッシュされると、ウィンドウの上にマウスを動かすことなくロードされた(例:更新ボタンを押すかiframeで何かをロードする)場合、ページはフォントがロードされる前にレンダリングされてしまうので、マウスをページ(本体)の上に置くとアイコンの一部が表示され、そのアイコンの上にマウスを移動すると残りが表示されます(詳細については問題#13863を参照)。

Internet Explorerの互換モード

Bootstrapは、古いInternet Explorerの互換モードをサポートしていません。Internet Explorerの最新のレンダリングモードを使用していることを確認するには、ページ内に次のような<meta>タグが適切に含まれているかどうか見て下さい:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
デバッグツールを開いてドキュメントモードの確認:F12キーを押して「ドキュメントモード」を確認して下さい。

このタグは、Internet Explorerでサポート対応されている各バージョンで可能な限り最高のレンダリングを確実にするためにBootstrapのドキュメントとサンプルのすべてに含まれています(詳細についてはStackOverflowの質問を参照)。

Windows8でのInternet Explorer10とWindows Phone8での注意

Internet Explorer10は、ビューポートの幅からデバイス幅を区別しないため、適切にBootstrapのCSSメディアクエリが適用されません。これを修正するには、通常は単に以下のCSSの迅速なスニペットを追加します:

@-ms-viewport       { width: device-width; }

しかし、これはアップデート3(別名GDR3)より古いWindows Phone8バージョンを実行しているデバイスには機能せず、このようなデバイスの原因で主にdesktopビューの代わりに狭い「phone」ビューが表示されるので、これに対処するには、バグの回避として以下のCSSやJavaScriptを含める必要があります。

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

詳細と使用法のガイドラインについては、Windows Phone8 and Device-Widthを参照して下さい。

注意:デモとしてBootstrap3のマニュアルおよびすべての実例にはこれが含まれています

Safariの小数切上げ機能

iOSv8.0とOS Xのv7.1以前のバージョンのSafariのレンダリングエンジンには、.col-*-1グリッドクラスで使用される小数点以下の桁数でいくつかの問題がありました。もし12個のグリッドカラムのページを作っていたら、カラムが他の行に比べて短いと気づくかもしれません。Safari/iOSのアップグレード以外にも、回避策としていくつかのオプションがあります。

  • 強制的に右端をそろえるため、最後のグリッドカラムに.pull-rightを追加
  • Safariのために完璧な切上げ機能を取得するには、手動で小数を微調整すること(最初のオプションよりも難しい)
  • 2015/2/11現在、最新版であるiOSv8.1.3のSafariではこの問題は解消されている

iOSとAndroidでの注意点

オーバーフローとスクロール

<body>要素のoverflow: hiddenのサポートは、iOSとAndroid ではかなり制限されています。それらのデバイスのブラウザのいずれでも、モーダルの上部または下部を過ぎて最後までスクロールすると、表示されないはずの<body>コンテンツがスクロールを始めてしまいます。

仮想キーボード

また、固定のナビゲーションバーやモーダル内で入力を使用している場合、iOSでは仮想キーボードが現れたときに固定要素の位置を更新しないレンダリングのバグがあることに注意して下さい。これの回避策として、要素をposition: absoluteに変更するか、手動で位置を修正しようとするためのタイマーを起動させてみる方法があります。これはBootstrapでは対応していないので、どちらの解決策がアプリケーションに最適か自分で決めて下さい。

ナビゲーションバーのドロップダウン

z-indexの複雑さのせいで、iOSではナビゲーションバーで.dropdown-backdrop(メニューの外側をクリックするとドロップダウンメニューを閉じる機能)が使用できません。このため、ナビゲーションバーでドロップダウンを閉じるには、直接ドロップダウン要素をクリックする必要があります(あるいは他の要素でiOSのクリックイベントを発生させる)。

ブラウザのズーム

Bootstrapおよび他のウェブの両方で、ページズームはいくつかのコンポーネントで必然的にレンダリングの画像の乱れを示します。問題の内容によっては、それを修正(最初に検索し、必要であれば問題を開く)できる場合がありますが、それらは多くの場合、こちらではハッカー行為の回避策以外には直接の解決策を持っていないので、無視する傾向があります。

印刷での注意点

さらにいくつかのモダンブラウザでは、印刷は奇妙なことが起きます。特にChrome v32のように、Webページを印刷中にメディアクエリを解決するときに、マージンの設定に関係なくChromeは物理的な用紙サイズよりも大幅に狭いビューポートの幅を使用しています。これは印刷するときに、Bootstrapの極小グリッドが予期せずにアクティブ化される可能性があります(詳細は#12078を参照)。推奨する回避策としては:

  • 極小グリッドを受け入れ、その下で許容できる範囲で見えることを確認
  • プリンター用紙が極小より大きいことを考慮して、Lessの@screen-*変数の値をカスタマイズ
  • 印刷メディア用のグリッドサイズのブレークポイントを変更するために、カスタムメディアクエリを追加

また、Safari v8.0のように、固定幅の.containerは印刷するときにSafariが異常に小さいフォントサイズを使用することがあります(詳細については#14868を参照)。このための一つの可能性のある回避策として、以下のCSSを追加します:

@media print {
  .container {
    width: auto;
  }
}

Android標準ブラウザ

従来の常識を破って、Android 4.1 (さらにいくつかの新しいリリースでも) から、デフォルトのWebブラウザとして(Chromeではなく)Androidブラウザアプリが搭載されています。残念ながら、Androidブラウザアプリは、一般的にCSSを使用したバグや矛盾がたくさんあります。

メニュー選択

border-radiusborderが適用されている<select>要素では、Android標準ブラウザはサイドコントロールを表示しません(詳細はこのStackOverflowの質問を参照)。問題のあるCSSを削除し、Android標準ブラウザ上でスタイルなしの要素として<select>をレンダリングするために、以下のコードのスニペットを使用します。ユーザーエージェント・スニッフィングは、Chrome、SafariとMozillaブラウザに対する干渉を回避します。

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

実例を見たいならこのJS Binデモで確認して下さい。

検証ツール

古くてバグだらけのブラウザに最高の経験を提供するため、Bootstrapは、ブラウザ自体がバグを回避して、特定のブラウザバージョンに特別なCSSをターゲットとするために、いくつかの場所でCSSブラウザハックを使います。

これらのハックは、CSS検証ツールが当然のことながら無効であると訴える原因になります。

連結している場所では、まだ完全には標準化されないbleeding-edge CSSの機能を使用しますが、これらはプログレッシブ・エンハンスメントのために純粋に使用されています。

CSSの非ハック部分は完全に検証しないと、ハック部分は意図的にこれらの特定の警告を無視し、なぜか非ハック部分の適切な機能を妨害しないので、これらの検証の警告は、実際には重要ではありません。

BootstrapのHTMLドキュメントには、同様に起因する特定のFirefoxのバグの回避策を含めて、いくらかの取るに足らなくて重要でないHTMLの検証の警告を持っています。

Bootstrapは、一般的なWeb標準に準拠しており、最小限の余分な労力で障害者支援技術(AT)を利用してアクセス可能なサイトを作成するために、使用することができます。

ナビゲーションをスキップ

ナビゲーションには多くのリンクが含まれており、文書内のメインコンテンツの前に来る場合は、ナビゲーションの前に「メインコンテンツへスキップ」リンクを追加して下さい(理由についてはこちら)。.sr-onlyクラスを使用すると視覚的にはスキップリンクは非表示になり、.sr-only-focusableクラスも使用すると(目の見えるキーボードの使用者のために)フォーカス時にはリンクが見えるようになります。

<body>
  <a href="#content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>
  ...
  <div class="container" id="content">
    <!-- メインページのコンテンツ -->
  </div>
</body>

入れ子になった見出し

見出し(<h1><h6>)を入れ子にするときは、最初の文書の見出しは<h1>にする必要があります。その次の見出しは、スクリーンリーダーがページの目次を構築することができるように、<h2><h6>の論理的用途を作成する必要があります。

色の対比

現在では、Bootstrap(様々なスタイルに整えられたボタン・クラス(白い背景の上で使われるとき基本的なコード・ブロックのために使われる色、.bg-primaryといった文脈上の背景ヘルパー・クラスやデフォルト・リンクの色を強調表示しているコードの一部)のような)で利用できるデフォルト色の組合せのいくつかは、低いコントラスト比(4.5:1の推薦された比率以下)を持っています。これは視力の弱い人や色盲のユーザーに問題を引き起こす可能性があります。これらのデフォルトの色は、コントラスト及び視認性を増大するように改変される必要があるかもしれません。