マニュアルキャンセル

Bootstrap を使用したレスポンシブな Web サイトのデザイン

検索

最終更新日 : 2021年4月28日

モバイルファーストのレスポンシブ Web サイトでは、Dreamweaver で Bootstrap スターターテンプレートを使って Bootstrap コンポーネントをドラッグ＆ドロップします。

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

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

注意：

現在サポートされている Bootstrap のバージョンには、v4.4.1 と v3.4.1 があります。

よくある質問

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

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

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

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

「Bootstrap 3.4.1 には、デバイスまたはビューポートのサイズ拡張に合わせて最大 12 列まで拡大できる、モバイルファーストのレスポンシブな可変グリッドシステムが用意されています。これには、簡単なレイアウト用オプションの定義済みのクラスだけでなく、強力な mixin も含まれており、これによって、よりセマンティックなレイアウトを生成できます」- Bootstrap ドキュメント。

「主要な変更が追加された Bootstrap 4.4.1 には、すべてのシェイプのレイアウトを構築するためのモバイルファーストの強力なフレキシブルボックスが備わり、12 列システム、5 つのデフォルトのレスポンシブ層、Sass 変数と mixin、数十個の定義済みのクラスによって拡張を実現します」- Bootstrap ドキュメント。

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

Bootstrap ドキュメントを一から作成するには、Bootstrap ドキュメントの作成に記載された手順に従っていつでも作成できます。

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 に設定されます。
サイトの site root/css パスに Bootstrap の CSS ファイルがない場合、サイトの管理／詳細設定／Bootstrap の Bootstrap のバージョンは 4.4.1 に設定されます。

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 ドキュメントの作成

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

ファイル／新規作成をクリックします。
新規ドキュメントダイアログボックスで、新規ドキュメント／HTML をクリックし、「Bootstrap」タブをクリックします。
新しい bootstrap.css ファイル（およびその他の Bootstrap ファイル）を作成するには、次の操作を実行します。

Bootstrap CSS を新規作成するか、既存の CSS を使用するかを指定します。

CSS を新規作成する場合は、css フォルダーがサイトルートに作成され、bootstrap.css ファイルが新しいフォルダーにコピーされます。既存の CSS を使用する場合は、パスを指定するか、CSS の場所を参照します。
1. 「新規作成」をクリックします。
  
  新しい Bootstrap ドキュメントの作成
2. （オプション）その他の CSS をドキュメントに添付するには、「CSS を添付」セクションのをクリックします。外部スタイルシートの添付ダイアログボックスが表示されます。設定を指定して、「OK」をクリックします。
3. 「事前に作成したレイアウトを含める」オプションにより、基本的な Bootstrap ドキュメント構造が提供されます。
  
  基本的な構造を使用しないで、空のドキュメントで開始する場合には、「事前に作成したレイアウトを含める」オプションの選択を解除します。
4. （オプション）初期設定のレイアウトには、30 ピクセルの余白がある 12 の列が含まれています。初期設定の画面サイズは、576 px、768 px、992 px および 1200 px です。
  
  これらの設定を変更する場合は、「カスタマイズ」をクリックします。指定内容に従って bootstrap.css ファイルが変更されます。
  
  注意：
  
  Bootstrap バージョン 3.4.0 では、初期設定の画面サイズは 768 px、992 px および 1,200 px です。
