ビデオ: CSSによるレイアウト：レスポンシブレイアウトとは｜lynda.com 日本版 2024
Dreamweaverでは、CSSマージンを使用してレイアウトを中央揃えにすることができます。多くのWebページデザインはページの中央に配置されているため、ウィンドウの幅や幅にかかわらず、ブラウザウィンドウの両側に浮かんでいるように見えます。これは、たとえブラウザウィンドウがページデザインよりもはるかに広い場合でも、デザインがページを塗りつぶすようにするのに役立ちます。
CSSで作成されたほとんどのWebページデザインは、すべてのページコンテンツを囲む1つのタグを作成し、そのタグを中心にするスタイルルールを含むスタイルをそのタグに適用することで実現します。次のステップごとの手順で見つかるように、タグを中央に配置するスタイルを作成することは、あなたが想像するほど明白ではありませんが、実装するのは簡単です。
<！ - 1 - >デザインの中心となるタグにIDスタイルを使用し、その名前を#wrapperまたは#containerとします。
あなたのページにすべてのコンテンツのタグが設定されていない場合は、ここにヒントを追加するヒントがあります。最初にクリックしてドラッグし、ページ上のすべてのテキスト、画像、およびその他のコンテンツを選択します。次に、[挿入]→[レイアウトオブジェクト]→[Divタグ]を選択します。 [Divタグの挿入]ダイアログボックスの[挿入ラップアラウンド]オプションが[挿入]ドロップダウンリストから選択されていることを確認します。
<！ - 2 - >残りのフィールドを空白のままにして、OKをクリックすると、ページのすべてのコンテンツにタグが追加されます。
ページデザイン全体を中央に配置するには、タグがページのすべてのコンテンツを囲んでいることを確認し、次の手順に従います。
-
「CSS Designerセレクタ」パネルのプラス記号をクリックします。
ページの内容によっては、スタイル名を入力できる新しいスタイル名または空白のフィールドがセレクタパネルに追加されます。
<！ - 3 - > -
Dreamweaverがパネルに追加した名前をダブルクリックして選択し、新しいスタイルに使用する名前に変更するか、空のフィールドをクリックして名前を入力します。
名前が追加されていない場合は、空のフィールドに希望する名前を入力します。スタイルには好きな名前を付けることができますが、クラススタイルを作成する場合は名前の前にピリオドを、IDスタイルを表す場合は#記号を必ず入力してください。
-
[プロパティ]パネルで、定義する幅、余白、その他の書式設定を指定します。
コンテナタグの幅は980ピクセルに設定されています。このようにタグをセンタリングする方法は次のとおりです。左と右の余白をAutoに設定します。こうすることで、ブラウザはタグの両側に同じ量のマージンスペースを自動的に追加し、効果的にページの中央に配置します。
-
ページ内のすべてのコンテンツを囲むIDを選択します。
正しいタグを選択したことを確認するには、をクリックしてページの主要部分のどこにでもカーソルを置き、ワークスペースの下部にあるクイックタグセレクタの一番左にリストされているタグをクリックします。
-
タグを選択した状態で、プロパティインスペクタのIDドロップダウンリストから作成したスタイルの名前を選択します。
スタイルを作成したときに定義したスタイルルールは、自動的にタグに適用されます。この例では、結果として、タグのサイズが980ピクセル幅に変更され、タグとそのすべての内容がページの中央に配置されます。
Dreamweaverがライブビューに設定されていると、一部の機能が動作しない場合があります。ライブビューは、最新のWebブラウザでページデザインがどのように表示されるかをプレビューするのに最適ですが、ライブビュー機能を使用すると、多くのDreamweaverの編集ツールが使用できなくなります。たとえば、プロパティインスペクタを使用するときにプロパティインスペクタが淡色表示されている場合は、[ライブ]ボタンの選択が解除されていることを確認してください。
