テンプレートを提供してくれるサイトがどんどん増えている今日この頃。いろいろなデザインがあって非常に迷うところですが、「あぁこのデザインで３カラムだったら良かったのにー」と思ったことはありますか。２カラムレイアウトでも左にメニューがあるのではなく、右に欲しいという場合もあります。CSSをいじればそれらの問題は解決しますが、初心者にとってはなかなか難しいところ。しかも人が書いたコードを触るのはCSSを読み慣れてないとなかなか出来ないものです。今回紹介するのはそういったデザインを柔軟に変えるだけでなく、いろいろ出来てしまう便利なサイトです。
Eris' Template Generator
１２ものデザインテンプレートを２カラムにしたり３カラムにしたりして自由に使うことが出来ます。フォーム形式で書き込んで行くだけであっという間にサイトが完成します。Blogrollingのコードを貼付ける欄やWebringやボタン用の欄もあるので、このページですべて設定して完成させることが可能です。MTやWordPressのようなCMSにも対応しているので、コードが完成したときにはテンプレートタグも埋め込まれているので大変便利です。デザインのほうはどれもハイクオリティーなのも良いですね。すべての情報を書き込まなくても「Host」と「Basic info」だけ書き込めばコードは生成してくれるので、コードだけ欲しい人にもお手軽です。
CSSファイルにどんどん定義を書き込んでいると、いつの間にか２００行、３００行と増えて行きますよね。複雑なレイアウトだったりハックを加えているとファイルサイズも10kを超えてしまうこともしばしば。いくらコンテンツとスタイルが分離されていても、ページがロードされたときに+10kのファイルサイズが加算されてはたまりません。キャッシュの設定で毎回読み込まなくて良いケースがほとんどだと思いますが、それでも負担になるには変わりません。
このように大きくなってしまったCSSファイルを一旦圧縮して、読み込んだときに展開する・・・という方法があるそうです。サーバー側で圧縮／展開を行うのでファイル転送量も少なくなりますし、体感出来るほどではないですが、表示スピードも上がると思います。圧縮方法はいろいろあってApacheなら「mod_gzip」というモジュールを使って行うことが出来ます。今回紹介するのは多くのサーバーにインストールされているPHPを使って行う方法。やり方も非常に簡単です。
CSSファイルが「styles-site.css」だとしたら「style-site.php」と拡張子を変更します。そしてPHPファイルの先頭に以下のコードを書き込むだけです。
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
?>
CSSファイルが圧縮出来るという意味では非常に興味深いですが、圧縮出来たからといって何か劇的に変わるというわけではないですし、この方法は残念ながらNetscape4では動作しません。先ほども書きましたが、別にPHPでしか出来ないというわけではないので、使用するときはサーバーのスペックをみて検討すると良いかもしれません。
いろいろサイトを徘徊していると、３カラムやレイアウトがある程度組まれたCSSファイルをダウンロード出来るところが多々ありますよね。日本だとHINAGATAなんてありますが、最近見つけたのもなかなか使えますよ。
CssCreator：Generate a CSS layout for your site
こちらは自分でレイアウトをコーディネート出来るページ。レイアウトを可変にするとか、中央表示にするのはお手のもの。３カラムにするとかヘッダーを付けたりかなり自由度が高いです。興味深いのが、ページ右側にプレビューがリアルタイムで見れるところ。配色もふまえてどんな感じになるか見ながら作れるのは結構楽しいかもしれません。完成したらCSSファイルだけでなくHTMLファイルも一緒にダウンロード出来るようになっています。
CSSファイルの方はNetscape 4でも崩れないようなハックも含まれているみたいですね。「padding」のような文字とボーダーの間を作るプロパティが含まれていないので、さらに作り込む必要がありますがサイト作るうえで良い土台にはなりそうですね。
ちなみにこのツールを公開しているCssCreatorではフォーラムも充実しているので良い情報収集にはなると思います。
音声ブラウザやキーボードアクセスをするユーザーに対して『メニューをスキップする』や『コンテンツへジャンプ』のようなメニュー部分を飛ばすリンクを設置する方法をとる場合があります。ページ上から順に読み上げる音声ブラウザの場合、毎回長いメニューを読み上げられたらたまらない・・・と考えるユーザーもいるはずです。リンクの設置方法は幾つかあると思いますが、以前かなりポピュラーだった方法がスタイルシートに『display:none』を記述するというもの。スクリーンには表示させないけど、ソースコードにはちゃんと残るので、理論上だと音声ブラウザはそのリンクを読み上げてくれるはずなのです。しかし、実はそういうわけにもいかなくて多くの音声ブラウザは『display:none』内のコンテンツを読み上げてくれません。もし、どうしてもリンクを非表示にしてかつ音声ブラウザでも読み上げてほしいのであれば以下のようなコードが使えるでしょう。
#skip{
position: absolute;
left: -200px;
width: 100px;
}
とはいうものの、非表示という対処が決してベストなアイデアとはいえません。なぜなら音声ブラウザのユーザーだけが『コンテンツへジャンプ』リンクを必要としているというわけではないからです（例えばキーボードアクセスとかそうですよね）。一番ベストの方法はやはりページ上部に設置することだと思います。
もうシェアは0.5%にも満たなく最近ネットを始めた方だと「何それ？」と思われても仕方がないNetscape 4.xですが、サイト構築をする上で無視出来ないケースも出てきます。例えば企業によってはアップグレードを頻繁に出来ないということでNetscapeのまま・・・というのもあります。Netscape4.xはかれこれ６年前のブラウザということもあり、CSSのサポートも甘いです。CSS Browser Supportのようなページをみてどのプロパティが使えるのかチェック出来ますが、今回はThe CSShark Answersのページを参考に具体的にどういった対策をとったら良いのかをメモがわりにピックアップ。こういう方法もある．．．というのがあればぜひコメントしてください。
1. スタイルシートを切り分ける
Netscape4.xは「@import」からのスタイルシートは読み取ることが出来ないので２通りスタイルシートを作って対処することが出来ます。
<link rel="stylesheet" href="oldbrowser.css" type="text/css">
<style type="text/css">
@import url(newerbrowser.css);
</style>
2. フォントはそれぞれ設定
新しいブラウザだと親エレメント（例えばBodyタグのような）にフォントを設定すれば、子エレメントをはじめ全体にスタイルが影響するのですが、Netscape4.xではそうはいかないので、class/idごとに定義してあげる必要があります。また、フォントの大きさも違っているので相対値にしておくと良いでしょう。
3. bodyの余白
bodyのディフォルト定義では各ブラウザともにわずかな余白が空けられています。これは通常「margin: 0px」で解決するのですがNetscape4.xではそうはいきません。Netscape4.xではこの余白を負の値を入れることで解決します。Netscape4.x用のスタイルシートに以下のように記述すると良いでしょう。
body {margin: -10px 0px 0px -10px;}
