71/113

塹壕の風景

事務所の応接スペースと呼ばれる離れ小島で真子ちゃんと今川君と鈴木君がピザまんを食べていた。

「お昼休みなのにごめんね」

「いいよ、他に時間は取れそうにないから。それより会議で決まったことを教えてよ」

まず狭い画面を分割することはやめる。ブックマークや印刷でもフレームは問題になる。ショッピングカートはお客さんがまだ慣れていなくて使ってくれないので残念だけど封印する。JavaScriptをオフにしている人に配慮する。

「JavaScriptがオフって不便じゃない。そういう人はどれくらいいるの」

「どれくらいかはわからない。広告が勝手に開いたときは私もオフにしたくなる。いたずらに使う人もいるっていうし、それなりにはいるんじゃないかな」

どれくらいいるかわからない。それなら配慮しないという選択はない。会社の方針は合理的だと思う。<noscript>で代替コンテンツを提供するのはどうだろう。それは環境によって違う体験をさせるということだ。作るほうだって手間がかかる。

「Netscape Navigator 4.0 はJavaScriptを切るとCSSも無効になっちゃう。だからスタイルシートは使える範囲で使うしかない」

「まったく使わないという選択はないの」

「最小限しか使えなくてもメリットはあると思うの」

ヘッダーは前と同じでいい。bgcolor="#006600" の背景に白いロゴ画像と社名。社名は<h1>にする。

「ヘッダーの背景色にCSSを使わないのはなんでなの」

「社名が白だからね、もし背景色が出なかったら見えなくなるでしょう」

2年前の最初のホームページでは白地にグリーンのロゴだったね。あのときは社長の bgcolor="#00FF00" という提案を拒否したけれど、情報量が増えてきたら配色で分けることに意味が生まれた。

「ヘッダーの右側が空いてる。会社案内とかお買い物方法の説明とかリンクしたらいいのに」

「そういうのはフッターに入れるつもりだったの」

「両方に書けばいいよ。どっちかしか見えないでしょう」

それもそうだな。そして見出しが<h2>で本文が<p>だ。段落の微調整くらいならCSSは使える。

「メニューはやっぱり左にするの」

「画面が狭いから分割をやめるってことならテーブルでも同じ。左メニューにはしません」

NN4はテーブルの閉じタグまで全部読み込んでサイズが確定するまで描画しない仕様。サイズを省略した画像が含まれていたりしたら、それを読み終わるまで画面がまっしろ。思えば Netscape Navigator の頃からずっとそうだった。

「全体をひとつの大きなテーブルにするのはやめて段々に重ねるのが良いと思う」

「じゃあヘッダー、メニュー、商品が別々のテーブルになるな。メニューはパンくずだけで十分でしょ。またExcelでコード部品を作ってもらったらいいよ」

「ううん。島田さんがやってくれたのを見ていたら簡単そうだったから、次は自分でClarisWorksで作るつもり。プログラムを使わなくてもテキストで書き出して置換したらいいんだ」

今川君はなんだか偉そうだね、腕組みなんかしちゃって。でもわざわざ来てもらったのだから許してやろう。ちなみに真子ちゃんの入社までは今川君が最年少だったので、それはもう喜んだそうだ。

「それからメニューは商品だけです。前のサイトを踏襲して40SKU掲載のはずだったんだけど、単価の低いものは出てないので入れ替わりがあります」

「送料がかかるから、安いものをここで買う意味がないんだと思う」

「ノート類と日記帳は確定だろうな」

「それと筆記具と不良在庫。例のカラーボールペンセットは注文ゼロなのに」

「スケッチブックと色鉛筆は売れたじゃない。ボールペンもトップに出せばひとつくらい売れそうな気がするけど」

「トップには売れ筋を出せって言われてる」

カテゴリーページへのテキストリンク。中に入ったらパンくずリスト。それから売れる順番に商品を並べる。次は商品の見せ方。

「前は商品を上から下まで並べていたけれど、ここもテーブルにするつもり。フレームがなくなって画面を広く使えるから。商品番号、商品画像、商品名、説明文、価格でひとまとめ」

「幅800pxと想定したら3つくらい並ぶのか。画像はどうせ作り直すんだよね」

「画像は元のTIFFをもらってるし加工途中のも残してるからどうにでもなるよ。でもテーブルにも問題はあって、IEで幅がおかしくなっちゃうの。たとえば幅が100%で枠が1pxの場合、NN4は問題ないのよね。IE4だと下にスクロールバーが出る」