5. Extract パネルを開くには（閉じている場合）、「Extract を使用して Photoshop カンプからページをビルド」を選択します。これにより、Photoshop カンプからアセットを抽出してすばやく作業を開始できます。
  
  デフォルトでは、新規サイトは Bootstrap バージョン 4.4.1 を使用して作成されます。ドキュメントを作成すると、サイトのルートフォルダーに css と js フォルダーを確認できます。ただし、Bootstrap バージョン 3.4.1 を使用してサイトを作成する場合は、サイト／サイトの管理を選択します。サイトのルートフォルダーを選択し、詳細設定／Bootstrap をクリックしたら、Bootstrap のバージョンドロップダウンフィールドで、3.4.1 を選択します。Bootstrap バージョン 3.4.1 では、サイトのルートフォルダーに css、js およびフォントのフォルダーが見つかります。
  
  Bootstrap バージョン 4.4.1 の選択
  
  Bootstrap 4.4.1 ページを作成した場合、jQuery バージョン 3.4.1 がサポートされます。Bootstrap スターターテンプレートは、Bootstrap バージョン 4.4.1 に更新されます。
  
  Bootstrap コンポーネントを Bootstrap ページに追加した場合、Bootstrap 4.0.0 ページを Bootstrap 4.4.1 に、jQuery バージョンを 3.4.1 にアップグレードできます。Bootstrap コンポーネントをページに挿入したときに表示されるダイアログで「はい」をクリックします。
  
  バージョンの互換性確認ダイアログ
  
  Bootstrap 3.4.1 の確認ダイアログ
  
  jQuery ポップアップダイアログ
  
  Bootstrap 4.0.0 サイトを読み込むとき、または Dreamweaver リリースの以前のバージョンから次のバージョンにサイトを移行するとき、Bootstrap バージョンは 4.4.1 に設定されます（サイト設定／詳細設定／Bootstrap）。
注意：

Bootstrap 4.3.1 では、グリッド行列の高さが 1 px から 0 px に変更されています。このため、ライブビューで表示するには、グリッド行列にコンテンツを追加する必要があります。
既存の Bootstrap フレームワークファイルを使用するには、次の操作を実行します。
1. 「既存のファイルを使用」をクリックし、bootstrap.css ファイルのパスを指定します。CSS を保存する場所を参照することもできます。
  
  既存のフレームワークファイルを使用した Bootstrap ドキュメントの作成
2. （オプション）その他の CSS をドキュメントに添付するには、「CSS を添付」セクションのをクリックします。外部スタイルシートの添付ダイアログボックスで、設定を指定して「OK」をクリックします。
3. 「事前に作成したレイアウトを含める」オプションにより、基本的な Bootstrap ドキュメント構造が提供されます。基本的な構造を使用しないで、空のドキュメントで開始する場合には、「事前に作成したレイアウトを含める」オプションの選択を解除します。
「作成」をクリックします。

注意：

作成される bootstrap.css ファイルは読み取り専用です。そのため、CSS デザイナーを使用してこれらのスタイルを編集することはできません。CSS デザイナーのプロパティペインは、Bootstrap ファイルで無効になります。

Bootstrap ドキュメントのスタイルを変更するには、別の CSS ファイルを作成して既存のスタイルを上書きし、ドキュメントにそれを添付します。

Bootstrap ファイルを開く

注意：

Dreamweaver では Bootstrap バージョン 3 以降でのみ作成されたドキュメントを開いて編集することをお勧めします。

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 ファイル。以下に例を挙げます。

CDN

注意：

Dreamweaver では、リンクとインポートタグの両方で Bootstrap スタイルシートがサポートされています。ただし、入れ子のインポート（代わりに別のスタイルシートをインポートするスタイルシートへのリンク）はサポートされていません。

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

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

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

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

Bootstrap コンポーネントの追加

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

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

フォーカスがあるドキュメント：挿入パネルのコンポーネントは、ドキュメントにリンクされている Bootstrap ファイルの Bootstrap バージョンに応じて設定されます。
サイトの環境設定のバージョン：Bootstrap でないドキュメントに対して、Dreamweaver ではサイトの環境設定／詳細設定／Bootstrap でバージョンが検索されます。このオプションのバージョンに基づいて、適切なコンポーネントが設定されます。初期設定では、新しいサイトのバージョンは 4.4.1 です。
ファイルの保存先：いずれのサイトにも属さない非 Bootstrap ドキュメントの場合、挿入パネルでは 4.4.1 のコンポーネントが反映されます。

Bootstrap 4.0.0 でサポートされるコンポーネント — Bootstrap 4.4.1 でサポートされるコンポーネント

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

行の追加

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

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

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

列の追加

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

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

行と列の複製

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

注意：

「行を追加」または「列を追加」オプションでは、行または列はクラスと共に複製されますが、内容は複製されません。

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

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

列のサイズ変更

目的の列をクリックし、右側のハンドルをドラッグしてサイズ変更します。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 v4.0.0 のドキュメントの場合、列をオフセットすると offset-*-n クラスが追加されます。ここで、* は現在のメディアクエリー（sm、md、lg、xl）を表し、n は配置する列の数を表します。

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

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る