PC-Blues # 025 html4.01にアップグレード

  これまで、当サイトはhtml3.2に準拠してきたのだが、この度html4.01にアップグレードすることにした。いまどきなんで3.2だったかというと、スタイルシートというものがよくわからないせいである。

  当初はOS/2の上のネットスケープ4.04のhtmlエディタでそれこそワープロ風に書いていたのだが、これがhtml3.2であった。そののち、何でもかんでもemacs/muleという普通の(しかしやたら高機能の)エディタを使うようになるといちいちhtmlエディタを起動するというのも邪魔くさくなりいまはタグ辞典をちらちら読みながら書いている次第である。

  このemacs、エディタのくせに辞書も引けるし、ウェブも見れるし、メイルも読み書きできるし、ファイル操作もできるし、シェルも実行できるしでとても便利である。

  それはそうとhtmlだが、わたしは結構でたらめに書いてしまうので、チェックにはAnother Htmllintを使っている。これは文法をチェックして100点満点で採点してくれるというもので、どこが間違っているのか教えてくれるので便利である。わたしは100点満点とかホめられるのは大好きなほうなのでついついチェックして100点になるまで修正してしまう。だけれどもローカルでは満点でも、サーバにおくとページ天辺にはいる広告部分の文法ミスを指摘されてしまい、どうやっても満点がとれなくなってしまった。シクシク。

  これがhtml4.01となるとスタイルシートというやつを使いこなせなくてはならぬらしい。これまでのファイルにかなりの変更をしなければならないようである。けれども、自分が見る分には普段はlynxであるから、スタイルシートであれこれ装飾をいじっても甲斐がなく、たまにネットスケープ4を起動したところでこんなかんじだし、そもそもネットスケープ4はスタイルシートの解釈がタコであるという。そんなわけで延び延びになっていたのである。
ネットスケープ4.7でみる当サイトのイメージ(巨大画像注意 750x580 27k netscape.png)

 ところが機会あってmozilla0.9などインストールしてみると、 こんなかんじである
もじらでみる当サイトのイメージ。(巨大画像注意 750x580 79k mozilla.png)

  これは見にくい、醜い。行間が詰ってしまっている。左右も一杯、一杯である。いままでこんな読みにくいページを読んでくれたみなさま、ありがとう。ごめんなさい。けれどもこいつはどうやらhtml3.2ではどうにもならぬらしい。深く反省して、遅ればせながら当サイトもhtml4.01時代を迎えようというわけである。それならいっそxhtml1.0にという気もしないではないが手元の参考書が秀和システムのhtml/css辞典なのでどうしようもない。

  html4.xxでは文章の構造にかかわる部分と装飾にかかわる部分をわけ、装飾のほうはスタイルシートを使う。スタイルシートは、それだけで一つのファイルとしてもよく、それぞれのファイルのヘッダー部分に記述してもよく、局部的な使用なら文中のタグに埋め込むこともできる、ということである。

  私見では威力を発揮するのは単独のファイルという方法であろう。この場合、その他のファイルからはこのファイルを読み込むようにしておけば、これひとつを書き替えることで全てのファイルの装飾を一括して変更できるわけである。これはとても便利そうである。

  このページの場合、ルートディレクトリィにmicmic.cssというファイルをつくり、次のようにいれている。

body { line-height : 1.4;
     color : #000000 ;
     background-color: #FFFFCC ; 
     margin: 2em
     }
div.center { text-align: center }
div.pad { padding : 1em;
          font-family : monospace
         }

  これで行間1.4行、クリームがかった地に黒の文字になる。周囲からは2emだけ余白がとられる。ところでemってどういう単位なんだろう。参考書のまるうつしなのでよくわかってないのであった。

  いっぽう、各ファイルのヘッダにはこのようなタグをいれる。 

   <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
   <link href="../micmic.css" type="text/css"  rel="stylesheet">

  これで、すべてのファイルに上記の設定が反映されるのだそうである。

  フォントの種類なども指定できるのだが、わたしと同じフォントを見る人が持ってるかというとあんまり期待できないし、あったとしても、まるもじフォントなんかで読みたい人がそうそういるとは思えないし、そこらへんは見るほうが自分の好みで設定するところのような気もするし、それやこれやで指定していない。

  近頃多い、デザインに凝っているがやたらと文字の小さいサイトはマックでデザインに凝る人が作成しがちなのだそうである。この手のサイトは必ずフォントサイズが実サイズで12ピクセル以下に指定されていることになっている。あれは実はいまどきのマック上で解像度800x600として見ると丁度よい大きさなのだそうだ。ところがウインドウズ、Linux、OS/2などで解像度1024x768などで見るとほとんど読めないシロモノである。これらから学ぶに、うっかりサイズなど指定するとあちらを立てればこちらが立たず状態になるということである。

  どうやらフォントのサイズ指定というのは機種依存がはなはだしいらしいので、基準となるサイズは見る人の側に任せ、相対サイズを指定したほうがよいらしい。それでも文字が小さ過ぎるとすれば見る人の設定のほうに問題があるともいえるわけだが、そんなこといわれても困るよねえ、たぶん。すいません。お好みのサイズに設定してください。ネットスケープの場合は表示→フォントで設定できます。
とりあえず、当方ではこのように表示されている(巨大画像注意 750x580 72k mozilla2.png)のですけれど。 やっぱり、ありそうな解像度を予想してサイズ指定したほうがいいのかしらん。

  ともかくも基本コンセプトとしてはできるだけいろんな環境で読めるようにしたいわけで、そうなると、ブラウザを選ぶ種類の技術は避けたほうがよいことになる。そこで、

  1. フレームは使わない。
  2. javascriptは使わない。広告にしっかり入っているけれど、内容には使わないってことで。
  3. midiやなんかのBGMの類いはいれない。そのくせ、mp3があったりする。
  4. flashの類いも使わない。しっかりmpegビデオなんかが入ってるけど。
  5. imgや画像の類にはaltで代替の文字列を挿入する。widthとheightを指定して表示の高速化をはかる。
  6. ビデオや画像や音声の重たいファイルは見る側が明示的に取得しないぎり勝手に送り付けない。28.8モデムのころに難儀したので。

  こんな対策をたてている。なんだかないないづくしで、これではデザインも何もあったものではないような気もする。が、それで汎用性をもっているのかというと効果のほうはあきらかでない。おまけにADSLなぞ引いてしまうと「重い」といってもどれぐらいから「重い」のか、よくわからなくなってしまったりする。さらに実はi-modeやなんかの2000文字制限はしっかり無視しているのであった。結局のところ自分の使わない機器というのは想像力がなかなか及ばないものである。

  なんだかんだと手間がかかってしまったけれどもそのわりに効果のほうはささやかなものである。こんなことなら最初から4.01にしてけばよかったと後悔さきにたたずな今日この頃である。

[前へ] [次へ]
[Home] [目次]

2002/4/18