オリジナルテンプレートへの道のり

今回を合わせ、七回にわたり様々なCSSの基本テクニックをレクチャーしてきたこの講座ですが、残念ながら今回が最終回となります。人気ブログ「動画の桜」の運営者エロ流さんに、今までの感謝の気持ちとお礼を是非ブログに残してください。※アダルトジャンルのブログのため、18歳未満の方はご遠慮ください。

これまでの七回の講座で学んだことは基本として大変役に立つ情報ですので、これからも是非ご活用ください。

【今回のお題】 前回は文字スタイルの設定に関しての講座でしたが、最終回の今回はWebサイトならではのもの、リンクに関しての設定方法から始めて参ります。

リンクのスタイルの設定

デザインによってリンクの色も変えたい時は、CSSの「a」要素を変更します。リンクの設定は、共通項目を指定する「a」要素以外に、 「link」「visited」「hover」「active」と、四つのセレクタがあります。
a { } ・・・ 共通のリンクスタイル指定
a:link { } ・・・ 未訪問リンクのスタイル指定
a:visited { } ・・・ 訪問済みリンクのスタイル指定
a:hover { } ・・・ リンクをマウスオーバーした時のスタイル指定
a:active { } ・・・ リンクをクリックした瞬間のスタイル指定

基本的なリンクスタイルの指定は以下の通りです。

CSSファイル -----------------------------------------
a {
font-size: 12px; /* リンク文字のサイズの指定 *//
color: #000000; /* リンク文字の色の指定 */
font-weight: bold; /* リンク文字の太さの指定 */
background-color: #CCCCCC; /* リンク文字の背景色の指定 */
text-decoration: none; /* リンク文字の下線を消す */
text-decoration: underline; /* リンク文字の下線を表示する */
}
-------------------------------------------------------
マウスオーバーをした時にリンクを変化させる

マウスオーバーさせた時にリンクテキストが変化するように、色々とスタイル指定してみましょう。

●マウスオーバーした時にリンク色を赤色にする。

CSSファイル -----------------------------------------
a:hover {
color: #CC0000;
}
-------------------------------------------------------

●マウスオーバーした時にリンクの背景色を黄色にする。

CSSファイル -----------------------------------------
a:hover {
background-color: #FFCC00;
}
-------------------------------------------------------

●マウスオーバーした時にリンクの下線を消す。

CSSファイル -----------------------------------------
a:hover {
text-decoration: none;
}
-------------------------------------------------------
マウスオーバーした時だけリンクを凹ませる

リンク箇所にマウスオーバーさせた時に、以下のサンプルのように凹ませるテクニックです。これは文字だけでなく画像にも有効です。

[ サンプル ]
http://6.dtiblog.com/h/haruism/file/linkmove.html

CSSファイル -----------------------------------------
a:hover {
position : relative;
top : 1px;
left : 1px;
}
-------------------------------------------------------

「top」「left」と数値(px)を大きくすると、凹む幅も大きくなります。

[ リンクのスタイルに関する参考サイト ]
http://www.pw-design.jp/recipe/10/recipe10-1.html

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー