てんぽ: background-positionの%値について

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

background-positionの%値について

2006年01月30日(月)

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でのスクリーンショット……ところで、Safariで意図どおりに表示されないのはなんでですかorz

#67
カテゴリ:HTML・CSS
タグ[ CSS ]

(-6件)

耳呈:スリット

いいんではないでしょうか。「2」でつながったときがっかりしたクチですから(笑)。

いままで「コメント:件数」の「件数」の部分だけリンク張られていたので、小さくてクリックしにくいなと思っていたんですけど、いつのまにか全体にリンクがかかるようになっているのに気づきました。

あと「共有chameleon」では、上のバーにもpreventry・nextentryのタイトルが表示されますが、こちらにはないようです。

なんて細かい個所を見つけるのささやかに楽しんでいたりします。

  • 2006年01月30日(月)23:46:59
  • URL
  • 編集
みりばーる:Re: スリット

今回、上部ナビのHTMLを変更し、「タブ」の実現方法も変えたので「Safari対策」できなくなっちゃいました。

コメントの部分は以前は定義リストだったので、件数にしかリンクを張れなかったんです(一応、a要素のpaddingでクリックできる領域を広げてましたが)。今回は単純なリストに変更してます。

preventry・nextentryはHTMLの変更に伴って無くしました。より自然なマークアップにしようとすると、あそこには置けない。ほかにも、いま共有にあるのとはHTMLが(当然CSSも)結構変わってたりします。

一番下の月別アーカイブとかも無くせば、もうひとつdivを減らせるんですが、悩ましいところです。

  • 2006年01月31日(火)01:09:30
  • URL
  • 編集
耳呈:すりすりっと

なんとかなっちゃいましたね。
あのスリットからチラ見せが悩ましかった(?)のですけどねえ。

マークアップの是非は、私では及びも尽きませんが、
ひとのブログ巡回していると、preventry・nextentryは上下にあると便利だなあ、と感じます。
私は今回強引にpreventry・nextentryだけfixedさせました。
自分がよく使うから、なんですけど。

  • 2006年02月01日(水)22:44:04
  • URL
  • 編集
みりばーる:Re: すりすりっと

背景画像を指定するボックスを変更しました。おかげで、いろんなところのmarginとpaddingを再設定するはめに(笑)

preventry・nextentryはlink要素とかマウスジェスチャでなんとかなるので、UA任せということで。詳細はまたいずれ。

  • 2006年02月01日(水)23:11:06
  • URL
  • 編集
:>background-position

確かに、前者の解説は間違っていますね。
私は一枚絵の壁紙を背景の片側に寄せるデザインが好きなのですが、この仕様にはよく泣かされてます。
例えば記事枠を中央寄せ+背景右寄りに一枚絵というレイアウトですが、
background-positionの左右値をピクセル単位にすると中央寄せにした記事枠とバランスが合わなくなってしまうし、%単位にすると高解像度の環境では一枚絵がだんだん左にずれていって、記事枠と重なってしまうんです。
もし前者の解説が正しいのなら、解像度が高くなったら一枚絵の位置は逆に右にずれていくはずです。

…って、文章じゃわけがわかりませんね(汗汗)

  • 2006年02月03日(金)00:56:27
  • URL
  • 編集
みりばーる:%単位

「記事枠中央寄せ+背景右寄り」は可変幅だとつらいですね。
%単位の指定(20% 80%とか)が威力を発揮するレイアウトってあるんですかね。
0, 50, 100%ならキーワードで同じことができますし。自分はちょっと想像つかないです。

  • 2006年02月03日(金)23:25:47
  • URL
  • 編集
コメントの投稿

トラックバック(-1件)

http://mb.blog7.fc2.com/tb.php/67-86a48cc4

background-position のサンプル

background-positionのパーセント指定を主に作ったサンプルですが、すっかり忘れていたのでここで紹介するとともに、はまりやすい落とし穴を明確的に解説します。

  • 2006年12月25日(月)12:26:55
  • from miniturbo::blog

<<WinIEの崩れをheight: n%で直す | 「わほっき。」が素晴らしい件>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。