リンクの表示・装飾 (HTML,CSS,JavaScript)(2ページ目)

リンクの下線を装飾してみましょう。破線・点線・二重線に変えてみたり、色を変えてみたり、また、文字と下線との間隔を広げることもできます。非常に簡単ですので、ぜひお試しを。

HTML＋CSSで「1行全体」をクリック可能なリンクにしたり、テーブルの枠線内で「1つのセル全体」を余白も含めてクリック可能なリンクにしたりする方法を解説。HTMLのa要素で作るリンクを、CSSでブロック化した上で空白量を調整する簡単な記述で作れます。文字(リンクテキスト)だけでなく余白も含めた広い範囲をクリック可能にする、押しやすいリンクの作り方をご紹介。

隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。

スタイルシートを用いて、リンク文字の上にマウスが乗ったときに、リンクの文字色を動的に変化させている方々も多いと思います。同じことを画像で行おうとしたとき、どうされるでしょうか？ JavaScriptを使いますか？実は、画像自身に工夫をするだけで、テキストリンクと同様の効果を画像リンクにも出すことができるのです。今回は、その方法をご紹介いたしましょう。