marginとautoとwidthとは？ゼロから始めるHTML/CSS講座Vol10

ゼロから始めるHTML/CSS講座autoの使い方

marginとautoとwidth

widthにブラウザ横幅より短い値を指定した場合、ボックスがブラウザ左側に寄って表示されます。

もしボックスの表示位置を変更したい場合、marginプロパティの値「auto」を利用します。 momotaro_display.cssのbody要素へ以下のCSSを追記してみましょう。

※見やすくするためp要素のheightプロパティ指定を削除しています

html, body, h1, p, a {
    padding: 0px;
}

html {
    border: solid 3px #ff00ff;
}

body {
    border: dashed 3px #000000;
    width: 50%;
    margin-left: auto;
}

h1 {
    border: solid 3px #ff0000;
    width: 50%;
}

p {
    border: solid 3px #0000ff;
}

a {
    border: solid 3px #00ff00;
}

body要素が右寄せで表示されます。

marginの値にautoを指定すると、[親要素の横幅 - 指定した要素の横幅]によりmarginを自動で算出します。autoを指定すると上記のように親要素の横幅に影響せず常に右寄せができます。

ボックスを中央揃いにしたい場合は、margin-left、margin-rightの両方にautoを指定します。

momotaro_display.cssのbody要素へ以下のCSSを追記してみましょう。

html, body, h1, p, a {
    padding: 0px;
}

html {
    border: solid 3px #ff00ff;
}

body {
    border: dashed 3px #000000;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    border: solid 3px #ff0000;
    width: 50%;
}

p {
    border: solid 3px #0000ff;
    height: 150px;
}

a {
    border: solid 3px #00ff00;
}

body要素が中央寄せで表示されます。

margin-left、margin-rightの両方にautoを指定すると、左右のmarginが等分になるよう自動的に算出します。

ボックスの中央揃いはWebページのデザインでよく使われるテクニックですので、是非覚えておきましょう。

なお実際に中央揃いをCSSで指定する場合、「margin:0auto」と1行で左右のmarginをautoに指定するのが一般的です。

課題

指定サイトのソースを表示し、「margin:0auto」が実際に利用されているテクニックであることを確認しましょう。

Googlehttps://www.google.co.jp/

Yahoo!JAPANhttp://www.yahoo.co.jp/

またこれにより、ブラウザの横幅を変更した際に左右の余白が自動で調節され常にコンテンツが中央に表示されることも確認してください。

NEXT LESSON ☛ ブロックボックスとインラインボックス

PREV LESSON ☛ htightとwidth