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



marginとautoとwidthとは?ゼロから始めるHTML/CSS講座Vol10
目次
  1. ゼロから始めるHTML/CSS講座autoの使い方
  2. marginとautoとwidth
  3. 課題

ゼロから始める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;
}

css-auto-1-639 body要素が右寄せで表示されます。

body-right-margin 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;
}

css-auto-2-639 body要素が中央寄せで表示されます。

momotaro_display-css-2 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

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp