過去のトップページ
日記
小林優美。2009年アサヒビールイメージガール。この写真とイメージがかけ離れているような･･･。
ここ数日、ウェブ上ではふりむきドラゴン（別名：首振りドラゴン）が話題になっていた。これはペーパークラフトのドラゴンで、全く稼動部品はないのだが、どの向きから見てもドラゴンがこちらをじっと見つめているように見える。文書で説明するのは難易度が高いので、まずはyoutubeの動画を参考にして欲しい（Paper Dragon Illusion、Gathering for Gardner）。
何でも人間は、画像情報を記憶に当てはめて処理する事が多いので、影のつけかたが不明瞭な状態の凹面（見慣れ無い絵）を、凸面の絵（見慣れた絵）のように錯視してしまうらしい。つまり、凹面に顔を書いておけば、凸だと思っている人間には、角度を変えたときに、見えなくなると予想する部分が見えたままで、見えるようになると予想される面が見えないままになるので、顔が動いているように見えるらしい。ふりむきドラゴンの顔は、陰影が分かりづらい凹面に書かれた絵なので、角度を変えてもこちらを見つめているように細工ができている。こういう目の錯覚を、Hollow face錯視と言うそうだ。
ドラゴンだけではなくて、アインシュタインの顔などバリエーションはあるようだ（参考ページ）。そういえば、かなり昔につくば万博のサントリー館でくぼんだ地球が吊るされていたのを見た記憶がある。
とは言えこのドラゴンは、型画像をダウンロードして印刷し、切り貼りすれば簡単に作れる点で優れている。体験教室などで使われる事もある模様（参考ページ）。Paper Dragon by Jerry Andrusというページで印刷用のJpegイメージがおいてある。気軽に楽しめるトリック・アートなので、ぜひ皆さん、印刷して工作してみてください。
あらしの為のTips
CSSで高さの揃った段組をしよう。
HTMLが用いられるようになってから10年以上の歳月が経つが、CSSの仕様が充実してブラウザーの実装度が高くなるにつれて、tableタグを使った画面分割を基本とするデザインから、divタグを使った画面分割を基本とするデザインに、HTMLの使われ方も大きく変化してきた。しかし、divタグを使った画面分割、俗に言うCSSデザインはちょっと取っ付きづらい点がある。
PCの画面が横長ということもあり、ほとんどのウェブページでは段組を使って画面を縦に分割している。このサイトでも分割方法を2004.12.11のTipsで紹介したが、実は背景色や背景画像をつけると、以下のような問題が出てしまう。つまり、段組の高さがあわない。
tableでは隣り合うセル（trやtdタグ）は連携しているので列の高さは自動であうのだが、隣り合うdivタグ間は特に連携はしていないのでこういう問題が起きる。そして、この高さあわせは苦労する事が多い。
今日は、クロス・ブラウザー対応で、段組の高さあわせが簡単に実現できるCSSの実例が、参考ページで紹介されていたので、試してみる事にしよう。
仕掛けは簡単で、本当の段組用のdivタグ（前景用divタグ）と、背景用divタグを分けてしまう。そして、背景用divタグで、前景用divタグを入れ籠にしてしまうので、背景用divタグの高さは常に前景用divタグの最大の高さに等しくなる。もちろん入れ籠にしてしまうと、複数ある背景用divタグが重なって見えなくなってしまうので、下側の方から左に表示位置をずらしておく必要があるが、それは比較的容易に実現できる（下図参照）。
実際のコードは以下のような感じになる。なおxhtmlで書いているので、コピペして試すときは拡張子に注意。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>divタグ利用での三段組</title>
<style type="text/css">
/*
bodyタグのマージンとパディングを0に設定しておかないとずれる。
*/
body.body {
margin: 0;
padding: 0;
}
/*
外側の背景divタグ。横幅を500pxにしているが、%定義などでも問題無い。
ここの背景色は、右列の背景色になる。
*/
div.right_bg {
float: left;
width: 500px;
background: cyan;
position: relative;
}
/*
内側の背景divタグ。
ここの背景色は、左列の背景になる。
*/
div.right_bg div.left_bg {
float: left;
width: 500px;
background: pink;
position: relative;
right: 100px;
}
/*
左列の前景用のdivタグ。
右側を100pxあけるので、幅は500px。
*/
div.right_bg div.left_bg div.left {
float: left;
width: 400px;
position: relative;
left: 100px; /* 背景が右から100pxずれているので、左から100pxずらして相殺 */
overflow: hidden;
border: dashed 1px red; /* 前景範囲が分かりやすいように枠線表示 */
}
/*
右列の前景用のdivタグ。
幅を96pxと、右側のスペース100pxよりやや小さくしている。
*/
div.right_bg div.left_bg div.right {
float: left;
width: 96px;
position: relative;
left: 100px; /* 背景が右から100pxずれているので、左から100pxずらして相殺 */
overflow: hidden;
border: dashed 1px blue; /* 前景範囲が分かりやすいように枠線表示 */
}
</style>
</head>
<body class="body">
<div class="right_bg">
<div class="left_bg">
<div class="left">Left Column<br/>2<br/>3<br/>4<br/>5<br/>6</div>
<div class="right">Right Column</div>
</div>
</div>
</body>
</html>
以下のような感じで表示される。点線は前景divタグの領域を分かりやすくするために、あえて表示している。要するに、隣り合うdivでは高さの同期が取れないので、親divに背景描画を任せてしまえばいいし、親divと親の親divで色を変えて、親divと親の親divの表示位置を左右にずらしたら列ごとに背景色が変わるという仕掛け。ちょっとトリッキーだが、うまい仕掛けだと思う。
意外とあっさりできるわけだが、左側に余白を設けたい場合は、bodyタグのmarginとpaddingは0以外に設定できないので、背景画像を工夫したり、左側余白だけの背景divタグを入れたりする必要があるだろう。面倒だったら、tableでレイアウトしてしまうのも現実的かも知れない。
しかし、CSSって見た目とHTMLの記述が一致しない事が多い。本当に職人芸みたいな感じになってきていて、ついていけないこの頃ですヽ（´д｀）ノ
参考ページ
注意
- 本ページは、本当に投げやりに書いています。
- 本サイトは、24時間運用ですが、事前に告知無くサーバーが停止するときもあります。必要な情報はメモをしてください。
- チャット友達へのページです。不愉快な思いをしても著者は責任を負いません。
過去ログ
