HTMLとCSSを使用してwebサイトを中央揃えにします。
webサイトを中央揃えにする

HTMLとCSSを使ってwebページを正しくレイアウトする方法については、HTMLレイアウトを設定するCSSによるwebページのレイアウトも参照してください。

webサイトを中央揃えにする

初期設定では、webのコンテンツは左揃えとなります。しかし多くの場合、中央揃えの方が見栄えが良く、デザインに目を引きつける効果があります。そのためには、HTMLでページを正しく構成し、ブラウザーで中央に表示されるようにCSSを適用する必要があります。

center-website.htmlを開く

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでcenter-website.htmlを開き、分割ビューでソースコードを表示します。

ラッパーdivを作成する

ラッパーdivを作成する

<body>タグ内のすべてを囲む<div>タグを追加します。<div>タグがすべてのコンテンツを「ラップ(包む)」するので、<div>idは「wrapper」とします。忘れずに終了タグ</div>を付けてください。

各ページのすべてのコンテンツを囲む<div>タグを作成すると、セクション全体を制御するCSSを適用しやすくなります。このチュートリアルでは、CSSを使ってすべてのコンテンツを中央揃えにします。

HTML

<div id="wrapper">
(コンテンツ)
</div>

CSSでマージンを設定する

CSSでマージンを設定する

style.cssを開き、/* Start Here */セクションを見つけます。

表示/左右に分割のチェックマークをオフにします。これでコードビューとライブビューが上下に表示され、コンテンツの中央揃えが確認しやすくなります。

margin:プロパティを、HTMLの<div>に適用したidの、#wrapperセレクターに追加します。

marginプロパティには、toprightbottomleftという4種類の値を設定できます。このため、それぞれを個別に指定するとCSSは、margin:0 auto 0 auto;となります。しかし、topbottomの値、leftrightの値はそれぞれ等しいので、次のように省略して書くことができます。

margin: 0 auto;

ページの上下にはスペースが不要なので、topとbottomの値は0です。左右にはスペースを均等に分割して入れたいので、leftとrightのマージン値はautoに設定します。これでレイアウトが中央揃えになります。

CSS

#wrapper {
    ...
    margin: 0 auto;
}

ブラウザーでのプレビュー

完成

ブラウザーでのプレビュー」をクリックしてブラウザーを選択し、中央揃えにしたレイアウトを確認します。

ファイルを保存してから、変更の反映を確認します。

04/24/2018
このページは役に立ちましたか。