CSSで作成する画像のリンク表現：css Tips1

前回は、ページ上部にナビの固定配置：fixedにつきまして記載いたしました。

コレ！最近はユーサビリティーの観点から、比較的実装しているサイトも多いことと思います。

また、jQueryを使用してヘッダー要素をfixedにしているサイトも良くみかけますが、
SEOを考慮いたしますと、CSSのみでのコーディングするほうがシンプルに実装できることと思います。

前回までは、CSSの基本とCSSの実践編として記事を記載してきましたが、
今回よりこの基本編と実践編の内容を応用して、実際の制作現場で使用するTipsを紹介いたします。

実際にCSSのテンプレートとしてコードを記載していきますので、
ページ作成の際、少しでもお役にたてればと思います。

また、実際に私もすべてCSSのコードを覚えているわけではございませんので、
ページ作成初心者の方もテンプレートなどを探す習慣を身につてて頂ければ、
ページ作成に役立つことと思います…。

それでは今回はッ…、

上記について記載していこうと思います…。

CSSで作成する画像のリンク

Web上のリンクはテキストに限らず、画像にリンクが張られていることも多々ございます。
ロールオーバーなどの、画像がリンク箇所であることを視覚的に表現できれば、
よりユーザーに優しいページといえるでしょう。

今回は画像がリンクであることをCSSで視覚的に表現する方法をテンプレートとコードを
交えながらご紹介いたします…。

下記が今回ご紹介のCSSのサンプル完成形！

ロールオーバーとは

ロールオーバーとは、画像の上にカーソルを合わせた際に画像が切り替わったりする動作になります。

画像がボタンのような意味を持ち、リンク箇所であることを視覚的に表現する意味として使用されることが多くなります。
ただし、リンクを示す表現としては、ロールオーバー以外に、枠線を表示したり、画像を半透明にするといった、さまざまな方法がございます。

:hover疑似クラスの利用

疑似クラスとは以前もご説明いたしましたとおり、ユーザーが指定したセレクタに対して行った操作に応じて、
指定したプロパティを適用させることを可能とするCSSの記述方法です。

今回のサンプルテンプレートのコードで使用する:hoverは、該当要素にカーソルが合わされた状態を対象とする疑似クラスセレクタになります。

通常時のCSSの指定と、この:hover疑似クラスを指定した場合のふたつ記述することにより、
カーソルを合わせた際にCSSを変更することが可能になります。

CSSで画像を切り替えるロールオーバー

まず初めは、CSSのみで画像を切り替えてロールオーバーを表現する方法をご説明いたします。

一般的なJavaScriptでの実装と同じように、ロールオーバー前の画像とロールオーバー状態の画像を
それぞれ用意し、その画像を切り替えるようCSSを記載していきます。

また、テンプレートとして、CSSのコードも下記に記載していきます。

それでは、ロールオーバー前の画像とロールオーバー状態の画像をそれぞれ用意します。

ロールオーバーの対象となる箇所にa要素を指定し、これにdispiay:blockの指定をおこない、
backgroundプロパティでロールオーバー後の画像を背景として指定します。

a要素のheightとwidthは、画像の大きさに合わせておきます。

このa要素に包括される形でHTML側でロールオーバー前の画像をimg要素で配置します。

次に指定したCSSの記述をコピーし、コピーした記述のセレクタ末尾に:hoverを記述します。
そして、ここにtext-indentとoverflow:hidden;を指定します。

これにより、:hover時に、HTMLで指定したimg要素が非表示となり、a要素の背景として指定していた
画像が表示される仕組みになります。

text-indentの値が画像の横幅以上であれば、overflow:hidden;で非表示にすることが出来ます。

また、良くみかける方法としてtext-indent:-9999pxと指定して画面外に出す方法も良くみかけられますが、
仮に-9999pxで補えない大きなディスプレイで表示をするようなことがあれば、
もともと表示していたimg要素が画面上の-9999pxの位置に表示されることになってしまいます。

overflow:hidden;の指定をおこなえば、その問題を心配する必要が無くなります。

それでは、サンプルボタンと、CSSのテンプレートコードを記載してみます。

背景画像を切り替える方法の問題点

サンプルのCSSのように、単純に:hover時に背景画像のみを切り替える方法で実装することも可能です。

しかしこの方法では、マウスオーバー時に初めてロールオーバー画像を読み込むので、
通信や処理の速度によっては画像を読み込みが終っていない状態で表示されてしまい、
一瞬画像が表示されない為に、チラつく現象が起きてしまいます。

しかし、上記で紹介いたしましたように、あらかじめロールオーバー状態の画像を読み込んでおけば、
先に画像を読み込んでいる為、この現象を回避することが出来ます。

画像の枠線をハイライトしてリンクを分かり易く

画像のリンクは上記に記載したロールオーバーのように画像を切り替えるのが一般的になります。

しかし、リンク箇所であることを視覚的に表現することが目的と考えれば、
画像を入れ替える方法がすべてではありません。

そこで、今度は画像を切り替えるロールオーバー以外の画像がリンク箇所であることを
視覚的に表現する方法をCSSテンプレートとして記載してみます。

まずは、マウスオーバー時に画像の枠線の色を変更し、ハイライトさせる視覚表現を記載します。

仕組みはシンプルで簡単です。まず、リンクさせたい画像を囲うa要素を:hoverの対象とします。
サンプルテンプレートでは、クラス名をrolloverとして記載してみます。

a要素に包括されたimg要素に対して「padding:1px; border 1px solid #cccc」を指定します。

次にpaddingとborderを指定したCSSの記述をコピーして、コピーした記述のセレクタの末尾に
:hoverを記述します。

:hoverを指定したこの要素のborderにハイライト時の色#ff0000を指定します。

この方法のメリットは、ロールオーバー用の画像を用意しなくても済むことがあげられます。

実装も任意のクラスを付与するだけという、シンプルで簡単な方法で実装可能になります。

画像の透明度を下げてロールオーバーの表現

この方法は、画像のロールオーバー時に、画像の透明度を下げて、
ロールオーバー用の画像に切り替わったかのような表現方法で、
リンク箇所であることを視覚的に表現する、一般的に良く用いられる方法になります。

画像の透明度を下げることで背景の白が透けるため、少し明るくなったように見せることが出来ます。

CSS3のopacityを使用して、クラス名rolloverを指定したimg要素の透明度を
マウスオーバー時に変更する指定をおこなっています。

コチラの方法のメリットも、ロールオーバー用の画像を用意しなくても済むことがあげられます。

今回はッ、ほぼCSS2.1で作成できる実際の制作現場で使用するテクニックを
Tips的に紹介してみました…。

CSS、私も実際の制作便場でコーディングをおこなう際、
チョイチョイ忘れてしまうことも、多々ございます…。

初心者の方であれば、なおさらですが、
まずは、CSSでスタイルをデザインするにあたり実践的に覚えたいのであれば、
色々なCSSのスタイルを読み解くことも重要で、どんなCSSでも読み解くことが可能になれば、
実際にコードを記載する際に、仮に忘れていたとしましても、
検索すれば、すぐに思い出すことも可能です…。

という事で、習うより慣れろ！ですねッ…。

新しいスキルを身につける際、いつも自分に言い聞かせる言葉です…。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。