今回はテーブル、CSSが利用可能なエージェントに激しく限定されたネタです。しかも非常に重いです。
テーブルアートでクリッカブルバナーっぽいものを作成する。テーブルアートというのは文字通りHTMLのTABLE要素だけで絵を描いてしまおう、というすばらしく馬鹿馬鹿しいこころみ。
テーブルアート自体はいいとして、いかにしてリンクを貼るか。
今回は背景色と同じ色で記載された文字を利用して実現。副作用として、格子状にクリッカブルな場所が格子状に存在するという状態になってしまうが、今回は断念。
つまりこういうことだ。上下の余白をクリックしてもリンク先には飛べない。 |
文字部分だけがクリッカブルなのだから当然だが、これは痛いところ。
当初はヘッダ内にスタイルシートを定義して作成。これではいまいちだ。カットアンドペーストによってバナーでリンクを貼ることができない。
結局、ヘッダ内(や外部ファイル)の定義によってではなく、ある区間内のtd要素やa要素に一律にあるスタイルを適用する方法がわからず(できないと思うのだが)、ほぼ全ての要素にいちいちスタイルを定義した。当然ソースはばかでかいが、テーブルアートにおいてそれは本望である。
最初は表セル自体の幅を指定しようとしていたが、クリッカブルな面積が狭くなってしまうので断念。フォントに対する指定のみを行うことにした。そのため、"81x31"といったサイズ指定の要求を満たすことは難しい。
また、一部のエージェント(ブラウザ)ではリンクにならない境界線がまだ存在しているようだ。境界線を物理的に0にしてしまえば良いので、可能と思うが、不十分な追求しか行っていない。
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ |