レスポンシブWebデザインとは、１つのデザインから デスクトップ、タブレット、スマートフォンなど どのデバイスでも最適表示できる Webサイトを構築する方法です Dreamweaver CC 2015の新しいレスポンシブWebデザイン機能には Bootstrap向けビジュアルツール Bootstrapのコンポーネント追加機能、ライブビューでのスクラバー操作 メディアクエリブレークポイントの可視化があります BootstrapはWebサイトのレイアウトや 機能を作成し、必要に応じて修正できる 人気のフレームワークです レスポンシブWebサイトをゼロから作成することも 新規または既存のBootstrapスタイルシートを使って レスポンシブデザインを開始することもできます 「Bootstrap」タブをクリックして 新しいBootstrap CSSファイルを作成します 3つのレイアウトの列数とサイズを選択するか デフォルトのまま「作成」をクリックして ファイルを保存すると CSS、JavaScript、フォントが作成され 対応するファイルがフォルダーに保存されます。
このBootstrapファイルで、 基本レイアウトとなるグリッドシステムが定義されます プレースホルダーテキストを削除し、スクラバーでリサイズして CSSファイルのブレークポイントを追加します ベースのBootstrap.cssは改変されません ダブルクリックしてライブビューを展開します Bootstrapのコンポーネントは、再利用可能なスタイル付きなので ボタン、レスポンシブ画像、カルーセル ナビゲーションバーなどの要素をすばやく設定できます ここにコンテナコンポーネントを追加して、ほとんどのコンテンツを入れます 最後に、ギャラリー画像を追加します DOMパネルでは簡単にアート列に移動して 新しい画像の行を追加できます Bootstrapの列付きグリッド行を使えば 列が定義済みの行を挿入できます 3列のデフォルトで「OK」をクリックし ライブビューを見ると、指定した行と列のdivに Bootstrapスタイルシートのclassセレクターが 自動的に適用されています さらにタブレットやスマートフォンなどの レイアウトに応じて正しい列幅で 表示するためのセレクターを Bootstrapスタイルシートから追加し 画像を挿入して、各列にネストします ここに2つ画像を追加します ライブビューでは簡単に行と列を追加できます 最後のdiv列のアイコンをクリックして 2つの画像の列を追加します Bootstrapクラスはリアルタイムに更新され すぐに効果を確認できます 「メディアクエリーブレークポイントの可視化」で レイアウトを視覚的にテストします Dreamweaver CCは最新式レスポンシブサイトを 作成できる全機能を備えたツールです 最新版で新しいレスポンシブ機能を ぜひお試しください