「計算がおかしくなるのは困るね。あんまり厳密に作らないほうがいいかもしれない」

「だからテーブルの枠線はなし」

「枠なしのテーブルは見にくいだろうな」

「うーん、枠は付けるけど海外のサイトで見たやり方を真似して border="0" にする」

```

body, td {

font-size: 10pt;

font-family: "ＭＳＰゴシック", sans-serif;

}

</style>

<tr>

</tr>

</table>

```

「cellspacingでやるんだ。CSSはフォントだけだね」

「テーブルはCSSのバグの宝庫なの。幅、高さ、余白、背景のどれもおかしくなる。文字のスタイルが継承されないとか、クラス指定を多用するとクラッシュするとか。そしてテーブルなしでレイアウトするのは難しい」

「テーブルはもっと入れ子にしていいんじゃない。多少複雑でもテンプレート化して流し込むなら問題ないよ」

「それは今回はやめておく。公開後もすこしずつ手を加えるつもりだから、テンプレにしたら手を出しにくくなりそう」

「それならやっぱり深いネストは避けるのがいいと思う」

紙の感覚でレイアウトするから複雑になるのだ。ウェブは別物と切り替えないといけない。次はメールフォーム。

「買い物かごはしばらく使わないという指示。だからメールCGIでご注文をいただきます。フォームは改善の余地があると思います。どうでしょう」

「フォントサイズよりも、テキストエリアを大きめに取ったらいいんじゃない」

「あとは隙間を空けたら見やすいと思う」

「そうだね。それと商品とフォームが両方画面に表示されていないとご注文しにくいと思うの」

「そうか。今まではフレームでフォーム位置を固定できてたんだ」

そのためだけにフレームを使っていたとも言える。position:fixed はどうだろう。ダメだ信用できない。

「フォームが大きくなって下までスクロールしちゃったら商品名が見えなくなるかも」

「逆もあるよね。商品のテーブルを2段、3段にしたらフォームの場所がわからない」

「商品テーブルの下がフォームで、次がまた商品テーブル。それからまたフォームでどうだろう」

「メールフォームを複数置くの。ごちゃごちゃするんじゃない」

「だってスクロールして見えなくなるならもうひとつ置いたらいいじゃない。同時に複数見えたらごちゃごちゃするけど、そうじゃないでしょ」

「なんか変わってるな」

「でも試作してみる価値はあるかも」

「mailto: リンクも下に置いといたらいいよ」

なるほどなあ。たしかに使いやすさは試作してみないとわからないと思う。

「フォームの前に隙間が空く問題は解決したの」

「あれは解決策があるんだけど」

```

<table>

<form>

<tr>

</tr>

</form>

</table>

```

「これはたぶん正しくないと思う。なんとかならないかな」

「form {display:inline} にしたら隙間が消えるけど不安定になるの。NN4が落ちたから使えないと思った。これしか方法がないなら仕方ないでしょう」

だいたい方針は決まってきたね。もうすぐお昼休みが終わっちゃう。

「フッターは簡単。ヘッダーと同じパーツを配置する」

「それでいいんだ」

「だってどっちかしか見えないって言ったの鈴木君じゃない。それと Photoshop 3.0J を 5.0J にアップグレードする許可が降りました」

「おお、やったじゃん」

「何が変わるの」

「テキストレイヤーっていう機能があって、画像に書き込んだテキストを再編集できるの。発売が楽しみ」

「じゃあボタンやバナーの制作が楽になるんだ」

「そういうこと。トップに売れ筋を並べるのは指示通りにするけど、これでバナーを作って不良在庫のボールペンにもリンクするつもり」

「売れたらいいよな」

ブラウザ戦争の最前線。ウェブ制作担当の真子ちゃんはその夜、怖い夢を見た。

どうしていきなりスタイルが効かなくなるの。どうして色がおかしくなるの。

塹壕の中から星空をにらんだ。いや違う。あれは星ではなく Netscape Navigator 4.0 の大編隊。ここにいたらやられる。

後方から猛烈な砲撃音が聞こえてきた。ここに友軍がいるのに危ない。味方に背中を撃たれるなんて。どこに逃げたらいいかわからないよ。

こんな戦争、早く終わればいいのに。