Dreamweaver でこれらのチュートリアルをお試しください
モダンでレスポンシブな web ページをデザイン
Webサイトを中央揃えにする
HTMLとCSSを使用してwebサイトを中央揃えにします。
必要な情報
サンプルファイルをダウンロード
HTMLとCSSを使ってwebページを正しくレイアウトする方法については、「HTMLレイアウトを設定する 」と「CSSによるwebページのレイアウト 」も参照してください。
初期設定では、webのコンテンツは左揃えとなります。しかし多くの場合、中央揃えの方が見栄えが良く、デザインに目を引きつける効果があります。そのためには、HTMLでページを正しく構成し、ブラウザーで中央に表示されるようにCSSを適用する必要があります。
始める前に
プロジェクトファイルをダウンロードして保存します。Dreamweaverでcenter-website.html を開き、分割ビューでソースコード を表示します。
タグ内のすべてを囲む
タグを追加します。
タグがすべてのコンテンツを「ラップ（包む）」するので、
のid は「wrapper」とします。終了タグ
を忘れずに付けてください。各ページのすべてのコンテンツを囲む
タグを作成すると、セクション全体を制御するCSSを適用しやすくなります。このチュートリアルでは、CSSを使ってすべてのコンテンツを中央揃えにします。
HTML
（コンテンツ）
style.css を開き、/* Start Here */セクションを見つけます。
表示 ／左右に分割のチェックマークをオフにします。 コードビューとライブビューが上下に表示され、コンテンツの中央揃えが確認しやすくなります。
HTMLの
に#wrapper という名前で設定したidセレクターに、margin: プロパティを追加します。
margin プロパティには、top 、right 、bottom 、left という4種類の値を設定できます。このため、それぞれを個別に指定すると、CSSはmargin:0 auto 0 auto; となります。しかし、top とbottom の値、left とright の値はそれぞれ等しいので、次のように省略して書くことができます。
margin: 0 auto;
ページの上下にはスペースが不要であるため、topとbottomの値は0 です。左右にはスペースを均等に分割して入れたいので、leftとrightのマージン値はauto に設定します。これでレイアウトが中央揃えになります。
CSS
#wrapper {
...
margin: 0 auto;
}
「プレビュー」をクリックして「ブラウザーでのプレビュー 」の一覧からブラウザーを選択し、中央揃えにしたレイアウトを確認します。
ファイルを保存してから、変更結果を確認してください。
