creatersnest105

CSSでサイトのレイアウトを組む方法


サイトの構築に欠かせなくなってきたCSSで、少し悩ましいのが
ボックスを使ったレイアウトです。

キレイなレイアウトを作るためにはどうすればいいのか、
今回はシンプルなヘッダー、左右のコンテンツ、フッターの
作り方を紹介します。

image

イメージ

<div>タグを設定する

今回は4つのボックスを作るので、HTMLに<div>タグを4つ作ります。
はじめにメインとなる空の<div>タグを作り、その中にレイアウトを組みたい
4つの<div>タグを作ります。

HTML

スタイルを定義する

レイアウトはCSSで作るので、<div>タグにスタイルを設定します。
設定した<div>タグにidを付けていきます。

HTML

CSS

floatを使ってボックスを左右に配置する

CSSのfloatプロパティを使用して、box-bとbox-cを
左右に配置させます。

CSS

width、heightプロパティで幅を調整する

各ボックスの幅を指定することで、レイアウトを
自由に設定することができます。
横幅はwidthプロパティ、高さはheightプロパティで指定します。

CSS

clearプロパティでレイアウト崩れを防ぐ

floatプロパティで左右の回り込みを指定したときに、
背景が見えなかったり、設定したボックスが正しく表示されない
ことがあります。

それを回避するためにclearプロパティを使って、
レイアウト崩れを防ぎます。

clearプロパティは一番下の<div>タグ(box-d)に指定します。

CSS

実行すると図のように期待したレイアウトができました。
見やすくするために背景色も設定しました。

layout1

clearプロパティを設定しなかった時のレイアウト崩れ

clearプロパティやボックスのwidthプロパティを正しく設定しないと、
レイアウトが崩れてしまいます。

レイアウトが崩れてしまったときのコードの例です。

CSS

layout2

floatプロパティの回りこみ

一連の流れでレイアウトを組んでいきましたが、もう少しfloatプロパティについて
詳しく説明していきます。
floatプロパティを正しく理解していないと、レイアウト崩れの原因を招きます。

ボックスを追加していった場合、ボックスは上から下へ順番に表示されます。
ボックスを左右に表示させたいときに、floatプロパティを使用します。

floatプロパティには下記のように設定できます。

今回はbox-bとbox-cを左右に配置させたので、順を追って見ていきます。

まずはボックスを並べただけの状態です。

CSS

layout3

box-aからbox-dまで縦に並びます。

次に、box-bに「float: left;」を定義してみます。

CSS

layout4

box-bを左に寄せることでbox-cが右側に回りこみます。
灰色の部分はメインのボックスの背景色です。
box-bとbox-cの高さ(height)を比較したとき、今回は同じ高さなのでbox-dは
下に表示されていますが、box-bの高さがあれば、下図のようにbox-dも右側に回り込みます。

layout5

box-bのheightのほうが高いとき

今度はbox-bに「float: right;」を定義してみます。

CSS

これでbox-bがbox-cの右側に回りこみました。
box-cは左側にきています。

layout6

このようにfloatプロパティをうまく利用すれば様々なレイアウトの組み合わせができます。

最後に

今回はシンプルな構成のレイアウトの組み方を紹介しました。
レイアウトを組むときに一番注意しないといけないことが、
floatプロパティとレイアウト崩れを防ぐclearプロパティです。

floatプロパティではボックスの回り込みを、
clearプロパティではレイアウト崩れを防ぐ役割を持っています。

floatプロパティとclearプロパティは正しく理解しておく必要があります。

また、ボックスクラスの中には、whidthプロパティ等のほかに
フォントサイズや画像の挿入など、様々なことができます。
レイアウトをうまく活用して、センスあるレイアウトを是非作ってください。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleオシャレなテーブルデザインが参考になるサイトまとめ