「WEBディレクターの~」なんて副題を付けておきながら、ガジェット関連の記事ばっかりになっていたので、ここらでちょっとWEB制作関連も書いておきます。
最近とみに増えてきた固定メニューですが、中でもTOPへのアンカーリンクボタンや、Twitterボタン、FacaBookボタンなどのアイコンが一まとまりになったボタンをよく目にします。固定オブジェクトは便利ですが、あまり多用してあちこちに散りばめられるのは見栄えも悪いし何とかしたいと考えていたので、このブログでも取り入れてみました。
といっても特に目新しいことはしておらず、スタイルシートで固定の枠を作り、その上に各々のアイコンボタンを乗せているというシンプルな仕様です。まずは固定の枠のスタイルを作っていきます。
.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の位置に固定しています。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;
}
次に、ボタンのスタイルを作成していきます。
.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ピクセルくらいに想定して、パッディングでアイコン位置を調整しています。ここのスタイルシートの記述はあまり美しくないので、参考にならないかもしれません。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;
}
オンマウス(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>
ひとまず、これでボックスの実装自体は完了です。スタイルシートだけで簡潔するので、導入のハードルはそこなで高くないと思います。サンプルを記載しておくのでご自由にご利用いただければと思います。<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>
アイコンボックスサンプルページ