上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。


 ここまで理解したら、漸く一番楽しいリンクタグのスタイルシートを適応することが出来るようになります。
 リンクタグは、HTMLの中で唯一「動き」「アニメーション」が出来る部分です。

 マウスオーバーで、アンダーラインを消す。
 マウスオーバーで、背景色を変える。
 マウスオーバーで、文字を大きくする。
   :
   :
   :

 これで、静かなホームページやブログに、少しだけ変化を起こすことができます。
(下のサンプルは、サンプル用にスクリプトを使っています。スクリプトがオフだと反応しません…)


こんなリンクボタンがCSSのみで作れます!


任意の区画(ブロック要素等)のリンクのみ、ボタン風にしてみる


 前回の、「任意の場所にだけスタイルを適応する」方法で、任意の場所のリンクを「ボタン風」にしてみます。

 例えば、当サイトで紹介しているテンプレートの記事部分は「<div class="text_body"> ~記事本文~ </div>」と言うところに入っています。

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー</div>
<div id="main">
メイン
<div class="text_body">
記事部分
</div>
</div>
<div id="side">
サイドバー
</div>
<div id="header">
フッター</div>
</div>

 この中のリンクタグ(<a> ~ </a>)のみ、ボタン風にしてみるとすると…

.text_body a {
color:#fff;(文字色を白にした)
background:#00f;(背景色を青に指定)
border:1px outset #00f;(ボーダーを赤の「outset」に指定)
}

 このようになります。
 これをスタイルシートファイルに書き込んでいれば…

「記事中でハイパーリンクを使うと、そのリンクはすべてボタン風になる」
「サイドバーや、ヘッダー、フッターなどのリンクには何も起こらない」

…というわけです。


マウスオーバーした部分のスタイルが変わるようにする


 ここからが、スタイルシートのパワーの見せどころです。「リンク」の部分へマウスのカーソルを持ってくると、よく色が変わったりします。それの指定がここでできます。

 先程のスタイルに、以下を追加すると…

.text_body a {
color:#fff;(文字色を白にした)
background:#00f;(背景色を青に指定)
border:1px outset #00f;(ボーダーを赤の「outset」に指定)
}
.text_body a : hover {
color:#00f;(文字色を青に)
background:#ff0;(背景色を水色に指定)
border:1px inset #00f;(ボーダーを赤の「inset」に指定)
}


 マウスオーバーしたときに、リンクボタンが「 a : hover 」で指定したスタイルに切り替わるのです。(ページ一番上のサンプルボタン参照)


リンクのスタイルシート部分の記述の種類

 他にも、「行ったことがあるページのリンク色」、「ボタンをクリックした瞬間のリンク色」なども指定できます。

見たことがないページのリンクa : link { ~ }
見たことがあるページのリンクa : visited { ~ }
マウスオーバー時のリンクa : hover { ~ }
マウスクリック時のリンクa : active { ~ }

 これが、主要なリンク時のスタイルシートです。
 それぞれ、少しづつスタイルを変えていくことで、様々なリンクのデコレーションが出来るようになります。

■もっと深いリンクタグ遊びはコチラ。
マウスオーバーリンクボタンの研究・「ポチっ」

■次のページはコチラです。
スタイルシートでのデザイン(ボーダー編)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Sun.03.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。