リンクのクリック範囲を広げる:CSS小技

ブログが作りたい!CSSの小技 > リンクのクリック範囲を広げる:CSS小技

リンクのクリック範囲を広げる:CSS小技

リンクのクリック範囲を広げる:CSS小技

CSSの小技(1)

ちょっとしたCSSの小技を、ご紹介していこうと思います。

さて、その記念すべき第一回目の CSS小技シリーズは、ナビゲーションメニューなどのリンクのクリック範囲を広げる方法です。

これ、けっこうクリックしやすくなるから好きなんすよね~。やり過ぎると、ちょっと鬱陶(うっとう)しいですけどね。


「リンクのクリック範囲を広げる」とは?

例えば、より一般的なテキストのリンクであれば、次のような形でリンクをクリックするのが通例です。

通常のリンクのクリック

対して、今回のCSS小技をほどこすと、次のようにリンクのクリック範囲は、通常より広がります。

クリック範囲が広がる

なかなかイメージもし難いと思います。サンプルを用意したので、良かったら実際にサンプルをさわってみてください。


リンクのクリック範囲を広げるメリット

1:カーソルの移動距離が短くなりやすい・・・メリット(1)

リンクのクリック範囲を広げると、マウスのカーソルを移動させる距離が短くて済む場合が多いように思います。

マウスのカーソルを移動させる距離が長いと、ちょっとしんどいですよね。

カーソルを移動させる距離が長い

しかし、距離が短いと、閲覧者は楽になります。

カーソルを移動させる距離が短い

こういうちょっとした積み重ねによって、閲覧者は、そのブログを見やすいと感じてくれます。ブログに対する印象も良くなります。

2:クリックがしやすい・・・メリット(2)

また、クリックできる領域が広がるので、閲覧者はクリックしやすくなります。

クリックしやすくなる

必ずしも、閲覧者はパソコンやネットに慣れている人ばかりではありませんから、操作が容易であることは、重要な意味をもちます。


リンクのクリック範囲を広げる方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、インライン要素の<a>タグを、「display: block;」でブロックレベルにしていることです。

これによって、リンク領域が四角いボックスになります。

「a:hover」は、マウスのカーソルをのせたときに、背景色と文字色を変更しているだけです。

また、背景画像を利用するなど、いろいろと応用することで、さらにおもしろい効果を与えることができそうです。

3:CSSハック付

IE6以前のブラウザでは、期待する効果が得られない場合があります。「zoom: 1;」を付け加えることで、改善されるはずです。

次の記事へ
次の記事へ

次回予告

次回は、画像の上にマウスのカーソルをのせたときに、透明度を変化させる CSSの小技をご紹介します。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/04/12 更新日:2009/04/27

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

CSSの小技シリーズ始まりましたね!
実は私、スタイルシート苦手でしてCSS辞典で調べながらでないと
できません((+_+))
しかも最近それ系の作業をしていないので、もう忘れてしまいました。
この小技シリーズ楽しみにしていますよ~
※リンクのクリック範囲を広げる方法以下の文字が小さくなっていますが私だけ?IE使っているから?(汗

CSS小技

fuminchuさん、こんばんは!(・∀・)/
コメントありがとうございます。


春風亭小技シリーズ、ようやくはじめました~。ヽ(´ー`)ノ
思いのほか Jimdoでもっさりしてしまいました・・・。

しかし、fuminchuさんは、何でもできちゃう人よねー。
Linuxも詳しいし、ルータ回りも詳しいし。

いやはや。


あ、ご指摘ありがとうございます。
助かりました。ヾ(*´∀`*)ノ

コードだからかと思っていたら、
書き損じていました。(´Д`;)てへっ

それでは、またー。(*´∀`)人(´∀`*)

No title

CSS情報嬉しいです♪ありがとうございます。ウキウキしながら読み、出囃子の音が聞こえてきそうです(・v・)しかも「リンク範囲を広げる」って、実用的でいいですね~~~。挑戦します。あ~~アクセス数が欲しいなぁぁと思ってる前にまずはこういう勉強して、見てる人にも優しいサイト作りを目指したいです。

CSS小技

bills nagaoさん、こんにちは!(・∀・)/
コメントありがとうございます。


はい。できるだけ実用的なCSSの小技を、
ご紹介していこうと思っております。(´▽`)♪


あ~、そうですねー。(´Д`;)
つい私も目先のアクセス数にとらわれてしまいます。

気を付けたいッス。

thankyou

類似記事を掲載しているサイトは多いですが、ここが一番無駄なくてシンプルで、スーっとわかりやすかったです!

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/475-3e951bfe
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて