2006年01月30日（月） コメント:6 トラックバック:1
background-positionについて調べていたら、%単位での指定の意味を間違って解説しているサイトがわりと多いことに気づいた。 たとえば、「background-position」でぐぐるとトップに表示されるbackground-position−スタイルシートリファレンスには、つぎのように書かれている。
- ％値で指定
- 背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、％で指定します。例えば、background-position: 20% 40%; と指定した場合、表示される領域の左端から20％、上端から40％の位置が背景画像の表示開始位置となります。
これは正しくない。仕様書（日本語）には、つぎのように書かれている。
- <percentage> <percentage>
- 値が '0% 0%'の組のとき，画像の左上隅をボックスのパディング辺の左上隅に揃える。値が '100% 100%'の組のとき，画像の右下隅をパディング領域の右下隅に揃える。値が'14% 84%'の組のとき，画像の左から14%，上から84%の点をパディング領域の左から14%，上から84%の点に揃える。
わかりにくいが、単に背景画像が表示される領域の左上からの距離
を指定するのではない。ほかの信頼できるリファレンスサイトを見てみると、
background-position: m% n%;
m と n は数として話を進めよう。このときの背景画像の位置は，“要素の左から m%，上から n% の位置が，画像の左から m%，上から n% の位置に一致するように”置かれる。感覚的に言うと，要素と画像の同じ位置をピンで留める感じである。
……ところで、Safariで意図どおりに表示されないのはなんでですかorz
コメント（6件）
いいんではないでしょうか。「２」でつながったときがっかりしたクチですから（笑）。
いままで「コメント：件数」の「件数」の部分だけリンク張られていたので、小さくてクリックしにくいなと思っていたんですけど、いつのまにか全体にリンクがかかるようになっているのに気づきました。
あと「共有chameleon」では、上のバーにもpreventry・nextentryのタイトルが表示されますが、こちらにはないようです。
なんて細かい個所を見つけるのささやかに楽しんでいたりします。
今回、上部ナビのHTMLを変更し、「タブ」の実現方法も変えたので「Safari対策」できなくなっちゃいました。
コメントの部分は以前は定義リストだったので、件数にしかリンクを張れなかったんです（一応、a要素のpaddingでクリックできる領域を広げてましたが）。今回は単純なリストに変更してます。
preventry・nextentryはHTMLの変更に伴って無くしました。より自然なマークアップにしようとすると、あそこには置けない。ほかにも、いま共有にあるのとはHTMLが（当然CSSも）結構変わってたりします。
一番下の月別アーカイブとかも無くせば、もうひとつdivを減らせるんですが、悩ましいところです。
なんとかなっちゃいましたね。
あのスリットからチラ見せが悩ましかった（？）のですけどねえ。
マークアップの是非は、私では及びも尽きませんが、
ひとのブログ巡回していると、preventry・nextentryは上下にあると便利だなあ、と感じます。
私は今回強引にpreventry・nextentryだけfixedさせました。
自分がよく使うから、なんですけど。
背景画像を指定するボックスを変更しました。おかげで、いろんなところのmarginとpaddingを再設定するはめに（笑）
preventry・nextentryはlink要素とかマウスジェスチャでなんとかなるので、UA任せということで。詳細はまたいずれ。
確かに、前者の解説は間違っていますね。
私は一枚絵の壁紙を背景の片側に寄せるデザインが好きなのですが、この仕様にはよく泣かされてます。
例えば記事枠を中央寄せ＋背景右寄りに一枚絵というレイアウトですが、
background-positionの左右値をピクセル単位にすると中央寄せにした記事枠とバランスが合わなくなってしまうし、%単位にすると高解像度の環境では一枚絵がだんだん左にずれていって、記事枠と重なってしまうんです。
もし前者の解説が正しいのなら、解像度が高くなったら一枚絵の位置は逆に右にずれていくはずです。
…って、文章じゃわけがわかりませんね（汗汗）
「記事枠中央寄せ＋背景右寄り」は可変幅だとつらいですね。
%単位の指定（20% 80%とか）が威力を発揮するレイアウトってあるんですかね。
0, 50, 100%ならキーワードで同じことができますし。自分はちょっと想像つかないです。