Skip to main content Skip to docs navigation
GitHubで見る

はじめに

Get started with Bootstrap

世界で最も人気のあるフレームワークBootstrapで始めましょう。CDNとテンプレートを使ってモバイルファーストなサイトを構築できます。

項目

すぐに始める

BootstrapのプロダクションレディなCSSとJavaScriptをCDN経由で取り込むことで、ビルドステップを必要とせず、すぐに始められます。Bootstrap CodePenのデモをご覧ください。


  1. プロジェクトの最上位フォルダにindex.htmlファイルを新規作成します。 モバイルデバイスでの適切なレスポンシブ動作のために<meta name="viewport">タグも含めてください。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. BootstrapのCSSとJSを入れます。 CSSのための<link>タグを<head>内に、JavaScriptバンドル（ドロップダウン、ポッパー、ツールチップを配置するPopperを含む）のための<script>タグを</body>を閉じる前に配置します。CDNリンクについて詳しくはこちら。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

また、Popperと私たちのJSを別々に含めることも可能です。ドロップダウン、ポップオーバー、ツールチップを使う予定がない場合は、Popperを含めないことで何キロバイトか節約することができます。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
  1. Hello, world! ブラウザでページを開いてBootstrapが適用されたページを確認してみましょう。これで自分だけのレイアウトを作成し、数十個のコンポーネントを追加して公式サンプルを活用してBootstrapでビルドを始めることができます。

CDNリンク

参考までに、当社の主要なCDNリンクはこちらです。

Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

また、CDNを利用して、コンテンツページに記載されている追加ビルドを取得することができます。

次のステップに進む

JSコンポーネント

どのコンポーネントがJavaScriptやPopperを必要とするのか気になりますか？ 下記のコンポーネントリンクを押して確認してみてください。一般的なページ構造がよくわからない場合は、サンプルページテンプレートをご覧ください。

JavaScriptを必要とするコンポーネントを表示する
  • アラートを閉じる
  • 状態を切り替えるためのボタン、チェックボックス/ラジオ機能
  • カルーセルのすべてのスライド動作、制御およびインジケータ
  • コンテンツの可視性の折りたたみ切り替え
  • ドロップダウンの表示と位置 (も、ポッパーが必要)
  • モーダルの表示、位置、スクロールの動作
  • ナビゲーションバーとオフキャンバスでの反応型動作を実装するための折りたたみプラグインの拡張機能
  • コンテンツペインを切り替えられるTabプラグインを搭載したナビ
  • 表示、位置決め、スクロール動作のためのオフキャンバス
  • スクロール動作とナビゲーション更新のためのスクロールスパイ
  • トーストを表示・閉じる
  • ツールチップとポップオーバーによる表示と位置 (も、ポッパーが必要)

重要なグローバル

Bootstrapは、使用する際に注意しなければならない重要なグローバルスタイルと設定をいくつか採用しており、そのすべてがクロスブラウザスタイルのnormalizationを目的としています。早速、見ていきましょう。

HTML5 doctype

Bootstrapは、HTML5 doctypeの使用を必要とします。これを使用しないと、不完全なスタイルで表示されてしまいますが、これを含めることで大きな問題は発生しません。

<!doctype html>
<html lang="en">
  ...
</html>

レスポンシブなmetaタグ

Bootstrapは、mobile firstで開発されています。これは、最初にモバイルデバイス用にコードを最適化し、次にCSSメディアクエリを使用して必要に応じてコンポーネントをスケールアップする戦略です。すべてのデバイスに対して適切なレンダリングとタッチズームを保証するために、レスポンシブビューポートメタタグを<head>に追加してください。

<meta name="viewport" content="width=device-width, initial-scale=1">

すぐに始めるで、その実例を見ることができます。

Box-sizing

CSSでのサイズ調整をよりわかりやすくするために、グローバルなbox-sizingの値をcontent-boxからborder-boxに切り替えています。これにより、paddingが要素の最終的な幅の計算に影響を与えないようになりますが、Google MapsやGoogle Custom Search Engineなどの一部のサードパーティ製ソフトウェアで問題が発生する可能性があります。

上書きする必要がある場合は。次を使用してください：

.selector-for-some-widget {
  box-sizing: content-box;
}

上記のスニペットでは、::beforeと::afterで生成されたコンテンツを含むネストされた要素は、.selector-for-some-widgetに対して指定されたbox-sizingを継承します。

ボックスモデルとサイジングの詳細についてはCSS Tricksをご覧ください。

Reboot

ブラウザ間のレンダリングを改善するために、Rebootを使用してブラウザとデバイス間の不一致を修正し、一般的なHTML要素をもう少し慎重にリセットすることができます。

コミュニティ

Bootstrapの開発に関する最新情報を入手し、これらの有用なリソースを利用してコミュニティに働きかけましょう。

  • Bootstrap公式ブログを購読。
  • GitHub Discussionsで質問したり、探したりしてください。
  • 他のBootstrapユーザーとIRCで会話してみましょう。irc.freenode.netサーバーの##bootstrapチャンネルで行います。
  • 実装方法についてのヘルプはStack Overflow(タグはbootstrap-5)で受けることができます。
  • 開発者は、Bootstrapの機能を変更または追加するパッケージをnpmまたは同様の配信メカニズムで配布する場合、発見性を高めるためにキーワードbootstrapを使用する必要があります。

Twitterで@getbootstrapをフォローすれば、最新のゴシップや素晴らしいミュージックビデオを見ることができます。