リンクをクリックすると、リンクがボタンのように下がる方法をお伝えします。
ホームページでは、リンクをクリックしてもらって、いろいろなページを見てもらうことが大切です。
たくさんのページを見てもらった方が、売上も上がりますし、検索エンジンの評価も高くなるからです。
そして、リンクをクリックしたときに、リンクがボタンのように下がると、「押し心地」が良くなるので、意外とおすすめな方法だと思いますよ。
個人的には、けっこう気に入っている方法なので、良かったら参考にしてくださいね。
■ リンクをクリックすると、リンクがボタンのように下がる方法の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
|
a:active { color:#aa0000; text-decoration:none; background-color:#ffcc99; position:relative; top:1px; left:1px; }
|
「a:active」という記述は、「リンクをクリックしたとき」の動作を示しています。
style.css ファイルに、上記のソースを入れることで、「マウスでリンクをクリックしたときに、リンクが下に下がる」という動きになります。
（上記のソースは、「a:hover」の下に入れるようにしてください）
それでは、下記のリンクをクリックして、リンクが下に移動することを
確認してみてくださいね。
リンクをクリックすると、リンクが少し、下に下がりますよね？
リンクが、ボタンのような押し心地になる、という技になります。
■ けっこう、厄介な技でもある・・
個人的には、この技（リンクをクリックすると、リンクがボタンのように下がる方法）は好きなのですが、、、この技を使うと、いろいろなところに、影響が出る可能性があるのですよね。
たとえば、「スライドショー」 がうまく動かなくなったり、「上に戻るボタン」がうまく動かなくなったり、などです。
リンク関係（ボタン関係）の個所に、影響が出てしまう可能性があるので、ちょっと注意が必要になります。
あと、この技（リンクをクリックすると、リンクがボタンのように下がる方法）は、Internet Explorer のブラウザだと、うまく動かないこともあります。
ブラウザによっても、ちょっと動作が異なるので、覚えておいてください。
（つまり、ちょっと扱いづらい技、ということです・・）
【よく読まれている関連記事】
