ホームページ制作の際、デザイン通りのレイアウトに仕上げるために、様々なノウハウが必要とされます。レイアウトはユーザビリティに大きく影響する大切な点であり、コーディングにあたっては思った通りに要素を配置できるスキルが求められます。そこで、今回のテーマは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;
}

テキストの位置指定

要素の配置の中で、インラインの左寄せ、右寄せ、中央寄せなどの調整方法にも触れておきます。text-alignを以下のように設定だけです。ちなみに、上下中央に揃える場合は「vertical-align: middle;」を使用します。

左寄せ）text-align: left;
右寄せ）text-align: right;
中央寄せ）text-align: center;

また、ボックスの中に配置したテキストがはみ出す場合の処理はoverflowを記述します。

はみ出した部分をそのままにする）overflow: visible;
はみ出した部分を隠す）overflow: hidden;
はみ出した部分をスクロールで閲覧できるようにする）overflow: scroll;

要素の表示し方を制御する（display）

さらに思い通りに要素を並べられるようになるにはdisplayプロパティを覚える必要があります。displayプロパティを使うにあたり、以下のあたり把握しておきましょう。「display: 値」という形式で指定します。

block

要素が横に広がっている状態であり、次の要素は下に配置されます。幅や高さ、余白を自由に設定でき、以下のような記述が可能です。縦にブロックが積み重ります。

【CSS】
.sample{
display: block;
background: #82ECBF;
width: 200px;
height: 20px;
padding: 10px;
margin: 5px;
}

【HTML】

テスト
テスト2
テスト3

inline

ブロック要素は、テキストの一部に使われて横に並ぶ性質があります。そのため、blockの中に存在するのが一般的です。幅と高さは指定できませんが、左右の余白の調整は可能です。上下の余白は調整できませんので注意が必要です。以下の例はテキストの部分だけに背景色がついたインラインらしいものです。

【CSS】
.sample{
display: inline;
background: #82ECBF;
}

【HTML】

テスト
テスト2
テスト3

inline-block

blockと inlineの両方の性質を持っており、幅と高さを設定できるのが特徴です。
以下の例は幅と高さを指定し、余白の調整も行ったメニューのようなデザインです。横並びに配置されたメニューを作成できます。

【CMS】
.sample{
display: inline-block;
background: #82ECBF;
width: 200px;
height: 20px;
padding: 10px;
margin: 5px;
text-align:center;
}

【HTML】

テスト
テスト2
テスト3

none

要素を非表示にします。「display:none; 」を指定するだけです。

要素を横並びにする

もっと巧みにレイアウトをしたいというニーズにお応えして、要素を横並びにする色々な方法についてご説明しますので、試してみてください。

float

初心者がつまづきやすいと言われているfloatです。画像などを避けた形で文章が回り込み雑誌のようなレイアウトが可能になります。以下の例は青い資格を回り込んでテキストが配置される簡単な例です。floatは、右側に回り込ませる場合はleft、左側に回り込ませる場合はrightを指定します。

【CSS】
.container{
width: 300px;
}

.sample1 {
background-color: blue;
width: 150px; height: 100px;
float: left;
}

【HTML】

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

flexbox

Flexboxは、シンプルなコード記述でレイアウト調整がスムーズにできるのが特徴です。親要素に指定したflexプロパティにより、子要素の配置を自由に変更できます。flexboxには色々な種類のプロパティがあります。ここでは、「display: flex;」を使って子要素を横並びにする例をご紹介します。

【CSS】
.container {
display: flex;
}
.flexbox {
color: white;
font-size: 15px;
text-align: center;
margin-right: 5px;
padding: 20px;
width: 100px;
}
.sample1 { background: orange }
.sample2 { background: blue }
.sample3 { background: pink }
.sample4 { background: green }
.sample5 { background: aqua }

【HTML】

テスト1
テスト2
テスト3
テスト4
テスト5

grid

gridをマスターすると、面白いレイアウトが作れるようになります。floatとflexboxではできなかったコンテンツの細かい配置指定が可能になります。たとえば、以下のように「display: grid; 」を指定して、grid-template-columnsで分割する列を指定できます。例の場合、200pxとfrで指定するメインコンテンツスペース、150pxの3分割になります。gridは組み方により、複雑に見えるレイアウトも作れ、詳細は割愛しますが、覚えておくとかなり使えるものです。

.container{
display: grid;
grid-template-columns: 200px 1fr 150px;
}

まとめ

今回はCSSを使って要素を並べるには様々な方法があることをご紹介しましたが、実際にレイアウトをするケースによって、適した方法は異なります。様々なケースに対応したCSSの記述ができるように、どのような方法があるかだけでも幅広くアンテナを立てて記憶しておきましょう。

もっとCSSの使い方を知る

CSSで背景を作る。backgroundプロパティの使い方を解説

CSSで背景を作る。backgroundプロパティの使い方を解説

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。