・・・ふざけているつもりはないのですが、なんとなく今回はこのタイトルで行こうと思いました。（汗）

Webデザインにおける「background-attachment: fixed;」の活用法のご紹介です。結構いろいろなサイトで使われていて、個人的にはとても面白いアイデアだなと思っています。

まずは、テストサイトをご覧下さい。

スタイルシートのbodyに背景固定の記述をしてこのレイアウトを実現しています。（記述はここだけ。）
以下、CSSのソースです。

body {
	background: #CCF2FA url('img/middle-background.jpg') repeat-x left top;
	background-attachment: fixed;
}

中のコンテンツはマウス動作により、スクロールされます。この際、背景はスクロールに付随しません。ここが肝となります。この手のレイアウトは当然背景画像の見せ方が重要になってくると考えます。「ブラウザをキャンバスと見立てて、一枚の絵として配置しユーザーに見ていただく。」という感じでしょうか。私も出来る限り綺麗なレイアウトをお見せ出来るよう頑張ってみましたが、なかなか難しいですね。。。！ちなみに下まで、スクロールしていくと、、、コンテンツが上に行くため、下からまた背景画像が見えてくるのがなかなか「おつ」ではないでしょうか。（コンテンツ下にその為のマージンを指定しています。）

問題点として

• 大きな画像を使用する為、最初の背景画像の読み込みが重い（遅い）
• 流動的なスクロールに慣れているユーザーは、違和感を感じる可能性がある

等があります。
この辺りの問題点を自分なりに整理して、いかにユーザーに配慮されたレイアウトなり仕組みが構築されているかが鍵になりそうです。

独特の仕様な為万人向けとはいえませんが、デザインのスパイスとして、パターンのひとつとして、組み込んでみるのもWebデザインの楽しさのひとつではないでしょうか。又、企業サイト等での実装は難しいでしょうが、ブログでの実装はレイアウトパターンのひとつとしてありだと思っています。

又、テストサイトでは、background-attachment: fixed;を使用する際にあわせて使ったら面白いのではと思ったものを実装しています。それを以下に記述します。

1.styleswitcherによる、背景画像の切り替え（スタイルシート）

■以下、設定する為のHTMLのソースです。（headに記述する）

<link rel="stylesheet" type="text/css"   href="default.css"  title="" media="all"/>
<link rel="alternate stylesheet" type="text/css"  href="af.css" title="alternate1" media="all"/>
<link rel="alternate stylesheet" type="text/css"  href="n1.css" title="alternate2" media="all"/>
<link rel="alternate stylesheet" type="text/css"  href="n2.css" title="alternate3" media="all"/>
<script type="text/javascript" src="styleswitcher.js"></script>

<link rel=”stylesheet” type=”text/css”   href=”default.css”  title=”" media=”all”/>
で、初期に表示するCSSを記述します。

<link rel=”alternate stylesheet” type=”text/css”  href=”af.css” title=”alternate1″ media=”all”/>
<link rel=”alternate stylesheet” type=”text/css”  href=”n1.css” title=”alternate2″ media=”all”/>
<link rel=”alternate stylesheet” type=”text/css”  href=”n2.css” title=”alternate3″ media=”all”/>
で、クリックによって切り替えるCSSのパス等を記述します。

<script type=”text/javascript” src=”styleswitcher.js”></script>
で、styleswitcher.jsを読み込む為の記述をします。

■以下、css切り替えのjavascript実行部分のHTMLソースです。（body内に記述する）

<div id="styleSwitch">
  <h2>change your color!</h2>
    <ul>
       <li><a href="#" onclick="setActiveStyleSheet(''); return false;">css1</a></li>
       <li><a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">css2</a></li>
       <li><a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">css3</a></li>
       <li><a href="#" onclick="setActiveStyleSheet('alternate3'); return false;">css4</a></li>
     </ul>
</div>

※動作させる為には上記のlink rel=”alternate stylesheet”のtitle=”alternate1″と、onclick=”setActiveStyleSheet(’alternate1′);の「alternate1」というところの名前を一致させる必要があります。alternate2、3も同様に・・・！

いつも同じ背景だと飽きる可能性がある為、背景と色合いを変えたりする仕組みを組み込んでみました。
styleswitcherさまさまですね！

2.コンテンツのカラムの背景を透過に設定（bodyの背景がすけて見えるように）

以下、CSSのソースです。

#contents #main {
	background:  #fff;
	color: #111;
	filter:alpha(opacity=80);
	opacity :0.80;
}

実装してみた感想として、やはり少し文字が見づらいというのが正直な感想です。見えない事はないのですが、背景の色使いが複雑になればなるほど、半透明にするのは難しくなりそうです。その場合は、もう少し透明の度合いを下げるか、設定自体を外す事も考慮した方が良いかもしれません。

まとめ
問題点もありますが、アイデア次第でいろいろなパターンが生み出される可能性を秘めたbackground-attachment: fixed;に今年の夏は注目です！え？冬はどうするんだって？うーん・・・雪山の写真を撮りに行って来ます、はい！

以上、[CSS]夏だ！海だ！さわやかなデザインを実現するbackground-attachment: fixed;！のご紹介記事でした！

こちらもあわせてどうぞ！

• tablesorterを使ってテーブルのソートを可能にする
• [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！
• [jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
• スムーズなアコーディオンメニュー！
• [jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！