CSS スタイルシート雑技 No. 7
overflow: auto を使用したグラビア的ページ作り
写真を中心に見せたいページの作り方で、こんなアイデアはいかがでしょうか。
解説
<IFRAME> に似た CSS 的表現方法として、 overflow の指定があります。例えば <div> でボックスを作り、その div に対して overflow の指定をした際、似たような表現が可能になります。
<style type="text/css">
div{
width: 320px;
height: 240px;
overflow: auto;
}
</style>
<div>疑似インラインフレームによるコンテンツ</div>
overflow には、 visible (はみ出て表示), scroll (入りきらない部分はスクロールして読める), hidden (はみ出た部分を表示しない), auto (ブラウザに依存する。一般的にはスクロールして読めるようになる) といった値が用意されていますが、 scroll は横スクロールバーが出たり、縦横両方のスクロールバーが出たりと安定しないので、そういった挙動を好まない人には、 auto を使うと重宝します。
さて、この疑似インラインフレームを使い、グラビア的にページを作ってみるアイデアです。例えば、雑誌のグラビアページのように写真を中心に見せたいページで、その写真の上に、ちょっとしたキャプションやリードなどを載せたいというケースはありませんか？
写真を背景画像にして、その上にテキストを重ねるまでは良いのですが、ブラウザや OS によって、テキストサイズのばらつきから、あまりのぞましくないテキストのレイアウトになってしまう懸念があります。
こういった場合、ボックスでテキストの幅、高さを決め打ちしてしまい、そこから溢れてしまうものに関しては overflow で対処する、というのはいかがでしょうか。
<style type="text/css">
body{
background-color: #000000;
background-image: url('url');
background-position: 50% 50%;
background-repeat: no-repeat;
}
div{
width: 320px;
height: 240px;
overflow: auto;
}
</style>
<body>
<div>ここにキャプションなどの文書が入る。</div>
</body>
技術的には何も難しい事はないと思いますが、ひとつだけ注意しなければならないのは、グラビアが背景画像 ( background-image ) として扱われている事です。グラビアを主体として伝えたい場合、これでは文書構造として正しく意図が伝わらないのが残念です。これは position と z-index を利用したレイヤー構造で、解決する事ができます。
<style type="text/css">
img{
position: absolute;
top: 0px;
left: 0px;
width: 640px;
height: 480px;
z-index: 0;
}
div{
position: absolute;
top: 160px;
left: 120px;
width: 320px;
height: 240px;
overflow: auto;
z-index: 1;
}
</style>
<img src="url" width="640" height="480" alt="グラビア画像">
<div>ここにキャプションなどの文書が入る。</div>