概要
より良く・早く・強力にWeb開発を進めるためのアプローチを含む、Bootstrapの基盤となる重要な部分について理解していきます。
HTML5 doctype
Bootstrapは、HTML5 doctypeを必要とする特定のHTML要素とCSSプロパティを使用します。 そのため、あなたのプロジェクトのHTMLファイル全般に下記のような宣言を含めてください。
<!DOCTYPE html>
<html lang="en">
...
</html>
モバイルファースト
Bootstrap 2では、フレームワークで重要となる外見を決定づける部分を変更するために、任意でモバイルフレンドリーなスタイルを追加していました。 Bootstrap 3では、最初からモバイルフレンドリーとなるように書き直されています。
任意にモバイルのスタイルを追加するのではなく、コア部分に刻まれているということになります。 つまり、Bootstrapはモバイルファーストということです。 モバイルファーストのスタイルは、分離されたファイルではなく、ライブラリ全体で目にすることになるでしょう。
適切なレンダリングとタッチズームのために、<head>へviewportのmetaタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
viewportのmetaタグにuser-scalable=noを追加することで、
モバイル端末でのズーム機能を無効化することができます。
ズームを無効化することでユーザーはスクロールしか使用できなくなり、
サイトを少しだけネイティブのアプリケーションのように感じさせることになります。
我々としては、サイトでこれを使用することは非推奨としていますので、慎重に取り扱ってください。
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
タイポグラフィとリンク
Bootstrapは全体の基礎となる、表示・タイポグラフィ・リンクスタイルを設定します。 具体的には、
-
bodyには、background-color: #fff;を設定。 -
タイポグラフィの基礎として、
@font-family-base、@font-size-base、@line-height-baseを使用。 -
グローバルで、リンク色は
@link-colorを通して設定。下線は:hover時のみ適用。
これらのスタイルは、scaffolding.lessで確認することができます。
Normalize.css
クロスブラウザでのレンダリングのために、 Nicolas Gallagher氏とJonathan Neal氏のプロジェクトによるNormalize.cssを使用します。
コンテナ(container)
Bootstrapはサイトのコンテンツを包み(wrap)、グリッドシステムを適用するために、コンテナ要素が必要となります。
プロジェクトで使用するコンテナを、2つのコンテナから1つ選ぶことができます。
padding等の理由から、どちらのコンテナも入れ子ができない事に注意してください。
レスポンシブな固定幅のコンテナにするには、.containerを使用してください。
<div class="container">
...
</div>
viewportの幅全てに広がる全体幅のコンテナにするには、.container-fluidを使用してください。
<div class="container-fluid">
...
</div>
docs CC BY 3.0
このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。