犬土偶日記
海の近くに住みたい
話題：Webプログラミングとか
2004年02月10日
ホームページ作成天国
公開日時： 不明
夕方起きて朝寝る生活から少しズレてきた。夜起きて朝になってもまだまだ眠くない。昼頃眠くなるんだろうなと思いつつ、会社勤めじゃない幸運に甘えてそのまま適当に生きようと思う。夜起きて、CDTV SPをPCにキャプ予約してあるのを確認して安心して風呂入ってからゆっくりとPCの前に戻ってみると、当然というかもう飽きたというか、ウンコ（略）のせいでキャプ予約が実行されてなかった。CDTV SPの開始から12分ぐらいが録画できなかった。でもゲストライブがなかったので別にいい。見終わってから飯を食った。弟が買ってきた牛たま丼というレトルトのやつ。熱湯に入れてこれでもかというほどボイルして丼に必要以上にぶち込んだ米にぶっかける。味はそんなに良くもないが悪くもない。食えればOKさ。モサモサ食いながらふと思った。これの一体どこに「牛」が入っているのか。どこをどう探しても牛どころか肉が入ってない。どうみても玉子丼だ。必死に探してみたらごく僅かに肉っぽい破片が見つかった。ゴマぐらいのサイズの肉が少し混じってるぐらいの感じ。アホか。本当に肉なのかどうかもわからん。きっと牛ではないんだろうと思う。どうでもいいさ。別に肉が食いたかったわけじゃねぇからな。ちくしょう。
家族が寝静まってからバンドの新サイトのコーディングにとりかかった。まずはMETAタグを適当に書いて、CSSを書き直して、まぁ大体というかほぼ100％TOPページが完成した。そこから他のページにも使えるHTML部分をテンプレとして抜き出して保存。Informationのページの過去のやつからテキストだけ抜き出してテンプレにぶち込む。そしてTOPには無かった要素のCSSを調整する。そこで一旦やめてHTML文法チェックにかけてみた。少しばかりエラーが出たのでそれを修正。まだ途中だがCSSの文法もチェックしてみようと思い、W3Cのページに行ってみた。昔はCSS文法チェックのページに日本語のがあったような気がするんだが英語しかなかったのでそれでやってみる。そしたら完璧だと思ってたのに1個エラーが出た。font-familyにGeneric fontを指定しろみたいなのが。全てのフォントプロパティの最後にsans-serifを書いてるのに。バグか。そのエラーの文章で検索してみたら色んなBBSがヒットしたが当然英語サイトばっかりだったので仕方なく英語を読んでやった。どうもよく分からんのだが同じエラーが出てるやつが結構いるらしい。CSSファイルをアップロードして調べるやつ以外に、テキストエリアにコピーして調べさせるのもあったのでそれでやってみた。それだと動かなかったので、サーバーにアップロードしてそのURIを打ち込んで調べさせるやつでやってみた。そしたらValidなCSSだと判定されて一安心。それからTOPとInformationのページをOperaとNetscapeで確認しながら更にCSSを微調整。その後、プロフィールのページに取り掛かった。ここはTABLEの幅を固定にしてたりフォントサイズまで固定にしてたりで、新サイトのコンセプトに合わないからずいぶん書き直すハメになった。それだけ激しく書き換えるんならTransitionalじゃなくてStrictでやればいいじゃねぇかと思った。どうせやるなら徹底的にやった方がいいだろう。知らんやつも多いと思うので説明すると、HTMLというのは元々は文章に意味付けをするための言語で、ここからここまでが見出し、ここからここまでが段落、ここからここまでが引用、ここからここまでが表、というように記号で印をつけていくものなんだよ。ここの文字は赤で、そっちは大きめの30ptのフォントで・・・というようなブラウザでの見た目を指定をするための言語じゃない。その文法がW3Cで決められていて、HTMLで一番新しい4.01というバージョンの中にも3種類存在する。まずはStrictという恐ろしく厳しいやつ、そして過去のいい加減なバージョンからの移行という形で少し制限が緩やかなTransitionalというやつ、そしてフレームを使うFramesetというやつ。StrictとTransitionalの違いをいくつか挙げてみよう。文字のサイズや色を変えるという、構造的な意味を与えるのとは違う装飾用のタグであるFONTタグはTransitionalでは非推奨というだけで使ってもOKだが、Strictでは使えない。BODYというHTML文書本体部分の内部にStrictではブロック要素とINSとDELとスクリプトしか入れてはいけないがTransitionalでは生テキストやインライン要素をBODY直下に置いてもいい。まぁTransitionalは大抵のタグや属性が使用可能だ。Strictは本当に厳しいというか何と言うか・・・。見栄えに関するものは全てスタイルシートでやるということになる。文字を真ん中に表示するためにはCENTERタグを使うのではなくてスタイルシートでtext-align:center;と書かねばならん。昔からスタイルシートは使ってたから別にどうってことはない。慣れればHTMLタグでアレコレ策を弄するよりも遥かに楽だ。でもHTMLをStrictで書こうと思うとスタイルはとりあえず置いといてもなかなか厳しい。できたつもりで文法チェックすると予期せぬところで警告を食らったりしてね。でもStrictでキッチリ書けばほとんどのブラウザでしっかりと閲覧できるサイトになる。ブラウザごとにレンダリングの仕方が違ったりして見た目が変わることは大いにあるけどね。どっちみち小手先の技で誤魔化しても全ての環境で同じに見えるようにはできないし、かえって障害になることもあるから本当はStrictで書くべきなんだよね。世の中に出回ってるホームページ作成ソフトというやつは気をつけた方がいい。見た目ばっかり気にしてHTMLの文法が激しくいい加減なのが多い。FrontPageExpressとかWORDとかは地獄だぞ。多少まともかなと思うのはHomepageBuilder。ソフトで作ったページを文法チェックにかけてみるといい。恐ろしいことになるよ。やはりただのテキストエディタに手打ちが最強だろう。テキストエディタっていうのは例えばWindows付属のメモ帳みたいなやつね。時間はかかるだろうが自分の思い通りにできるぞ。まぁそんなこんなでプロフィールのページまで弄ったところでふととんでもない事を思いついた。思いついたというか気付いたというか思い出したというか。昨日か一昨日かその前か、結構必死にJavaScriptで書いたコードが実は必要なかった。もっと簡単な代替手段があった。惜しかったが外部スクリプトファイルに書いたその部分のfunctionを削除して、それまでに作った全ページからそのサブルーチンを呼び出すイベントハンドラの記述を削除。ずいぶんスッキリしたが何となく寂しい。そしてその後にまた大仕事が残っていた。俺のプロフィールだけ通常のTABLEの下に変なのがあるだろ？スタンド能力表と犬の絵が。あのスタンド能力表が思ってもみないところで苦戦する原因になったんだよ。A-超スゴイ B-スゴイとか表の下に書いてあるだろ？あれは今まで表のCAPTIONとして書いてた。ALIGN属性でBOTTOMを指定して。それはTransitionalではOKな属性だったんだが、StrictではCAPTIONのALIGN属性は使えない。となるとスタイルシートでやるしかない。TABLEのCAPTIONの位置を指定するスタイルシートはcaption-sideっていうやつなんだが、これが何とInternet Explorerではサポートされてないんだよ。OperaやNetscapeなら表示できたんだけどな。IEだと認識してくれないから表の上側に来てしまう。それはダメだ。ジョジョマニアとして絶対に許せん。表の下に出ないとダメだ。他の手段を探すしかない。といういかそもそも表のタイトルじゃないからCAPTIONを使う時点でダメダメなんだけどな。他にやるとしたらHタグで見出しとしてやるか、DIVでやるかSPANでやるか。・・・ダメだ。表とセットの要素じゃないとダメだ。絶対に表の下側に表示させないとダメだ。表と一体じゃなきゃダメだ。となると表に行を追加して最下段のセルとして表示することになる。それだと困った事態が発生する。あの表には枠線がついてるだろ？セルとして追加するとそこにも枠線がついてしまう。それもダメだ。そこだけ枠線なしでしかもTABLEにコバンザメのようにくっついて下側に表示されるようにしなければ。TABLEの行として追加する方針に変更はない。だからボーダーを弄ることになる。あの枠線は元々は枠線として表示されていたものではない。TABLEのセルに太さ1ピクセルの枠線を書くのは容易じゃない。普通にborder-width:1px;とやると、そのセルだけなら1pxのボーダーだが、隣のセルも1pxのボーダーを持ってて、結局は2pxのボーダーと同じようになってしまう。しかも一番外側だけが1pxになってしまう。だからTABLEに一定の太さの枠線をつける簡単な裏技として、セルとセルの隙間を枠線に見立てる方法がある。一番奥に表示される親要素のTABLEの背景色をボーダーにしたい色にする。そしてセルとセルの隙間を1pxにする。そうするとセルとセルの間から親要素のTABLEの背景色が見えるという寸法だ。具体的にはTABLEタグのCELLSPACING属性（セル間の隙間）を1にしてBGCOLOR属性（背景色）を黒っぽくする。Strictで書くならBGCOLOR属性が使えないから代わりにスタイルシートでSTYLE="background-color:black;"というように書く。<table cellspacing="1" style="background-color:black;">こんな風にね。これで擬似枠線が作れる。このインチキ手法で今までやってたんだが、それだとさっき書いたようにA-超スゴイ B-スゴイ C-人間並・・・の部分にまで枠線がついてしまうことになる。特定の部分の枠線を制御したければ正攻法でスタイルシートのborder関連を使うしかない。普通にやると2pxのボーダーになってみっともないっていうのは説明したが、親のTABLEにも1pxのボーダーをつければ外側ボーダーも2pxになって整合性は取れる。しかし2pxのボーダーというのは予想以上に太くてカッコ悪い。どうしても1pxがいい。ならどうすればいいか。激しくめんどくさいんだが、基本的にセルの上と左だけに枠線をつけるという風にすればいい。そうすれば右端と下の端だけボーダーの無いTABLEができあがる。あとは右端のセルにだけ右側の枠線もつけ、そして一番下はこのスタンド能力表の場合は枠線不要なので上のセルに蓋をするために上側だけ枠線をつける。これでOKだ。おっと、親のTABLEには枠線つけるなよ。あとCELLSPACINGは0だ。スタンド能力表なんていうどうでもいいものにここまで力を入れる自分が好きだ。こんなところでDHTMLのスクリプトとかスタンド能力表とかで躓いたり、途中でTransitionalからStrictに方向転換したりでなかなか進まないんだが着々と完成に向けて進んでる。IEでもOperaでもNetscapeでも大体同じように見れている。ただディスプレイの解像度を変えるとどうなるかはまだ実験していない。あとMacではどうなるかというのは永久に実験すらされないだろう。そこまでできるかボケ。それから、DHTMLはやっぱり派手なのは好きじゃないからずいぶんシンプルに地味にちょこっとだけ使ってる。まぁ楽しみにしててくれ。とは言っても今の時点でこのサイトに来てる人間はほとんどいないな。バンドメンバーですら俺とCHOSANGしか見てない。椅子タンもSALLY殿も月に2回ぐらいしか見てないんじゃないの？って感じだし。俺が把握できてない人が来てたりもするんだけどね。心当たりのある人は掲示板にでも一言書き込んでくれ（笑）。CHOSANGの知り合いか何かかな〜。あとは俺のサイトの常連がROMってるぐらいのもんだ。最初は珍しがって10人ぐらい来てたけど今では2人か3人だもんな。つまりこのサイトを頻繁に見てる人間は5人ぐらいだ。次回のライブの時はMCだけじゃなくチケットにURL書くとかして宣伝した方がいいな。まぁほとんど見てる人がいないうちにしっかりしたサイトを作り上げておこうと思う。
◇犬土偶 Selection #020
氷の上に立つように / 小松未歩
6th Single「氷の上に立つように」
2nd Album「小松未歩 2nd 〜未来〜」
Compilation Album「THE BEST OF DETECTIVE CONAN 〜名探偵コナン テーマ曲集〜」
小松未歩っていうとコナンっていう印象がすごいあるんだけど、Being系の他のアーティストに曲提供したりしてたまに名前見かけるね。昔めざましテレビのテーマ曲にも使われてた気がする。シンガーとしてはそんな巧い方ではないんだけどソングライターとしてはなかなか凄いと思う。巧いな〜と思う。俺のプロフィールの好きな作曲家のところにも名前を連ねてる。と思う。他にもいい曲いっぱいあるんだけどあまりにもマニアック過ぎてもいかんと思って最近の犬土偶Selectionは中途半端にメジャー志向（;´Д｀）
話題：Webプログラミングとか
Info.
| 公開日時 | 不明 |
|---|---|
| 本文文字数 | 5692文字 (タグ込み) |
| URL | https://orca.xii.jp/debug/diary/diary.cgi?id=dogoo;date=20040210 |
| RSS1.0 | https://orca.xii.jp/info/diary-dogoo.rdf |
Comments
コメントはありません。