ホーム お問合せはこちらから ページのトップへ戻る

新潟のホームページ制作会社・ワードプレスでウェブサイトを製作するドコドア
お問合せはこちらから お電話でのお問い合わせは0120-66-0209まで

SEOブログ

スタッフブログ

53 疑似クラス

2014.5.26

html53

疑似クラスとは?

疑似クラスは、要素の状態別に異なるスタイルを適用させたいときに使用するセエレクタです。疑似クラスは、リンクを表すa要素に対して使われることが多いです。ここでは、a要素と一緒に使用されるリンク疑似クラスユーザーアクション疑似クラスについて説明していきます。

リンク疑似クラス「:link」と「:visited」

    a要素は、

  • まだクリックされていない(未訪問)リンク
  • クリックされたことのある(訪問済み)リンク
  • という状態に分けられます。

リンク疑似クラスを使うとこの2つの状態を判別して、異なるスタイルを適用させることができます。例えば、未訪問リンクの色は緑にしておいて、訪問済みのリンクを黄色にする事も可能です。未訪問リンクに適用したいスタイルには、セレクタとして「:link」という疑似クラスをa要素に合わせて使用します。そして訪問済みリンクに適用させたいスタイルには、セレクタとして「:visited」というリンク疑似クラスをa要素に合わせて使用します。

    html53-1

プロパティと値を区切るときにも使用される「:」ですが、疑似クラスに使われる「:」には前後に半角スペースを入れてはいけないので、注意する必要があります。

実際にソースコードを書くと以下のようになります。未訪問リンクを緑に、訪問済みリンクを黄色にしています。

CSS
a:link { color : green; }
a:visited { color : gray; }

HTML
<ul>
<li> <a href=”●●●.html”>●●● </a></li>
<li> <a href=”△△△.html”>△△△ </a></li>
</ul>

これでHTMLファイルとCSSファイルを上書き保存してブラウザで表示するとスタイルが適用されています。

ユーザーアクション疑似クラス

リンクはマウスのカーソルの動作も判別する事ができます。判別される動作の種類は、

  • リンクにカーソルを重ねたとき
  • リンクを選択したとき
  • リンクをクリックしたとき

以上の3種類があります。ユーザーアクション疑似クラスを使用すると、この3つの状態を判別して、それぞれにスタイを適用させることができます。例えば、リンクにカーソルを重ねたときだけリンクに下線を表示したり、リンクをクリックしたときに色を変えたりする事ができます。カーソルを重ねたときに適用したいスタイルにはセレクタとして「:hover」というユーザーアクション疑似クラスをa要素に合わせて使用します。また、リンクを選択したときに適用したいスタイルには「:focus」を、リンクをクリックしたときに適用したいスタイルには「:active」をa要素に合わせて使用します。

    html53-2

疑似クラスを記述する順番

CSSでは後に記述したルールの方が、適用する際の優先順位が高くなります。なので、今回説明した疑似クラスを使用した設定を有効にするには、「a:link」「a:visited」「a:hover」「a:focus」「a:active」という順番でスタイルシートに記述する必要があります。

このページのまとめ

  • 疑似クラスは要素の状態別に異なるスタイルを適用させるときに使用するセレクタで、主にa要素に対してよく使われる。
  • a要素の状態には、未訪問リンクと訪問済みリンクがあり、リンク疑似クラスを使用するとそれぞれに異なるスタイルを適用できる。
  • ユーザーアクション疑似クラスを使用すると、「リンクにカーソルを重ねたとき」「リンクを選択したとき」「リンクをクリックしたとき」の3つの状態を判別して異なるスタイルを適用できる。
  • 疑似クラスは「a:link」「a:visited」「a:hover」「a:focus」「a:active」という順番でスタイルシートに記述する。
主にコーディング作業や納品後の更新作業を担当しています。デザイン業務もちょこちょこやってます。PHPやらJQueryの勉強中。
>清野哲郎のプロフィールを見る

お問合せメールフォーム

このページがあなたにとって役に立ったと感じたら下のボタンから共有をよろしくお願いします。

WORKS

制作事例一覧を見る
  • case72i
  • case89i
  • case107i
  • case108i
  • case88i
  • case98i
  • case109i
  • case106i
  • case104i
  • case103i
  • case102i
  • case100i
  • case99i
  • case96i
  • case105i
  • case86i
  • Ciel02
  • case22_1
  • toiro
  • case80i
  • case79i
  • case78i
  • case06-2i
  • case76i
  • case74i
  • case73i
  • case97i
  • スクリーンショット 2016-04-05 18.41.36
  • case90i
  • case82i
  • case87i
  • case71アイキャッチ
  • 国際大学
  • case84i
  • dejimo0
  • case65アイキャッチ
  • kirin_hanbai
  • case67アイキャッチ
  • case75i
  • flowerhome0
  • keiwa
  • greenstyle0
  • case57_1
  • case92i
  • case56_2
  • case54_2
  • case52_1
  • case51-1
  • case49-1
  • joywood0
  • koshiji0
  • case59_1
  • 上越どんぶり巡り様
  • yu
  • 無添加住宅
  • neal
  • hukuhuku1
  • sasa-t
  • shinoda
トップへ戻るボタン

WORKS

dejimo0 case79i neal
新潟のホームページ制作・Webデザイン製作のドコドア

本 社 新潟県三条市土場1-5 tel 0120-66-0209
新潟オフィス 新潟市中央区天神1-1 プラーカ3 2F
東京オフィス 渋谷区道玄坂1-12-1 渋谷マークシティW22F