ウェブページの枠と幅
相変わらずはてなダイアリーの使い道に迷い続けているというかほぼ使っていないんだけど、とりあえずデザインをどうにかしてみようと、テーマを「指定なし」にして、各ボックスのボーダーを1px solid #cccにしてみた。見づらくて申し訳ない。
ここからが大変ではあるのだが、とりあえずのテーマとして「画像を使った枠」に挑戦してみようかなぁと思ったりする。というところでまず問題になるのは、幅をどういう仕組みにするかということ。
ホームページの幅どうするよ？ （web制作管理@2ch）
ここでの議論に従うと、ウェブページの幅は一般に
- ブラウザ追従型
- 固定・中央揃え
- 固定・左揃え
という3パターンがあり、また
- ヘッダとフッタ
- ボディ（各コンテンツ）
の両者が違うものを選択している場合もある、と。
「画像を使った枠」を前提とした場合、固定型ならば画像3枚で済む。
<style type="text/css">
.top {
width: 520px;
background-image: url("top.gif");
background-position: top left;
background-repeat: no-repeat; /* リピートしない */
}
.middle {
width: 520px;
background-image: url("middle.gif");
background-position: top left;
background-repeat: repeat-y; /* 縦方向のみリピート */
}
.bottom {
width: 520px;
background-image: url("bottom.gif");
background-position: bottom left;
background-repeat: no-repeat; /* リピートしない */
}
</style>
...
<div class="top"> </div>
<div class="middle">そのときハイジは「いくじなし！」と言った。</div>
<div class="bottom"> </div>こんなかんじ。一方、ブラウザ追従型にすると、画像を8枚用意して、テーブルを使って配置するのがおそらく最も簡単な方法だと思う。
<style type="text/css">
.top-left {
width: 10px; height: 10px;
background-image: url("top-left.gif");
background-position: top left;
background-repeat: no-repeat; /* リピートしない */
}
.top-center {
height: 10px;
background-image: url("top-center.gif");
background-position: top left;
background-repeat: repeat-x; /* 横方向のみリピート */
}
.top-right {
width: 10px; height: 10px;
background-image: url("top-rignt.gif");
background-position: top right;
background-repeat: no-repeat; /* リピートしない */
}
.middle-left {
width: 10px;
background-image: url("middle-left.gif");
background-position: top left;
background-repeat: repeat-y; /* 縦方向のみリピート */
}
.middle-right {
width: 10px;
background-image: url("middle-right.gif");
background-position: top right;
background-repeat: repeat-y; /* 縦方向のみリピート */
}
.bottom-left {
width: 10px; height: 10px;
background-image: url("bottom-left.gif");
background-position: bottom left;
background-repeat: no-repeat; /* リピートしない */
}
.bottom-center {
height: 10px;
background-image: url("bottom-center.gif");
background-position: bottom left;
background-repeat: repeat-x; /* 横方向のみリピート */
}
.bottom-right {
width: 10px; height: 10px;
background-image: url("bottom-right.gif");
background-position: bottom left;
background-repeat: no-repeat; /* リピートしない */
}
</style>
...
<table cellspacing="0" cellpadding="0">
<tr>
<td class="top-left"> </td>
<td class="top-center"> </td>
<td class="top-right"> </td>
</tr>
<tr>
<td class="middle-left"> </td>
<td class="middle-center">そのときハイジは「いくじなし！」と言った。</td>
<td class="middle-right"> </td>
</tr>
<tr>
<td class="bottom-left"> </td>
<td class="bottom-center"> </td>
<td class="bottom-right"> </td>
</tr>
</table>きちんとテストしたわけではないので実働しないかもしれないけど、だいたいこのくらいの設定は必要になりそう。見るからにやる気が起きませんよ。
というわけで画像を使う以上はコンテンツ幅を固定（左右マージンは可変）にするのが妥当なのだが、次の問題はこの固定幅を何ピクセルにするかという、もはや永遠の問題が出てくる。
横幅800固定やめろ。ブラウザ最大化するのウザイ。 （web制作管理@2ch）
2chばかり参照してもあれだけど、とりあえずこの議論は2005年現在もそれほど大きく変化しているわけではないということを言うために。640x480が800x600に変わった、とかはあるけど*1。それにしても540px固定とかだと1280x1024あたりからはだいぶキツくなってきてしまう。さすがに640x480は切り捨ててもいいかもしれないが、800x600はなぁ……かといって720くらいってのも……あああ悩ましい。
まぁ実験と割り切って、そのあたりのラインで決めます。とりあえず仕様の思案ということで今日はここまで。いずれやります。やりますよ、ええ、いずれね。
追記（2/24）：すっかりblosxomとかのつもりで書いてたけど、落ち着いて考えてみるとはてなダイアリーはtDiary互換だからタグは変更できないんだった。タグ構成から考えて、幅固定しか選択肢がなさそうだ。また無駄な議論をしてしまった……。
