以前にも書いたとおり、このサイトはMac miniの登場に触発されてリニューアルしたんだけど、もう一つきっかけになったのがCSSの導入。さらにCSS化を推し進めたい。今回はどういうわけか、ですます調。
そんなワケでGoLive
このサイトはアドビのGoLive CSで作成しています。自分でHPを作り始めたのはもうかなり昔のことですが、最初は手打ちでHTMLを書いてました。ローカルで書くスクリプトが姿を変え、いろいろレイアウトされて表示されるのが単純に楽しかったのですが、そのうちレイアウト云々より文章を書いてる方が楽しくなって、さらにその量が手作業で管理できる範囲を超えてきました。そこでHTMLを書く手間も省けて、かつサイト管理もできるGoLiveを購入したわけです。もともとこの製品、アドビのものではなくて、GoLive社の「CyberStudio」というアプリケーションでした。デビュー当時、ポイント&シュートというアニメーション付きのリンク設定方法が凄く新鮮で衝撃を受けたものです。そんなGoLiveを、Web方面が弱かったアドビは、いつものように金に物言わせてポン!と買収しちゃったわけです。そしてどういうセンスか、元の社名を製品名に変更してリリースしたのでした。
僕はMac互換機のOS8.5上で動作するGoLive5.0から使い始めました(↑4.0とアップグレードした5.0)。もう使わなくなったという人からGoLive4.0を権利付きで譲ってもらい名義登録変更し、すでに発売されていた5.0にアップグレードしました。手打ちの頃から複雑なレイアウトなどしていなかったので、作成作業の使い心地より、更新したファイルを感知して、必要なものだけサイトへアップロードしてくれる機能にとても助けてもらいました。あるファイルに変更を加えると、それを参照している他のファイルも一斉にリンク先などが修正されるのも重宝しました。いくら個人のサイトとはいえ、その頃はすでに手作業による変更は不可能なほどファイル数が膨らんでいたからです。
そういえばそれ以前にマクロメディア社からDreamweaver1.0がリリースされたときはすぐに試用版をダウンロードして使ってみたりしました。ウィンドウ分割でソース表示してくれたりして、ルック&フィールはマニアックで好みでしたが、値段に負けたという次第。
僕の利用方法はとても限定的だったのでその後の6.0へのアップグレードは見送り、しばらくはMac互換機+OS9.2上で5.0を使い続けていました。そしてG4 MDDになってMacOSX10.3とそれに対応したGoLive CSが出たのに合わせ、両方ともアップグレードしました(↓CSと5.0の時に買ったマニュアル本)。
あの瞬間到来
いろいろ機能が増えたのでしょうが、さほど使い込んでいない僕は違和感を覚えることもなく、すんなり移行することが出来ました。ところが仕事が忙しくなって、更新もままならなくなってきました。そうこうしているうち長い時間が過ぎ、誰も一度は通過する「あの時」が僕にも訪れたのです。
もう飽きた
美人には三日で飽きるといいますが、美人にでさえ三日で飽きるならWEBに日々雑感を公開するなんていう冷静に見れば「変な行為」は、パトロンからお小遣いをもらわない限り、よほどのモチベーションが無ければいつか飽きるに違いありません。
Mac miniの登場とCSSの謎
一度失った興味を再び取り戻すにはよほどの刺激がなければいけませんが、Mac miniを購入したことで何か作業がしたくなり、まずは簡単に取りかかれる本サイトのリニューアルに手を出したのです。サイトのリニューアルというような小さな作業は、図体の小さなMac miniにぴったりだと思ったのです。
作業には「目的の設定」が必要です。どうせこれまでと見栄えを変更するなら、最近よく耳にするCSSというのを使ってみよう、と思いました。ところが実はそのCSSというのがどういう目的でどんな結果をもたらすのかということをよく分かっていませんでした。ただ何となく、コンテンツの見せ方をコントロールしている、ということは朧気に理解していました。普段ネットを見ていて気になっていたのが下図にあるような文章の見せ方の違いです。
文字の詰めや、行間の間隔が異なっている。以前は下のような状態だったけれど、この違いはどうやって実現しているのか?
基本的にグラフィックや写真を見せるサイトではなく、文章を書き連ねているサイトなので、たとえ読まれないとしても文章表示くらいは読みやすい見てくれにしておきたいと思ったのです。ただ、それをどうやって設定・指示するのか、その方法が全く分かりませんでした。
僕のWEB作成はあくまで趣味であって、今の仕事とは全く関係ありませんし、テキスト主体のサイトなので最新WEB事情にはとんと疎くなっています(未だにRSSって何?って感じ)。そして「仕事で無い限り取説はほとんど読まない」という性格も災いして、これまで自主的に勉強することを避けてきました。だって面倒臭いですもん。しかしMac miniがやって来たから、コイツを少しでも働かせんとな、と思い、ようやくあれこれ調べ始めたわけです。でもやはりあの誰が読むのか分からないような不親切な取説は読みませんでしたケド。
概念より先にツールの使い方が分かった
しかしたった一つだけ持っている教本も前ページの写真に写っている超初心者用でしかも2世代前の5.0時代のもので、CSSツール部の説明はあるものの、ツールの完成度自体が未熟で今のCSバージョンとは見た目が異なっています。それにまず「CSSの概念」の説明がないので取っ掛かりが掴めません。そこで取り敢えずCSSを使っていると思しきサイトを回り、ソースを引っ張ってきて中を覗いてみたのですが、そこには見慣れたタグしかなくて、特に変わった指定もありません。これは不思議。
そこであれこれファイルをGoLiveに読み込ませて見ました。そうやって自分なりの探索をしているうち、運良く「内部スタイルシート」を使っているソースに巡り逢えました。それをGoLive CSで開くと、ようやくCSSウィンドウに変化が見えました。
ウィンドウに入っているチェックを外したり入れたりすることで、テキストの見え方に変化が起きました。これはオモロイ!一度「面白い」と思うことが出来れば、それは行為の継続に繋がります。
さらにあれこれ弄っていると従来からあるタグに独自の見せ方をさせるよう指定できることや、新たにclass属性というものに対し自分で名前を付けて定義できることが分かりました。ここに至るまでマニュアル見ずに適当に触っていて約半日。かなりラッキーだったと言えます。これもミニのおかげ。
いろいろ試していると、文字の見せ方だけでなく、罫線やら枠線やらグラフィカルな要素もCSSで指定できることが分かってきました。
例えば↓のような感じ。
HTML内では<h3>のまんまだけど、外部に<h3>の定義をした.cssファイルを置く。これが外部スタイルシートというのか。ここまで分かってくると俄然楽しくなってきました。あ~だこ~だテストして遊んだあと、ある程度コントロールすることが出来るようになってきました。しかし、問題がなかったわけではありません。
もちろんGoLiveにも問題はある
まず、一番必要としていた文章の文字詰めが、GoLive CSのツールでいくら指定してもSafariで再現されなかったのです。これはワケがわからなくて困りましたが、ほどなくしてGoLiveのはき出す書式が独自の文法なんだろうと察しがつきました。そこでようやくCSS文法書を買うことにしました。
先の文字詰めの問題は、GoLiveのツール上から書き出すと「font-stretch」と記述されるのですが、これをSafariはちゃんと認識しないことに起因しているようでした。そこで近所の本屋で買ってきた文法書「CSSコンパクトリファレンス」で調べてみると、希望する効果を得るには「 letter-spacing」と記述すればよいことが分かりました。早速直接手打ちで外部スタイルシートに書き込んで、問題なく表示させることができました。
取説を読まない僕ですが、やはりリファレンスは手元にあると、いざという時に便利です。
やはりストレスは無くしたい
ミニがきっかけで今まで数年に渡って全く気が付かなかったCSSの操作の仕方が分かり、一気にサイトリニューアルへむけて弾みがつきました。これでしばらくは、モチベーションも維持できると思います。が、他にもまだGoLive CSで悩んでいることがあります‥。
僕のサイトはどのページも同じレイアウトで同じ画像を使っているシンプルなもので、一度決めてしまえば後は原稿を考えてキーボードで打ち込むだけなのですが、そんな単純な作業でGoLiveは非常にストレスを与えてくれちゃうのです。
このサイトでは段組に従来のテーブルタグを使っていますが、レイアウト作業画面でテキストに希望するCSSを指定すると表示が何故かズレます【↓A】。また、修正したい箇所にカーソルを持って行っても、一文字くらいズレてしまって正確な範囲を指定できないという致命的な現象もあります。これは基本に立ち戻って「文章作成」と「レイアウト」の作業を別々に行えばいいのでしょうが、出来上がっていく工程を目で確認しながら作業していくのを、とても有効な創作への刺激とする僕には合いません。グラフィカルな実際の見栄えによって刺激を受け、文章の流れを変えていくことも、かなり多いのです。場合によっては結論が変わったりします(←ウソ)。そこで画像表示をオフにしてプレーンなテキストだけの編集画面にしても、直接そこへ文字を打ち込んでいくとその部分が濁って文章が視認できず、非常にストレスになります【↓B】。
これはグラフィックボードによるものなのか、それともOSによるのか、果ては自分の設定方法が悪いのかよく分かりませんでした。
が、サイトをリニューアルしたのがつい最近の5月1日で、その頃にはすでに次期CS2のアナウンスも出ており、CSSの強化がうたわれていたので、それに期待し今は我慢することにしました。
それからちょうど2ヶ月が過ぎました。よくここまでこんな作業状態で記事をアップしてこれたものだと思います。そしてついに待ちこがれていたGoLive CS2体験版がアドビのサイトにアップされました。問題の箇所は改善されているのか、早速使ってみましょう!
というわけでここで時間がなくなりました。レポートのメインの筈だったCS2体験版を使った感想に触れないまま、次回に続きます。
2005-07-13 > フリフリのMac mini ミニ大作戦!