Web標準にアプローチ　〔まいまいのお宿。〕

「背景画像の設定の無難な記述とは？」

全部スタイルシートで組むことなんて、まずなかったので
色んな壁にぶち当たりました。
ブログを書いていなかった期間にしていたお仕事。

むぅ～むぅ～と思っていたけれど
書いてみると、意外と作業量が軽減されるような気がします。

最近またまたブラウザ戦争ですか。いっぱいあるな～
普通に作って、最新版のブラウザで、ある程度シェアのあるブラウザなら問題ないことなので
今回メモする背景画像の設定の件は
頭の片隅に置いておくと役に立つかもしれない程度の事柄です。

背景画像の位置を指定するときには、よく「left top」とか「center top」とか記述しますね。
それより頻度は低いと思いますが「10px 5px」とか「-1px 10px」とか書くときもあります。

でもね、コイツがちょっと曲者で、必ずそうなるわけではないようなんだけれども
数値指定すると、背景が飛ぶ！なくなっちゃったんです。
もしも、そんなことに遭遇したら、ちょっと手直しが必要です。
IE7はどうかな～そこまで酷くはないようだけれど。

手直しとしては、「center」「left」「right」「top」「bottom」で設定できるように
画像を作り直してやる！

広くブラウザをサポートしてあげようと思ったら
最初からそうしておくことをお勧めします。
身のためといったほうがいいかもしれないな。
今度から、ぜ～んぶ、そういう設定にしようっと。

なんでもそうだと思うんだけれど、ちょっと色んな設定ができる場合
一番シンプル、より古風だったり
CSSじゃなくて、HTMLだけで設定できるのと似た値を設定してやるほうが
「くそォ！」と思うことが少ないように思います。

複雑になるほうが、手直しも大変だもんね！

今回のお仕事の教訓でした。
実に約２週間ぶりのブログです。
これを知った時に書き留めておきたかったのだけれど
書くより寝たかった！（笑）

さて、もうひとつ書きますよ。
無難な記述の一例を。

･････つづく

---

東京２３区中心・駅近ホテルズ｜散文誌・３６５

*Web標準2007年版目次*

• 基準のソースコード
• 文字コードは「Shift-JIS」か「EUC-JP」か
• Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする
  
• CSSでidを指定する時は要素名とセットで記述
• HTMLのDOCTYPE宣言は軽視できない
• 行間指定「line-height」の使い方
• @importを使って外部スタイルシートを読み込む