これでできる! クロスブラウザJavaScript入門

第20回 JavaScriptによるスタイルの操作

この記事を読むのに必要な時間:およそ 3 分

オーバーレイの表示

続いて,前面に表示した要素以外を半透明化させてみましょう。まずは,画面を覆う方法を考えます。これもIE 6以外ならCSSだけで簡単に実現できます。

HTMLの骨組み

<div class="outer">
  <div class="background_inner">
  </div>
  <div class="content">
  </div>
</div>

まず入れ物となるdivを用意し,その中に背景用のdivとコンテンツ用のdivを用意します。背景用のdivを用意するのは,このdivをopacity(IEではfilter)によって半透明にするためです。なお,IE 6~8以外ではbackgroundに対してrgba形式の色指定で半透明指定ができるので,余計なdivを作らずに半透明な背景を実現できます。

divに対して,position:fixedとtop・left・bottom・rightそれぞれに0pxを指定します。これにより,画面全体を覆うことができます。

CSSで画面を覆う(IE 6非対応)

.outer{
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
}
.background_inner{
  background:#000;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  opacity:0.6;
  filter:alpha(opacity=60);
}
.content{
  position:relative;
}

さて,IE 6はposition:fixedの問題に加えて,top・left・bottom・rightに0pxを指定しても高さが100%にならないという問題もあります。また,filterという重い処理も入るため,スクロール時のちらつきが大きくなってしまいます。そのため,単純にonscrollで位置を調整する方法では次のとおり今ひとつな状態になっていまいます。

オーバーレイをスクロールで配置

button.onclick = function(){
  document.body.appendChild(div); // body直下に移動
  div.style.display = 'block';
};
div.onclick = function(){
  div.style.display = 'none';
};
if (!window.XMLHttpRequest && window.ActiveXObject){
  div.style.position = 'absolute';
  var root = document.documentElement;
  window.attachEvent('onscroll', function(evt){
    div.style.top = root.scrollTop + 'px';
    div.style.height = root.clientHeight + 'px';
  });
}

そこで,画面全体を半透明のレイヤーで覆ってしまい,コンテンツ部分だけをスクロールに合わせて移動するようにしてみます。半透明のレイヤーがページ全体の高さになるので,ページによっては重くなってしまう点に注意が必要です。

オーバーレイを全画面に配置

button.onclick = function(){
 document.body.appendChild(div);
 if (ie6) { // IE 6のとき,画面全体の高さに
   div.style.height = root.scrollHeight + 'px';
 }
 div.style.display = 'block';
};
div.onclick = function(){
 div.style.display = 'none';
};
var ie6 = false;
if (!window.XMLHttpRequest && window.ActiveXObject){
 ie6 = true;
 div.style.position = 'absolute';
 var root = document.documentElement;
 var content = div.children[1];
 window.attachEvent('onscroll', function(evt){
   // contentだけをスクロールに追従
   content.style.top = root.scrollTop + 'px';
 });
}

もしくは,expressionを使ってtop・left・width・heightをすべて指定する方法も有効です。こちらはほかのブラウザでのposition:fixed相当になるというメリットがあります(前述の方法はIE 6だけ要素の位置関係が変わってしまうので,別の問題が発生するリスクが高くなります⁠⁠。

expressionによるposition:fixedのエミュレート

.IE6POSITION_FIXED2{
  behavior:expression(
    this.style.top = document.documentElement.scrollTop,
    this.style.left = document.documentElement.scrollLeft,
    this.style.width = document.documentElement.clientWidth,
    this.style.height = document.documentElement.clientHeight
  );
}

まとめ

今回は画面を覆う方法のIE 6対応を中心に扱いました。クロスブラウザらしい内容ではありますが,expressionはIE 8では廃止されていたりと,近い将来不要になると思われるテクニックでもあるのも事実です。

次回も引き続きCSSに絡んだJavaScriptのサンプルを見ていきたいと思います。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/