« 本屋で見かける言語たち | トップページ | やっぱりずれている »

2004/10/08

1pxのこだわり

ココログの表示で一つ不満な事がある。 バナーとサイドバー・記事欄の境界にずれが出ているのだ。 境界線が一直線にならない。 どういうわけだ。 しかしそれは神経質に見ないと分からないくらい。 気にしなければ気にならない位。 でも気になる。 損な性格だな。 後から分かるのだが、サイドバーが1pxバナー側に出っぱっているのだった。

ベーステンプレートを表示させると一直線になっている。 どこかの過程でずれる様になるのか。 もう一度始めから作り直して確認しながらテンプレートを作って行ってみる。 記事表示列の[列の横幅]を[可変]にすると、ズレが出る事が判明。 更に、 確認ボタンで表示されるプレビュー画面をダウンロードして研究してみる。 なお、以下は2列で左にサイドバーを持ってきた場合の話。

結局分かった事が二点ある。

  • [可変]の場合はサイドバーの位置を決め打ちしている (左から0px、上から70px)。
  • 一番外枠の線(1px)を設定していたので、 タイトルと記事が1px下に下がって表示されていた。

問題の根源は記事欄の横幅を[可変]にしたのに、 外枠の線を消すのを忘れていたって事ですね。 いや、サイドバーの位置が決め打ちになっちゃうのが問題なんだろうけど。 それは、仕様なんでしょうな。

では、解決編。 (上級じゃない)標準テンプレートを使っている場合は話が簡単だ。 「スタイル:ページ全般の設定」で、[全般の設定]->[枠線]を [囲む]から[なし]へ変更すればいい。 こうすれば、凸凹は解消される。

しかし、自分はスタイルシートを使う為に上級テンプレートに変換したので、 スタイルシートで何とかするしかない。 早速先月作ったカスケードスタイルシートに以下のスタイルを追加する。

#container
  {
    border: none ;
  }

カスケードじゃなくて、本体のスタイルシートを修正して使っている人は、 #containerの中の、border属性をnoneにして下さい。

因みに、どうしても#containerのborderを有効にしたい、と言う人は、サイド バーの決め打ち位置をずらすと良いでしょう。

#left
  {
    left: 1px ;    /* borderのpix分 */
    top: 71px ;    /* borderのpix分 + 70 */
  }

この二つの方法だと、 サイドバーのサイズ(縦)>記事のサイズ(縦)だと表示が崩れる。 崩れると言うほどではないかもしれないですが、 全体の領域(#container)が記事サイズに合わせて縮小され、 サイドバーだけ長く表示されてしまいます。 (もちろん記事が増えていけばこの問題は自動解消されますが)

というわけで、完全版スタイルを考えてみました。

#left
  {
    position: static ;
    left: auto ;
    top: auto ;
    float: left ;
  }

#center
  {
    margin-left: auto ;
  }

こうすれば、一応完璧になるでしょう。 ただし、このスタイルは左にサイドバーを持ってきた時だけ有効です。 右にサイドバーを持ってきた場合、 安易に#rightを設定すると本格的に表示が崩れます。 3列の場合はもっと難しくなるでしょうね。 もっとエレガントな解法があれば、知りたいです。

結論的には、記事欄の横幅を[可変]にした場合は、全体の枠線を諦める、 という事になりますかね。 高々、1pxの事ではありますが。

最後にちょっとだけチップス。 スタイルを研究したい場合は、 [確認]ボタンで表示されるプレビュー画面のHTMLソースが結構役に立ちます。 スタイルシートがHTML埋め込みになっているので、 これをダウンロードして差分を取ると、色々分かってきますよ。

|

« 本屋で見かける言語たち | トップページ | やっぱりずれている »

「ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/49701/1624204

この記事へのトラックバック一覧です: 1pxのこだわり:

» やっぱりずれている [沈思黙考小半時]
昨日の記事で書いた。 ずれの問題。 駄目でした。 あれだけでは。 自分が使って [続きを読む]

受信: 2004/10/09 17:46

« 本屋で見かける言語たち | トップページ | やっぱりずれている »