背景をブラウザに追従させる。
CSS Playを見ていて、こんな風に使えば、超省エネルギーで、リキッドレイアウトの背景が書ける。と思ったのでやってみました。
rabbit layoutとでも呼ぶことにしよう。
画像は、上下方向にひずんでも使えるようにしておかないといけませんが、、、
このドキュメントは、背景画像1枚だけで、リキッドレイアウト（ブラウザのサイズを変更したときに、ドキュメントがブラウザサイズに追従して表示するレイアウトの方法)を実現するためのサンプルです。
通常のhtmlのマークアップの仕方と明らかに異なる点は、背景の画像を、スタイル属性で background-image で指定するのではなく、imgタグを使っている点です。
通常のマークアップを行った場合は、背景画像は、拡縮することはありません。
img タグと z-index を指定した、トリッキーなレイアウトです。
見た目上は、何とか目標を達成しているかのように見えます。また、htmllintも通過します。
しかし、このトリッキーなレイアウトを作ってみると、問題があることに気づきます。
たとえば、スタイルを適用しないで閲覧しようとするユーザーがいた場合、
このドキュメントは、画面全体に画像が表示されるだけの、へんてこなドキュメントになってしまいます。
このレイアウトは、ちょっとしたチャレンジで作ったもので、完璧じゃないということをご理解ください。
一応、要点ソース
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="Description" content="画像一枚でリキッドレイアウト" />
<meta http-equiv="imagetoolbar" content="no" />
<title>画像一枚でリキッドレイアウト</title>
<style type="text/css">
html, body {
margin:0; padding:0;
width:100%; height:100%;
overflow:hidden;
}
body {
font-family:verdana, arial, sans-serif; font-size:76%;
}
#background{
position:absolute; z-index:1; width:100%; height:100%;
}
#scroller {
position:absolute; width:100%; height:100%;
top:0; left:0; overflow:auto; z-index:2;
}
#content {
padding:100px 10% 20px 10%;
}
p {
line-height:1.8em;
letter-spacing:0.1em;
text-align:justify;
font-size:110%;
}
#fixed {
position:absolute;
top:0px;left:0px;
width:100%; z-index:10;
color:#567; border:1px solid #000;
padding:10px;
}
</style>
</head>
<body>
<div>
<img id="background" src="776x768px_baseic_layout_r5_c1.gif" alt="background" width="100%" height="100%" />
</div>
<div id="scroller">
<div id="content">
<p>....................</p>
</div>
</div>
</body>
</html>
