Bootstrap は、モバイルファーストのレスポンシブ Web サイトを開発するための一般的な無料の HTML、CSS、JavaScript フレームワークです。 このフレームワークには Web ページで使用できるボタン、テーブル、ナビゲーション、画像カルーセルおよびその他のエレメント用のレスポンシブな CSS、HTML テンプレートが含まれています。 また、オプションの JavaScript プラグインがいくつか含まれているため、コーディングの基本的な知識しか持たないデベロッパーでも優れたレスポンシブ Web サイトを開発できます。

Dreamweaver では Bootstrap ドキュメントを作成できるだけでなく、Bootstrap を使って作成された既存の Web ページの編集も行えます。 完全に設計された Bootstrap ファイルであっても制作中の作品であっても、Dreamweaver で開いて、コードを編集できるだけでなく、ライブビューでの編集、ビジュアル CSS デザイナー、ビジュアルメディアクエリー、Extract などの視覚的な編集機能を使用してデザインを編集できます。

よくある質問

Dreamweaver で可変グリッドを使用しています。 Bootstrap の使用を開始するにはどうすれば良いでしょうか?

可変グリッドドキュメントを作成するとき、Web ページがレスポンシブになるように Dreamweaver で適切なクラスが自動的に適用されます。 必要なのは、コンテンツに集中し、様々なフォームファクターで Web ページをどのように表示するか決めることだけでした。

Bootstrap ドキュメントでも同様に、必要なのはコンテンツやデザインに集中することだけであり、Web ページの応答性は Dreamweaver によって対処されます。これは、Bootstrap フレームワークと緊密に統合されています。

現在、Dreamweaver では Bootstrap 3.4.1、4.4.1 および 5.3.8 のバージョンをサポートしています。

• Bootstrap 3.4.1 には、デバイスまたはビューポートのサイズ拡張に合わせて最大 12 列まで拡大できる、モバイルファーストのレスポンシブな可変グリッドシステムが用意されています。 これには、簡単なレイアウト用オプションの定義済みのクラスだけでなく、強力な mixin も含まれており、これによって、よりセマンティックなレイアウトを生成できます。 Bootstrap のドキュメントを参照してください。
• 大きな変更が加えられた Bootstrap 4.4.1 には、モバイルファーストの強力なフレキシブルボックスグリッドが含まれ、あらゆるシェイプのレイアウトを作成し、12 列システム、5 つのデフォルトレスポンシブ階層、Sass 変数と mixin、数十個の定義済みクラスによって拡大縮小することができます。 Bootstrap のドキュメントを参照してください。
• Bootstrap 5.3.8 では、CSS 変数の拡張によってカスタマイズを容易にし、カラーモードを拡張してダークモードをサポートし、グリッドシステムを改良して更新されたユーティリティを備え、そして jQuery への依存を排除し、クリーンで高速かつ最新の web 開発を可能にします。 Bootstrap のドキュメントを参照してください。

Dreamweaver で Bootstrap ドキュメントの使用を開始する際、Bootstrap スターターテンプレートを使用できます。 Dreamweaver では様々な種類の Web サイト向けの数多くのテンプレート（eCommerce、ポートフォリオなど）を使用できます。

Dreamweaver で、既存の可変グリッドドキュメントを Bootstrap ドキュメントに移行できますか?

いいえ、既存の可変グリッドドキュメントを Bootstrap ドキュメントに変換する直接的な方法はありません。 ただし、Dreamweaver で Bootstrap ドキュメントを作成およびデザインする際のユーザー操作性は、可変グリッドドキュメントの操作性とほとんど変わりません。 例えば、新規ドキュメントダイアログボックスから Bootstrap ドキュメントを直接作成することで作業を開始できます。 3 つの基本的なフォームファクター（モバイル、タブレット、デスクトップ）用の可変グリッドドキュメントの作成では、Bootstrap の場合、画面の基本サイズ（小、中、大、特大、超特大）のドキュメントを作成して作業を開始します。 Bootstrap ドキュメント内のエレメントをクリックしたとき表示されるレイアウト編集オプションも、可変グリッドドキュメントの場合と似ています。

最新バージョンの Dreamweaver で古いサイトを読み込むことができますか？

