CSS編
はじめに
CSSによるレイアウトの考察です。
<table>タグによるテーブルレイアウトは柔軟で便利なのですが、
本来の表を表示する使いかたではないというわけで、最近はかなり敬遠されています。
ここではテーブルレイアウトの代表であるヘッダ、フッタ＋２ペイン、３ペインのレイアウトを
XHTML + CSS ではどう表現するのか？ということを考えてみました。
レイアウトが簡単には崩れないことが前提です。
また、左側（３ペインでは右側も）は幅が固定で、メインの部分のみ可変になるようにします。
２ペイン
以下のテーブルレイアウトをCSSで表現してみましょう。
| ヘッダ | |
|---|---|
|
左 ペ イ ン |
右ペイン |
| フッタ | |
XHTML -> 2pane.html
<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>２ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="2pane.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="right">
右ペイン
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>２ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="2pane.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="right">
右ペイン
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
CSS -> 2pane.css
*
{
border: 1px solid gray;
}
div#header
{
}
div#left
{
float: left;
width: 200px;
}
div#right
{
margin-left: 200px;
}
div#footer
{
clear: left;
}
{
border: 1px solid gray;
}
div#header
{
}
div#left
{
float: left;
width: 200px;
}
div#right
{
margin-left: 200px;
}
div#footer
{
clear: left;
}
３ペイン
２ペインの応用です。
| ヘッダ | ||
|---|---|---|
|
左 ペ イ ン |
中心ペイン |
右 ペ イ ン |
| フッタ | ||
XHTML -> 3pane.html
<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>３ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="3pane.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="block">
<div id="right">
右<br />ペ<br />イ<br />ン
</div>
<div id="center">
中央ペイン
</div>
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>３ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="3pane.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="block">
<div id="right">
右<br />ペ<br />イ<br />ン
</div>
<div id="center">
中央ペイン
</div>
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
CSS -> 3pane.css
*
{
border: 1px solid gray;
}
div#header
{
}
div#block
{
margin-left: 200px;
}
div#left
{
float: left;
width: 200px;
}
div#center
{
margin-right: 200px;
}
div#right
{
float: right;
width: 200px;
}
div#footer
{
clear: both;
}
{
border: 1px solid gray;
}
div#header
{
}
div#block
{
margin-left: 200px;
}
div#left
{
float: left;
width: 200px;
}
div#center
{
margin-right: 200px;
}
div#right
{
float: right;
width: 200px;
}
div#footer
{
clear: both;
}
特殊３ペイン
以上のサンプルでは共にメインの内容がHTMLの最後の方に登場します。
SEOを目指すならこれは好ましくないので、改良の余地がありますね。
高さが一番高いペインが分かっているならその下にフッタを表示すればいいわけで、
メインのペインの高さが一番高いという前提なら以下のようになります。
XHTML -> 3paneex.html
<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>特殊３ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="3paneex.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="block">
<div id="center">
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="right">
右<br />ペ<br />イ<br />ン
</div>
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>特殊３ペインサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="3paneex.css" media="screen" />
</head>
<body>
<div id="header">
ヘッダ
</div>
<div id="block">
<div id="center">
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン<br />
中央ペイン
</div>
<div id="left">
左<br />ペ<br />イ<br />ン
</div>
<div id="right">
右<br />ペ<br />イ<br />ン
</div>
</div>
<div id="footer">
フッタ
</div>
</body>
</html>
CSS -> 3paneex.css
*
{
border: 1px solid gray;
}
div#header
{
}
div#block
{
position: relative;
}
div#left
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
}
div#center
{
margin-left: 200px;
margin-right: 200px;
}
div#right
{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
}
div#footer
{
}
{
border: 1px solid gray;
}
div#header
{
}
div#block
{
position: relative;
}
div#left
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
}
div#center
{
margin-left: 200px;
margin-right: 200px;
}
div#right
{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
}
div#footer
{
}
CSS的には正しいと思うが、IEでは左ペインの位置が指定の場所に表示されない。
