タグ: CSS

「WEBディレクターの~」なんて副題を付けておきながら、ガジェット関連の記事ばっかりになっていたので、ここらでちょっとWEB制作関連も書いておきます。

最近とみに増えてきた固定メニューですが、中でもTOPへのアンカーリンクボタンや、Twitterボタン、FacaBookボタンなどのアイコンが一まとまりになったボタンをよく目にします。固定オブジェクトは便利ですが、あまり多用してあちこちに散りばめられるのは見栄えも悪いし何とかしたいと考えていたので、このブログでも取り入れてみました。

icon_ggt
といっても特に目新しいことはしておらず、スタイルシートで固定の枠を作り、その上に各々のアイコンボタンを乗せているというシンプルな仕様です。まずは固定の枠のスタイルを作っていきます。

.icon_box_bk{
         background:#f5f5f5;
           border:1px solid #CCC;
         border-radius: 6px;
         width:50px;
         height:300px
         -webkit-box-shadow: 0 5px 10px #aaa;
         -moz-box-shadow: 0 5px 10px #aaa;
          box-shadow: 0 5px 10px #aaa;;
         position: fixed;
         top:200px;
         right: 20px;
}
背景色を薄い灰色にして、角に丸みを帯びさせたボックスを作成し、ブラウザの上辺から200px、右辺から20pxの位置に固定しています。

次に、ボタンのスタイルを作成していきます。
.icon_box{
          border-bottom:1px solid #CCC;
}
.icon_box a{
          display:block;
          padding:11px 9px;
          height:30px;
          vartical-align:middle;
          text-decoration:none;
          color:#333;
          filter: alpha(style=0; opacity=75);
          -moz-opacity: 0.75;
          opacity: 0.75;
}
.icon_box a:hover{
          filter: alpha(style=0; opacity=100);
          -moz-opacity: 1.00;
          opacity: 1.00;
}
一つのアイコンのクリック領域を縦50×横50ピクセルくらいに想定して、パッディングでアイコン位置を調整しています。ここのスタイルシートの記述はあまり美しくないので、参考にならないかもしれません。
オンマウス(hover)時にクリッカブルであることを目立たせるために、filter、-moz-opacity、opacityという透過のプロパティを使って通常時は75%の不透明度(変な表現ですが)で表示し、オンマウス時に100%にしています。
因みにfilterがIE向けのプロパティで、-moz-opacityがMozzila向け、opacityがOpera・Safari向けのプロパティの記述です。数値が小さくなればなるほど背景を透過します。

あとは、HTMLに記述を行います。
<div class="icon_box_bk">
  <div class="icon_box">
    <a href="#top">
     <img src="http://degi.doorblog.jp/img/up_arrow.png" border="0" />
    </a>
  </div>
  <div class="icon_box">
    <a href="https://twitter.com/dgfctn" target="_blank">
     <img src="http://degi.doorblog.jp/img/tw.png" border="0" />
    </a>
  </div>
  <div class="icon_box">
    <a href="http://www.facebook.com/dgfctn" target="_blank">
     <img src="http://degi.doorblog.jp/img/fb.png" border="0" />
    </a>
  </div>
 <div class="icon_box_btm">
    <a href="http://degi.doorblog.jp/atom.xml" target="_blank">
     <img src="http://degi.doorblog.jp/img/rss_feed.png" border="0" />
    </a>
  </div>
</div>
ひとまず、これでボックスの実装自体は完了です。スタイルシートだけで簡潔するので、導入のハードルはそこなで高くないと思います。サンプルを記載しておくのでご自由にご利用いただければと思います。

アイコンボックスサンプルページ


4

このブログでも紹介し、実装までしている、ウインドウの上辺までスクロールすると上にぴったり固定するJavaScriptですが、これはスクロール位置のイベントを取得して、上辺まで達したらスタイルシートのプロパティ「position」を「fixed」に切り替えるというものですが、この「fixed」を使う際に、オブジェクトの重なり順を注意を払う必要があります。


「static」「relative」「absolute」との関係

「position」プロパティには「fixed」以外に「static」「relative」「absolute」が存在します。ざっくりと説明すると、
static ・・・ 配置について特に何も指定しないデフォルトの状態。特段記述の必要もありません。
relative ・・・ 相対位置の指定。staticが指定されている場合にはそれが基準位置となります。
absolute ・・・ 絶対位置の指定。staticが指定されている場合にはそれが基準位置となります。
fixed ・・・ 位置の固定。
といった感じですが、「static」以外の「relative」「absolute」が指定されている場合には、「fixed」より重なり順が上に位置するので、おかしな表示になってしまう場合があります。
デモページ

ではこのときの対処方法ですが、これは非常に簡単で、「fixed」を指定しているクラスに、以下の一行を追加してください。

z-index:1;


このプロパティは、X軸が横、Y軸が縦だとすると、Z軸は高さ(重なり)になり、Z軸の表示順を指定するものになります。ここで1を指定しておれば、どのポジションとの関係でも表示が一番上にくるという寸法です。

FlashやYouTubeの埋め込みとの関係

z-indexを指定してあっても、どうしても上にかぶさってくるものがあります。それがFlashやYouTubeの埋め込みです。これについても一応の解決方法は存在します。埋め込みオブジェクトの「pram」要素の「wmode」でvalue値を「transparent」にしてすることで前面に出てくるFlashを制御することが出来ます。実装方法は以下の通り
Flashの埋め込みの場合
<!-- object要素内に下記を追加 -->
<param name="wmode" value="transparent" />
<!-- embed要素に下記の属性を追加 -->
wmode="transparent"
YouTubeの埋め込みの場合
<iframe width="560" height="315" src="http://www.youtube.com/embed/oktizKuWbdc" frameborder="0" allowfullscreen></iframe> 動画のパスにパラメータを付与する。

<iframe width="560" height="315" src="http://www.youtube.com/embed/oktizKuWbdc?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
動画をたくさん掲載するサイトなどでは一々設定していくのは非常に面倒ですが、そのためにJQueryを使って自動的にパラメータを付与することも可能なようです。以下のサイトがわかりやすく解説しているので、ご紹介します。
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する

このブログでも、重なり順についておかしいところがかなりあったので、ちゃんと手を入れてみました。最近のトレンドとして、グローバルメニューの位置を固定するUIが目立ってきていますので、もしそういうUIを実装したいと考えているなら、これだけはやっておいたほうがいいと思いますよ。