はい、最新バージョンの Dreamweaver で古いサイトを読み込むことができます。 これを実行すると、Dreamweaver によって site root/css/ フォルダーで Bootstrap CSS ファイルが検索されます。 

• サイトに Bootstrap v3 の CSS ファイルがある場合、サイトの管理／詳細設定／Bootstrap の Bootstrap のバージョンは 3.4.1 に設定されます。
• サイトに Bootstrap v4 の CSS ファイルがある場合、サイトの管理／詳細設定／Bootstrap の Bootstrap のバージョンは 4.4.1 に設定されます。
• サイトに Bootstrap v4 の CSS ファイルがある場合、サイトの管理／詳細設定／Bootstrap の Bootstrap のバージョンは 5.3.8 に設定されます。
• サイトの site root/css パスに Bootstrap の CSS ファイルがない場合、サイトの管理／詳細設定／Bootstrap の Bootstrap のバージョンは 5.3.8 に設定されます。

Bootstrap ドキュメントの作成

新規ドキュメントダイアログボックスで次のいずれかのオプションを使用して、Bootstrap Web サイトのデザインを開始できます。

• Bootstrap スターターテンプレート（スターターテンプレート／Bootstrap テンプレート）：このオプションを使うと、ページのレイアウトを一から作成することなくすぐに作業を開始できます。 必要に応じてテキストの編集やアセットの再配置を行うだけで、レスポンシブな Web サイトが完成します。 詳細は、Bootstrap スターターテンプレートを参照してください。
• Bootstrap フレームワークに基づいて HTML ドキュメントを作成する（新規ドキュメント／HTML／Bootstrap）：Dreamweaver 内で CSS や Bootstrap コンポーネントを使用して、Web サイトを 1 つずつ構築する場合に使用します。 詳細は、Bootstrap フレームワークに基づいた HTML ドキュメントの作成を参照してください。
  

Bootstrap スターターテンプレートの使用

Bootstrap スターターテンプレートを使用すると、人気のあるテーマの Web ページを即座に作成することができます。 フレームワーク内のすべての依存ファイルが自動的に保存されます。

Bootstrap フレームワークに基づいた、HTML ドキュメントの作成

Bootstrap フレームワークに基づいて HTML ドキュメントを作成することで、レスポンシブな Web サイトの構築を開始できます。 Bootstrap フレームワークファイルのセットを作成するか、既存のファイルを使用できます。 ドキュメントを作成したら、Dreamweaver 内の挿入パネルを使用して、アコーディオンやカルーセルなどの Bootstrap コンポーネントを追加できます。 または、Photoshop カンプがある場合は、Extract を使って画像、フォント、スタイル、テキストなどを Bootstrap ドキュメントに取り込めます。

Bootstrap ファイルを開く

Bootstrap ファイルを開くには、次のいずれかの方法を使用します。

• ファイル／開くをクリックし、Bootstrap HTML ファイルを参照します。
• （推奨）Dreamweaver サイトを作成し、すべての Bootstrap ファイルを含むフォルダーをサイトのフォルダーでポイントしてください。

Bootstrap HTML ファイルを Dreamweaver で開いた場合：

• 行がグレーの破線と角丸でハイライト表示されます
• 列は青の破線でハイライト表示されます

CSS ファイル名に 'bootstrap' が含まれている場合、Dreamweaver により、Bootstrap HTML ファイルに関連付けられた CSS ファイルが認識されます。 CSS ファイルリファレンスは次のいずれかまたはすべてになります。

• ローカルパス：

  縮小版または縮小されていない CSS ファイルがローカルに存在します。 以下に例を挙げます。

  <link href="css/bootstrap.css" rel="stylesheet"> または
  <link href="css/bootstrap.min.css" rel="stylesheet">

• リモートパス：

縮小版または縮小版ではないリモート CSS ファイル。 以下に例を挙げます。

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Bootstrap エレメントの非表示、非表示解除、管理

場合によっては、デザインの目的で、エレメントをビューポートに表示し、別のビューポートでエレメントを非表示にする必要があることがあります。 

Bootstrap エレメントを非表示にするには、「エレメントを隠す」を右クリックして選択します。 エレメントが一時的に非表示になります。

