CSSの疑似クラスを使ってテキストリンクに色々と装飾してみましょう

テキストリンクにマウスを乗せたりクリックしたりすると、テキストの色が変わったり、アンダーラインが消えたりとアクションがあるとサイトを利用するユーザーは解りやすくて親切に感じるものです。
疑似クラスを使ってテキストリンクを装飾してみましょう。

マウスを乗せた時にCSSを適用する

CSSを記述する外部ファイルを作成します。
このファイルを読み込む事で、ページにCSSが反映します。

テキストリンクにマウスを乗せた時にスタイルを変化させるのは「hover」という疑似クラスを使用します。

※疑似クラス・・・CSSに付け加えてデザインの適用方法を増やすことができるもの。

マウスを乗せたら色を変える

テキストリンクにマウスを乗せた時に色を変えてみましょう。

HTML

CSS

「:hover」を付ける事で「マウスを乗せた時に」という意味になり、「color: #ff0000;」で色を赤に変えるという意味になります。

アンダーラインを消す

テキストリンクを貼るとデフォルトでアンダーラインが付きます。
マウスを乗せるとボーダーが消える様に設定してみましょう。

HTML

CSS

「:hover」を付ける事で「マウスを乗せた時に」という意味になり、「text-decoration」で「テキストの装飾は」、「none(無し)」という意味になります。

マウスを乗せた時だけアンダーラインを表示する

通常はボーダーを消し、マウスを乗せた時だけボーダーを表示してみましょう。

HTML

CSS

最初に「a」に付く「text-decoration: none;」でアンダーラインを消して、マウスを乗せた時に「text-decoration: underline;」でアンダーラインを表示する様にしてみました。

マウスを乗せた時にアンダーラインを点線にする

アンダーラインはデフォルトで一本線なのですが、マウスを乗せた時に点線に変えてみましょう。

HTML

CSS

最初に「text-decoration: none;」でボーダーを消して、マウスを乗せた時に「text-decoration: underline dotted;」でアンダーラインを点線表示(dotted )する様にしてみました。

未訪問(クリック前)のリンクの色を変更する

HTML

CSS

リンク前の色を青色(color: #0000FF;)に変えてみました。
大体はサイト全体のリンクカラーは統一する事が多いと思いますので、「:link」を使う機会は少ないかもしれません。

訪問済み(クリック済み)のリンクの色を変更する

一度クリックしたテキストリンクの色を変える事で、ユーザーがどのリンクをクリックしたか解りやすくなります。
疑似クラス「:visited」を使って訪問済みリンクを設定しましょう。

HTML

CSS

最初の見た目では解りませんが、一度クリックした後に再度見てみるとテキストリンクが赤色になっています。

リンクを押し始めて離す間までリンク色を変更する

リンクを押した時だけ変更をするには疑似クラス「:active」を使用します。

HTML

CSS

クリックを押してる間だけで赤色になる様に設定しました。

まとめ

リンクの疑似クラスは必須ではありませんが、ユーザーがサイトを利用する際に使いやすい様に、マウスを乗せた時など見た目で解る仕組みがあると親切なサイトになりますね。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!