ホームページ制作の際、デザイン通りのレイアウトに仕上げるために、様々なノウハウが必要とされます。レイアウトはユーザビリティに大きく影響する大切な点であり、コーディングにあたっては思った通りに要素を配置できるスキルが求められます。そこで、今回のテーマはCSSの要素の並べ方です。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。

要素を配置する

まず最初に要素について確認します。要素とは、ソースコードの中でタグの開始から終了までの領域のことを言います。要素の中に要素が存在する場合は、外側にある要素を親要素、親要素の中に存在する要素は子要素と呼びます。いわゆる入れ子構造です。この要素を配置するためにpositionというプロパティを使います。

positionを使うと、要素を好きなところに配置できます。ただし、指定する値により効果が異なりますので、static、relative、absolute、fixedの4種類の値について理解する必要があります。これらの値の指定とあわせて使用する位置を表すプロパティを確認しておきましょう。

位置指定のプロパティについて

以下に挙げる4種類とともに10px、20pxといった距離を指定して使います。

1）top・・・起点となる位置の上からの距離を示します。　
2）right・・・起点となる位置の右からの距離を示します。
3）bottom・・・起点となる位置の下からの距離を示します。
4）left・・・起点となる位置の左からの距離を示します。

positionに指定する値（static、relative、absolute、fixed）

1）static

positionの初期値であるため、特に指定しなくてもよい値です。数値指定しても位置を動かせないので、この状態で利用することはあまりないでしょう。位置の調整はrelativeやabsoluteを使わなければいけません。あくまで初期値として覚えましょう。

2）relative

現在の位置を基準に要素の位置を指定します。相対配置です。たとえば、以下のようなボックスを配置してみます。sample1を親要素でありsample2が子要素です。「position: relative;」はsample2のボックスに設置します。sample2には 「top: 100px;」を設置しているため、上から100px移動した位置に配置するものです。その場合、sample2の起点は現在の位置である左上を起点しています。

【sample1＝親要素／sample2＝子要素とする】

.sample1{
background: #82ECBF;
width: 200px;
height: 200px;
}

.sample2{
　 position: relative;
top: 100px;
left: 0px;
background: green;
width: 200px;
height: 200px;
}

3）absolute

現在の位置にかかわらず位置を指定できる絶対配置です。起点を決められます。要素を重ねる場合に自由に配置を指定できるので便利です。親要素にrelativeやfixedを指定すれば、親要素からはみ出すことなく配置できます。

以下の例はabsoluteが絶対配置であることを確認できるように、sample1にテキストを表示させておきました。絶対配置でなければテキストを避けてsample2が配置されますが、absoluteを指定することで、テキストを避けず、テキストの上にsample2を被せて配置できます。

【sample1＝親要素／sample2＝子要素とする】

【CSS】
.sample1{
　 background: #82ECBF;
width: 200px;
height: 200px;
}

.sample2{
position: absolute;
top: 40px;
left: 70px;
background: green;
width: 200px;
height: 200px;
}

【HTML】

テストです。テストです。テストです。テストです。テストです。

4）fixed

画面に表示されている部分を起点にします。画面の決まった位置に要素を固定できます。ページをスクロールしてもメニューなどの要素を固定する際に利用します。
たとえば、sample2に「position: fixed;」を設定します。sample2は上から100px、左から50pxの位置に固定されており、ページをスクロールしてもsample2は動いていないことが確認できるでしょう。

.sample1{
background: #82ECBF;
width: 100px;
height: 800px;
}

.sample2{
　 position: fixed;
top: 100px;
left: 50px;
background: green;
width: 200px;
height: 200px;
}