隠されたエレメントを表示または非表示解除するには、「非表示のエレメントを管理」を右クリックして選択します。 隠されたエレメントはグレーのハッシュ背景で表示されます。 エレメントの非表示を解除するには目のアイコンをクリックします。

Bootstrap コンポーネントの追加

挿入パネルの「Bootstrap のコンポーネント」オプションにより、Dreamweaver で Web ページに追加できるすべての Bootstrap のコンポーネントを一覧表示できます。 HTML ページにリンクされている bootstrap.css ファイルの Bootstrap のバージョンに応じて、挿入パネルにそれぞれのコンポーネントが一覧表示されます。  例えば、Bootstrap v4.0.0 では、カードやバッジなどの追加のコンポーネントが表示されます。 同様に、グリフアイコン、パネル、ウェル、およびサムネイルコンポーネントは Bootstrap v3.3.7 でのみ利用可能です。 Bootstrap のバージョンに応じて、挿入パネルに対応するコンポーネントが表示されます。 また、Spinners コンポーネントは、Bootstrap v4.4.1 でのみ使用できます。

挿入パネルのコンポーネントは、次の条件に基づいて表示されます。

• Bootstrap v5.3.8 では、オフキャンバス、モーダル、トースト、スクロールスパイ、フローティングラベルなどの新機能や強化されたコンポーネントにアクセスできます。 ジャンボトロンやメディアオブジェクトなどの古いコンポーネントは、削除されたか、更新されたユーティリティベースアプローチに置き換えられました。 リンクされた Bootstrap 5.3.8 フレームワークに基づいて、挿入パネルにこれらの変更が動的に反映されます。
• フォーカスがあるドキュメント：挿入パネルのコンポーネントは、ドキュメントにリンクされている Bootstrap ファイルの Bootstrap バージョンに応じて設定されます。 
• サイトの環境設定のバージョン：非 Bootstrap ドキュメントの場合、Dreamweaver のサイトの環境設定／詳細設定／Bootstrap でバージョンが検出されます。 選択されたバージョンに基づいて、適切なコンポーネントが設定されます。 初期設定では、新しいサイトのバージョンは 5.3.8 です。
• ファイルの保存先：いずれのサイトにも属さない非 Bootstrap ドキュメントの場合、挿入パネルでは 4.4.1 のコンポーネントが反映されます。

コンポーネントを追加するには、コンポーネントをパネルから Web ページ上にドラッグします。 コンポーネントをドロップする前に、ライブガイド、挿入サポート機能（DOM を使用）、配置サポート機能などのビジュアルエイドの値をメモしておきます。 これらの補助機能を使用して、ページにコンポーネントを迅速かつ正確に配置できます。 Web ページにエレメントを挿入する方法について詳細は、挿入パネルの概要に関する記事を参照してください。

行の追加

新しい行を追加したい行をクリックします。 次に、「新規列を追加」アイコンをクリックします。 Bootstrap 行が、それぞれ列が 6 つある 2 つの子列エレメントとともに追加されます。

追加された行のコードは次のようになります。

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

ここで、* は Dreamweaver の現在の画面サイズを表します。

列の追加

必要な列を選択し、「新しい列を追加」アイコンをクリックします。 選択した列が子なしで複製されます。

すべての空の列の高さは最小の 20 px になります。 ただし、この高さは実際にページに反映されません。これは、ライブビューで列内でのエレメントの挿入を簡易化する目的でのみ設定されます。

行と列の複製

複製する行または列をクリックし、右下隅の複製アイコンをクリックします。 行または列が、その内容と共に複製されます。

列のサイズ変更とオフセット

列のサイズ変更とオフセットは、様々なビューポート向けレスポンシブデザインを作成するときに特に重要になります。 

列のサイズ変更

Bootstrap v5.3.8 のドキュメントの場合、列のサイズ変更時に col-*-n クラスが同様に追加されます。ここで、* は現在のメディアクエリー（sm、md、lg、xl、xxl）を表し、n はエレメントが占める列の数を示します。 新しい xxl ブレークポイントにより、大画面でのレイアウト制御が向上しています。 さらに、固定列数を指定せずにコンテンツに基づいて自動的にサイズ調整を行う自動レイアウト列（例：col や col-md-auto）を使用できます。

