【初心者ノート】各要素の配置を調整する

カンプイメージ

前回の記事「スタイルシートでページの背景に色をつける」でbody要素、article要素、header要素、footer要素の背景に色をつけました。

今回は各要素の大きさ(ボックスの大きさ)を調整します。

HTMLのボックスモデル

WEBブラウザは、ボックスモデルの考え方に基づいてWEBにコンテンツ(HTMLの各要素)を配置します。
ボックスモデルの考え方については別の記事「WEBデザイン HTML CSSのボックスモデル その1」にまとめていますので、そちらを参照してください。

HTMLからブラウザにボックスが作られるイメージ

articleの大きさを設定する

スタイルシート要素の大きさなどを設定するには、ボックスの大きさ(widthheight)、内余白(padding)、外余白(margin)、境界線(border)などのプロパティを使います。

大きさを設定する前後のイメージです。

HTMLボックスの大きさ設定前後のイメージ

上記のように、headerarticlefooterボックス幅を小さくして左右に余白を表示させるためには、スタイルシートで各要素をつぎのように設定します。

ボックスに関する設定値

 width(幅)
height(高さ)
paddingmargin
articlewidth:600px ;設定なしmargin-right: auto;
margin-left: auto;
headerwidth:600px ;設定なしmargin-right: auto;
margin-left: auto;
footerwidth:600px ;設定なしmargin-right: auto;
margin-left: auto;

width:600px; というのは、ボックス幅600ピクセルにするという指定です。

CSSの記述

CSSファイルには次のように記述します。

articleheaderfooterの各要素のセレクタは、背景色を設定する際にすでに記述していますので、widthプロパティやmarginプロパティはすでに記述されているプロパティに続けて記入すればいいです。

プロパティを複数記述する場合は、プロパティごとに改行するなどして見やすくするといいでしょう。

1つのセレクタに複数のプロパティを記述するときは、必ず各プロパティ値の後ろにセミコロン(;)を記述しなければなりません。
セミコロン(;)が漏れてしまうとそれ以降のスタイルシートの設定が無視されてしまうので、注意が必要です。

margin

margin-left margin-rightauto にすると、ボックス左右の外余白が自動的に計算されて、ボックスを中央に配置することができます。
ブラウザの大きさを変えても常に中央配置することができます。

まとめ

HTMLの要素にwidthmarginを設定することで、ブラウザに次のように表示することができました。

次回はボックスを罫線で囲んでみたいと思います。

スポンサーリンク

シェアする

フォローする

スポンサーリンク