2009/1/29
カテゴリ: WEB, 1- テクニック — パシフィカス @ 7:29:07

スクロール時の背景画像固定やブラウザの戻るで戻らないページ

背景画像を固定するCSS

background-attachment: fixed;

時折、スクロールした際に背景画像を固定しているサイトを見かけますが、とても違和感を感じます。

単なる背景や画面の端の方にいるキャラが固定されているケースはまだいいのですが、中心部にいるキャラが固定されている場合などは、スクロールされて移動するはずのソイツがそこに留まることにより脳が混乱するようで、なんかオウェッってなります。

背景設定なしのCSS

h2やh3などの大きなくくりで背景設定し、同じページ内の他のh3には背景画像を表示したくない場合などに使用するCSSには『background: none;』、『background : url(none);』、『background : url();』の3種類(background-imageを含めると6種類)の記述方法があります。

CSSの文法的にはどれも間違いではありませんが、記述方法によりサーバーログにエラーが出たり不要なリクエストが発生するようです。SE修行ログさんの「CSSの背景設定background:none;の正しい書き方」で詳しく解説されています。

背景固定とは関係ありませんが、 愛知県のホームページ制作会社アイビーネットさんのサイトは背景や画像、Flashが上手く利用されています。

背景がストレスにならない程度に良い感じに動いてるし、リキッドレイアウト(ウィンドウ幅によってWeb制作実績が移動したり)になっており、少し重いですがかなり試行錯誤を繰り返して作られたサイトのように思えます。ホームページ制作実績を見てもセンスの良いサイトが多い気がします。

ブラウザの戻るで戻らせないページ

ブラウザの戻るボタンをクリックしても戻らないページにも違和感を感じます。

そういったページの場合は、戻るボタン・back spaceの連打や履歴から戻ると思いますが、二重送信対策を除き戻らせない大きな理由があるのでしょうか?

ユーザーを留まらせておくことが目的ならばそれは逆効果で、リピーター率を下げる結果にしかならないでしょう。

< comments >
  1. background: url(none);が間違いだと思います。
    正しくはbackground: none;ではないでしょうか?

    過去にbackground: url(none);でログにエラーが多発したこともあったような…?

    コメント by kyompi 2009/1/29 11:56:09

  2. >kyompiさん

    コメントありがとうございます。

    >background: url(none);が間違いだと思います。

    えっマジっすか?
    確かにググって見るとbackground: url(none);が間違いとの記事もありますね。
    どっちなんでしょう。

    コメント by パシフィカス 2009/1/29 12:12:32

  3. background: url();
    と、空白にしてました。論外でしたね・・

    >ブラウザの戻るで戻らせないページ
    重たいFlashの次にストレスな仕様です。何のつもりなのか・・
    連打したら戻りすぎるし。

    >なんかオウェッってなります。
    宮川大輔みたいっすね。

    コメント by シロウト 2009/1/29 17:30:06

  4. >background: url();
    そんな方法もあるんですね。CSSは色々な記述方法があるので混乱します。

    個人的にはオウェッというと宮川大輔よりもウドちゃんって感じです。
    ってどうでもいいっすね。

    コメント by パシフィカス 2009/1/29 17:43:35

  5. こんにちは。拙ブログの記事をご紹介いただきありがとうございます…
    というか不正確な情報を流してしまい、大変申し訳ありません!

    ちゃんと検証してみましたところ、
    backgroudn: none;
    が正しい、ということが確認できました。逆でした…。
    どうも本当にすみませんでした。
    CSSの背景設定background:none;の正しい書き方

    コメント by dacelo 2009/1/30 10:50:52

  6. >daceloさん

    こんにちは、わざわざコメント頂きありがとうございます。
    改めて検証頂いただいたようで逆に恐縮です。

    当方の記事も修正いたしました。
    今後ともよろしくお願いします。

    コメント by パシフィカス 2009/1/30 11:12:47

  7. >>なんかオウェッってなります
    すごいわかります。

    ほんと些細なことですが・・・

    ウェブマスター自体はなれてしまうから気付かないのかもしれませんね・

    コメント by iPhoner 2009/1/31 16:25:10

  8. >iPhonerさん

    個人々々受ける印象も違うでしょうから、しょうがない部分でもあるのでしょうね。

    コメント by パシフィカス 2009/2/1 0:43:26

  9. こんにちは、アクセス解析から来ました。
    気に入っていただいたようで、ありがとうございます。
    こんなに褒めていただくと…、ムズムズしますねw。

    >なんかオウェッってなります。
    なるほど、そんな風に感じてしまうのですね。
    今まで使ったことはありませんが、参考にさせていただきます。

    コメント by アイビー 2009/2/3 15:12:03

  10. >アイビーさん

    こんにちは、ご訪問ありがとうございます。
    dlタグの件の時にも申し上げたと思いますが、個人的にかなり好きです^^

    コメント by パシフィカス 2009/2/3 16:23:03

コメント RSS

現在コメントフォームは利用できません。

(C) 2010 パシのSEOブログ. All Rights Reserved. | 運営サイト | SEO対策実施サイト