今回のポイント
CSSを使ってレイアウトを指定できる
段落の縦の長さは“なすがまま”にする
position，top/leftで位置を指定する

　前回，Webページのレイアウト手法の変遷と題して，フレームを使う方法と，テーブルを使う方法について説明しました。今回は，CSSを使ってレイアウトを指定する方法について解説します。ここまでCSSをフォントの色や大きさを変える程度にしか使ってきませんでした。実はCSSではレイアウト指定もできるのです。

　唐突にレイアウト指定ができますと言われても，なんだそれは？？という感じですね。最初から複雑なものは難しいので，CSSのレイアウト系の使い方も順番に確認しながら，簡単な例から見ていくことにします。

　まず単純なHTMLを用意します（リスト1）。レイアウトを確認したいので本文テキストはある程度の長さのものを用意してください。これを表示させると図1のようになります。

リスト1●単純なHTML
レイアウトを確認するため，テキストはある程度の分量にしてください 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSSでのレイアウト</title>
  </head>
  <body>
<p>現在はITproのような2カラムが大多数を占めますが，
  :中略
どうしてもカラム数が増えればページの横幅は伸びていきます。</p>
  </body>
</html>

図1●リスト1を表示させたところ
図1●リスト1を表示させたところ
[画像のクリックで拡大表示]

　このHTMLに対して順番にCSSを適用しながらレイアウトを考えていきましょう。イメージしていただきたいのは付箋です。ズバリ商品名で言ってしまうと「ポストイット」ですね。プログラマならば，ディスプレイの周りにベタベタとたくさん貼り付いているアレです。付箋らしくするために段落に枠線を付けてみます。

　誤解されないように書いておきます。ここで枠線を出しますが，枠線を見せることがデザインということではなくて，今からCSSで指定していくと<p>タグの大きさや位置がどうなっているのかをわかりやすくするために，一時的に枠線を付けますよというお話です。プログラムのデバッグのようなもので，枠線を見ながらなら，レイアウトがしやすいからです。