目的の列をクリックし、右側のハンドルをドラッグしてサイズ変更します。 Bootstrap v4.0.0 のドキュメントの場合、列のサイズ変更時に col-*-n クラスが追加されます。ここで、* は現在のメディアクエリー（sm、md、ld、xl）を表し、n は配置する列の数を表します。 画面サイズが極小の場合、col-n クラスが追加されます。

Bootstrap v3.3.7 のドキュメントの場合、列のサイズ変更時に col-*-n クラスが追加されます。ここで、* は現在のメディアクエリー（xs、sm、md、lg）を表し、n は配置する列の数を表します。

Dreamweaver で現在の画面サイズが検出され、適切なクラスが追加されます。 特定のビューポートに合わせて列をサイズ変更するには、右下隅のオプションまたはスクラバーを使用してビューポートのサイズを変更します。 次に、必要に応じて列のサイズを変更します。

列のオフセット

Bootstrap v5.3.8 のドキュメントの場合、列をオフセットすると offset-*-n クラスが追加されます。ここで、* は現在のメディアクエリー（sm、md、lg、xl、xxl）を表し、n はエレメントがオフセットされる列の数を示します。 Bootstrap 5 では、より柔軟でレスポンシブなレイアウトを実現するために、マージンユーティリティクラス（例：ms-auto や me-auto）を使用した配置も可能です。

目的の列をクリックし、左側のハンドルをドラッグして列をオフセットします。 オフセットは、ハッシュ領域として表示されます。 Bootstrap v4.0.0 のドキュメントの場合、列をオフセットすると offset-*-n クラスが追加されます。ここで、* は現在のメディアクエリー（sm、md、lg、xl）を表し、n は配置する列の数を表します。

Bootstrap v3.3.7 のドキュメントの場合、列をオフセットすると col-*-offset-n クラスが追加されます。ここで、* は現在のメディアクエリー（xs、sm、md、lg）を表し、n は移動する列の数を表します。

Dreamweaver で現在の画面サイズが検出され、適切なクラスが追加されます。 特定のビューポートに合わせて列をオフセットするには、右下隅のオプションまたはスクラバーを使用してビューポートのサイズを変更します。 その後、必要に応じて列をオフセットします。

Bootstrap CSS 変数、ページプロパティ、CSS デザイナーパネルの回避策

• Bootstrap 変数は Bootstrap v5.3.8 で広く使用されており、テーマやその他のプロパティに基づいて動的な値選択を管理します。 カラーやその他の値などのプロパティは、選択したテーマに基づいて取得されます。 Bootstrap v5.3.8 が選択されている間、変数がユーザーインターフェイスに表示される場合があります。 明確で必須の要件がない限り、Bootstrap 変数の変更は避けてください。 

• ページプロパティを使用すると、HTML や CSS を手動で編集することなく、web ページの全体的な外観および基本的な動作を制御できます。 初期プロパティ値は、使用されている Bootstrap バージョンに関して、CSS ファイルの body タグに基づいています。 Bootstrap v3.4.1 と v4.4.1 にリンクされたページプロパティは標準値を直接表示しますが、Bootstrap v5.3.8 にリンクされたページプロパティは Bootstrap 変数と標準値の両方を表示します。 コンボボックスで提供される値を選択するか、標準値をカスタマイズすることで置き換えることができます。 これらの変数は標準 CSS 値ではないため、警告ダイアログが表示されます。 Bootstrap v5.3.8 で作業するときは、「OK」をクリックすることで、ワークフローを続行してください。  

• CSS designer パネルは CSS 値を変更する最も高度な場所です。Bootstrap v3.4.1 と v4.4.1 の CSS ファイルは選択されているコンポーネントの標準値を直接表示しますが、Bootstrap v5.3.8 ファイルは変数と選択されたコンポーネントプロパティに基づく直接値の両方を表示します。 Bootstrap で提供される値を変更／置換するときは、Bootstrap v5 変数の使用状況およびテーマ選択概念を参照してください。 Bootstrap v5.3.8 CSS 変数の変更は、コードを通じて行うことが推奨されます。 コンポーネントで直接、テーマ値を上書きする必要がある場合にのみ、Bootstrap v5.3.8 変数変更に CSS デザイナーパネルを使用してください。