Web プログラマになる

:: be web programmer ::

スタイルシートによるレイアウト

HTML 基礎・実践編の「表を作成する」のページでは、表によるレイアウトについて説明しました。

ここではもう一度、レイアウトについて説明します。
今度は、スタイルシートによるレイアウトです。

●一般的なレイアウト

スタイルシートの一般的なレイアウトでは、div 要素および float プロパティを使用します。

div 要素は、ブロックレベル要素を含めることができる汎用的な要素です。
この要素に float プロパティを指定することで、レイアウトが変更されます。

float プロパティに指定できる値は、次のとおりです。

値	内容
left	要素内容を左側に寄せます。後に続く内容をその右側に回り込ませます。
right	要素内容を右側に寄せます。後に続く内容をその左側に回り込ませます。
none	配置をブラウザに任せます。（初期値）

例として、２つの文章を横に並べてみます。

≪sample01.css≫

div.col {
  float: left;
  width: 160px;
}

p {
  font-size: 90%;
  margin-right: 32px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３つの言語 その２　CSS</title>
  <link rel="stylesheet" type="text/css" href="sample01.css">
 </head>
 <body>
  <div class="col">
   <p>見た目やデザインは、スタイルシート（CSS）の役目です。</p>
  </div><!-- col -->
  <div class="col">
   <p>
    スタイルシートを使うと、文字の色や大きさを自由に
    変えることができます。
   </p>
  </div><!-- col -->
 </body>
</html>

≪表示≫

float に left を指定することで、左寄せで文章が横に並びます。

これを right に変更すると、右寄せで文章が横に並ぶようになります。
後に続く文章は、左側にきます。

div.col {
  float: right;
  width: 160px;
}

≪表示≫

●くずれないレイアウト

上の例の場合、ブラウザの幅を小さくしていくと、レイアウトがくずれてしまいます。

これを防ぐには、２つの方法があります。

(1) 親要素の幅を絶対値で指定する

上の例において、div 要素の親要素は body 要素になります。

sample01.css に body 要素を追加し、その幅（width）を絶対値で指定します。

≪sample01.css≫

body {
  width: 400px;
}

div.col {
  float: left;
  width: 160px;
}

p {
  font-size: 90%;
  margin-right: 32px;
}

親要素の幅には、子要素の幅の合計以上の値を指定します。こうすることで、ブラウザの幅を小さくしてもレイアウトがくずれなくなります。

なお、body 要素の幅を絶対値にしてしまうと、ページの幅が固定されてしまいます。ページの幅を固定にしたくない場合は、新しい親要素を追加し、その幅を絶対値で指定します。

新しい親要素「 div.row 」を追加した例を挙げておきます。

≪sample02.css≫

div.row {
  width: 400px;
}

div.col {
  float: left;
  width: 160px;
}

p {
  font-size: 90%;
  margin-right: 32px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３つの言語 その２　CSS</title>
  <link rel="stylesheet" type="text/css" href="sample02.css">
 </head>
 <body>
  <div class="row">
   <div class="col">
    <p>見た目やデザインは、スタイルシート（CSS）の役目です。</p>
   </div><!-- col -->
   <div class="col">
    <p>
     スタイルシートを使うと、文字の色や大きさを自由に
     変えることができます。
    </p>
   </div><!-- col -->
  </div><!-- row -->
 </body>
</html>

(2) 後に続く要素のマージンをその前の要素の幅に合わせる

最初の要素の幅をそのままにし、それに続く要素のマージン（余白）をその幅と同じ値にします。

≪sample03.css≫

div.col1 {
  float: left;
  width: 160px;
}

div.col2 {
  margin-left: 160px;
}

p {
  font-size: 90%;
  margin-right: 32px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３つの言語 その２　CSS</title>
  <link rel="stylesheet" type="text/css" href="sample03.css">
 </head>
 <body>
  <div class="col1">
   <p>見た目やデザインは、スタイルシート（CSS）の役目です。</p>
  </div><!-- col1 -->
  <div class="col2">
   <p>
    スタイルシートを使うと、文字の色や大きさを自由に
    変えることができます。
   </p>
  </div><!-- col2 -->
 </body>
</html>

こうすることで、くずれないレイアウトが完成します。

この方法では、親要素を必要としません。

また、後に続く要素の幅を指定する必要もありません。
（幅をブラウザに任せることも可能）

左側にナビゲーション、右側に幅を調節できるコンテンツを配置する場合は、この方法が最適といえます。

●回り込みを解除する

スタイルシートにおいて、全ての要素は「ボックス」と呼ばれる長方形の領域で構成されます。ボックスは通常、縦に並びます。

▽ ボックスについてはこちら
ボックスと標準的なスタイル

ボックスを横に並べることを「段組」といいます。
２つ並べると「２段組」、３つ並べると「３段組」になります。

３段組の例を挙げておきます。

≪sample04.css≫

div.row {
  width: 400px;
}

div.col {
  float: left;
  width: 30%;
}

p {
  border: 1px solid #00cc33;
  font-size: 90%;
  margin: 2px;
  padding: 2px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３段組の例</title>
  <link rel="stylesheet" type="text/css" href="sample04.css">
 </head>
 <body>
  <div class="row">
   <div class="col"><p>ボックス１</p></div>
   <div class="col"><p>ボックス２</p></div>
   <div class="col"><p>ボックス３</p></div>
  </div><!-- row -->
 </body>
</html>

≪表示≫

ここにもう一組の３段組を増やしてみます。

普通に３つのボックスを追加しただけでは、６段組になってしまいます。
３段組にするためには、回り込みを解除する必要があります。

回り込みを解除するには、clear プロパティを追加します。
clear プロパティに指定できる値は、次のとおりです。

値	内容
left	左寄せの要素に対する回り込みを解除します。
right	右寄せの要素に対する回り込みを解除します。
both	左寄せおよび右寄せの要素に対する回り込みを解除します。
none	回り込みを解除しません。（初期値）

通常は、float プロパティと同じ値を clear プロパティに指定します。

≪sample05.css≫

div.row {
  width: 400px;
}

div.col {
  float: left;
  width: 30%;
}

div.coltop {
  clear: left;
  float: left;
  width: 30%;
}

p {
  border: 1px solid #00cc33;
  font-size: 90%;
  margin: 2px;
  padding: 2px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３段組の例</title>
  <link rel="stylesheet" type="text/css" href="sample05.css">
 </head>
 <body>
  <div class="row">
   <div class="col"><p>ボックス１</p></div>
   <div class="col"><p>ボックス２</p></div>
   <div class="col"><p>ボックス３</p></div>
   <div class="coltop"><p>ボックス４</p></div>
   <div class="col"><p>ボックス５</p></div>
   <div class="col"><p>ボックス６</p></div>
  </div><!-- row -->
 </body>
</html>

≪表示≫

親要素に clear プロパティを指定した場合も同じ結果になります。
段組を一行で管理する場合は、この方法を利用します。

≪sample06.css≫

div.row {
  clear: left;
  width: 400px;
}

div.col {
  float: left;
  width: 30%;
}

p {
  border: 1px solid #00cc33;
  font-size: 90%;
  margin: 2px;
  padding: 2px;
}

≪HTML≫

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３段組の例</title>
  <link rel="stylesheet" type="text/css" href="sample06.css">
 </head>
 <body>
  <div class="row">
   <div class="col"><p>ボックス１</p></div>
   <div class="col"><p>ボックス２</p></div>
   <div class="col"><p>ボックス３</p></div>
  </div><!-- row -->
  <div class="row">
   <div class="col"><p>ボックス４</p></div>
   <div class="col"><p>ボックス５</p></div>
   <div class="col"><p>ボックス６</p></div>
  </div><!-- row -->
 </body>
</html>

≪表示≫

Web プログラマになる最初のページへ

このページの一番上へ