ロールオーバー風のリンクボタンをスタイルシートで作ろう　～<a>タグ編～

ロールオーバー風のリンクボタンをＣＳＳで作ろう　～<a>タグ編～

　普通のリンクタグからロールオーバー風のボタンを作るには、リンクにスタイルを設定しようのページで登場した擬似セレクタを使うのが簡単で手軽です。

スタイルシート適用前　BEFORE

　<a>タグは前後に改行が入らないインラインレベル要素なので、デフォルトでは横１行に並びます。なお、これを縦に並べるには、ブロックレベル要素に変換した上で、ＣＳＳのフロート設定をかける必要があります。

＜ＨＴＭＬソースの記述例＞

　このようにリンクをいくつも列挙する場合は、リンクタグ編その１やその２のようにリストタグを使用した方がＨＴＭＬの文書構造がはっきりして良いですが、本サンプルでは理解のためにあえてリンクタグだけを並べています。

スタイルシート適用後 AFTER

＜ＨＴＭＬソースの記述例＞

　リンクタグを<DIV>で囲み、クラスを設定してスタイルを適用します。

＜スタイルシートの記述例＞

　ボタンのような幅をもった領域を作るために、パディング（余白）を左右に広めに設定しています。