タグ: HTML

「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>
ひとまず、これでボックスの実装自体は完了です。スタイルシートだけで簡潔するので、導入のハードルはそこなで高くないと思います。サンプルを記載しておくのでご自由にご利用いただければと思います。

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


いままで、WEBページでグラデーションを表現したいときは、グラデーションの画像を作って、それをスタイルシートで背景画像に設定して、縦か横に繰り返し表示させるようなことをしていたんですが、画像の読み込みを行う分レスポンスは悪くなるし、スタイルとは別に画像を書き出さなきゃならないといった手間もあります。

しかし、HTML5と並ぶ次世代WEB標準規格であるCSS3から、グラデーションをはじめとした、今まで画像をつくら名ければ表現できなかったスタイルを実装できるようになりました。

ですが、そうは言っても新しい技術を習得するのは大変ですし、各種ブラウザに対応させようと考えるととても労力がかかります。しかし心配は要りません。この『Grad3』ならね。

グラデショーンボタン生成ツール:Grad3
grad3

 使い方は簡単

  • Prefixで適用したいブラウザを選ぶ
  • グラデーションのカラーやパターンを編集する
  • お好みでフォントや角アール、アイコンのスタイルを編集
  • スタイルシートが自動的にセットされるので、それをコピーして、自分のサイトのCSSにペーストする。

ボタンを作るうえで必要な要素はすべて満たしており、ものの数分でボタンを一つ作れてしまうので、大変お勧めです。

 ただし、IE8以前のブラウザだとそもそもレンダリングしてくれない可能性が高いので、使いどころや代替のスタイルは考えておいたほうが良いでしょう。

今回紹介したGrad3や以前に紹介した、簡単・便利なWEB制作ツールをこれからも紹介していきたいと思います。