知らなきゃ損!?リンクの色をお洒落に変えるCSSテクニック!


知らなきゃ損!?リンクの色をお洒落に変えるCSSテクニック!

Webページにて、「リンクの上にカーソルを乗せると色が変わる」デザインを見かけた事はありませんか?こういったちょっとした動きが加わると、Webページの見栄えが良くなりますよね。あのちょっとした動きを実現させてくれる便利な機能が、この記事のテーマとなる擬似要素擬似クラスです。

そしてこの擬似要素と擬似クラス、効果的に使うことでデザインが良くなるだけでなく、HTMLやCSSの記述がより簡単で綺麗になるなど、嬉しい事が盛り沢山!それではさっそく、この擬似要素と擬似クラスについてご紹介していきましょう。

image

目次
  1. 最も有名な擬似クラスの例
  2. 擬似要素・擬似クラスとは?
  3. 擬似要素や擬似クラスは何が便利なの?
  4. 擬似要素の特徴
  5. 擬似クラスの特徴
  6. 擬似要素・擬似クラスの基本的な使用例
  7. 擬似要素の代表的な例
  8. 擬似クラスの代表的な例

最も有名な擬似クラスの例

擬似クラスで最も有名なものといえば、「リンクの上にカーソルを乗せると色が変わる」という機能。この機能はたくさんのサイトで使われているのを見かけますよね。さてこの機能、具体的に何をしているのかというと、a要素に擬似クラスをくっつけてアクションが起こった時の動きをCSS上で振り分けています。こうすると、未訪問リンクや訪問済リンク、ポイント時、選択時にそれぞれ色を変えたり色々なスタイルを適用する事ができるんですね。 post-3700-1 参考記事:TAG index http://www.tagindex.com/stylesheet/basic/format5.html

さてこんな便利な擬似クラスや擬似要素ですが、基礎編ではこれは一体何?というところから簡単な使用例までをご紹介していこうと思います。

擬似要素・擬似クラスとは?

擬似要素や擬似クラスは何が便利なの?

HTMLやCSSには色々な要素(タグ)やプロパティが用意されていますが、例えば上記の例のようなリンクにカーソルを乗せた時に○○をする等の動きは、従来のそれでは実現できませんでした。もしくは、長くて面倒なコードを書かなければいけませんでした。最初の文字だけにスタイルを適用する:first-letterなどがいい例でしょう。こういった、今まで出来なかった事が出来るようになった、もしくは今まで面倒だった事が簡単に出来るようになった、というのが擬似要素や擬似クラスのいいところです。

post-4096_7

擬似要素の特徴

擬似要素の特徴は、「最初の一文字」や「最初の一行」のような要素の一部分に対して、スタイルを指定したり文字や画像を追加できる事です。前述の:first-letterでは、適用した要素の最初の文字にだけスタイルを適用する事ができます。

【従来】 ```:javascript [html title="HTML"]

Code部

[/html]


```:javascript
[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
.first-letter{color: #0099ff;}
[/css]

post-4096_1

従来はこのようにspan要素を使って最初の文字のスタイルを個別に設定してやっていました。

【擬似要素:first-letter】

[html title="HTML"]

<h1>Code部</h1>

[/html]

[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
h1:first-letter{color: #0099ff;}
[/css]

post-4096_1

従来と結果は同じですが、擬似要素:first-letterを利用すると、HTMLにコードを書き加える必要がなく、より短いコードで簡単にコーディングできるのが嬉しいところです。

擬似クラスの特徴

擬似クラスは「マウスオーバー」や「訪問済リンク」のような特定の状態にある要素全体に対して、スタイルが適用できるようにするものです。有名なのがリンクの挙動ですね。通常時やオンカーソル(マウスオーバー)時、選択中や訪問先リンクなどリンクの状態によって色などのスタイルを変える事ができます。最も有名な例である「リンクの上にカーソルを乗せると色が変わる」では、擬似クラス:hoverを適用することで、オンカーソル時のスタイルを適用できます。

【擬似クラス:hover】

[html title="HTML"]
<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>
[/html]
[css title="CSS"]
a {color:#a9a9a9;}
a:hover {color:#0099ff;}
[/css]

post-4096_2

こういった特殊な動きは従来のHTMLやCSSだけでは表現できませんでした。擬似クラスがある事によって表現でき、より直感的でユーザーにわかりやすいホームページが制作できるようになりました。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

擬似要素・擬似クラスの基本的な使用例

とは言え、概要の説明だけではちょっとわかりにくいかもしれません。ここからは実際に基本的な使用例を見ながら、擬似要素と擬似クラスのイメージを掴んでいきましょう。ご紹介できるのは一部ですが、どれも便利なものばかりです。

擬似要素の代表的な例

要素:first-line

要素の一行目にだけ擬似要素を適用する事ができます。例では一行目だけfont-sizeを180%に設定してみました。同じ<h1>内で文字の大きさを変えることができるのは、コーディング上とっても便利です。

[html title="HTML"]

<h1>Code部
〜プログラミング初心者を応援するメディア〜</h1>

[/html]
[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
h1:first-line{font-size: 180%;}
[/css]

post-4096_3a

要素:before { content : 値 ; }

要素の前に画像や文字を挿入する事ができます。例では矢印のアイコンを挿入してみました。普通に画像を挿入してもいいのですが、HTMLのソースがごちゃつくので、擬似要素の:beforeを使った方がスマートにコーディングができます。

[html title="HTML"]

<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>

[/html]
[css title="CSS"]
a:before{
    content : url("arrow.gif");
    vertical-align:middle;
}
[/css]

post-4096_4

要素:after { content : 値 ; }

beforeとくれば、もちろんafterもあります。例ではNEWアイコンをリンクの後ろに挿入してみました。こちらもソースがすっきりするのが良い所です。

[html title="HTML"]

<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>

[/html]

[css title="CSS"]
a:after{
    content : url("new.gif");
    vertical-align:middle;
    margin-left:5px;
}
[/css]

post-4096_5

擬似クラスの代表的な例

リンク擬似クラス

擬似クラスの中でも特に呼び方のある擬似クラスのひとつが、このリンク擬似クラス。リンク要素であるa要素に適用するのですが、a:linkとa:visitedがこれに該当します。リンクの状態を判別してくれるこの擬似クラス、a:linkが未訪問状態のリンクでa:visitedが訪問済み状態のリンクとなります。

[css]
a:link {color:#a9a9a9;}    /* 未訪問リンクの文字色を変える */
a:visited {color:#330066;} /* 訪問済リンクの文字色を変える */
[/css]

post-4096_8

ダイナミック擬似クラス

こちらも特に呼び方のある擬似クラスのひとつ、ダイナミック擬似クラス。こちらは要素のアクションの状態を判別してくれ、リンク要素であるa要素に適用します。a:hoverやa:activeがこれに当たり、a:hoverはカーソルが当たった状態のリンク、a:activeは選択中のリンク。

[css]
a:hover {color:#0099ff;}   /* ポイント時のリンクの文字色を変える */
a:active {color:#666699;}  /* 選択中のリンクの文字色を変える */
[/css]

リンク擬似クラスとダイナミック擬似クラスは組み合わせて使う事が多いのですが、処理順によって正しく動作しない場合があるので順番が決まっている事もご紹介しますね。正しい処理順は「:link,:visited,:hover,:active」の順になります。

[css]
a:link {color:#a9a9a9;}    /* 未訪問リンクの文字色を変える */
a:visited {color:#330066;} /* 訪問済リンクの文字色を変える */
a:hover {color:#0099ff;}   /* ポイント時のリンクの文字色を変える */
a:active {color:#666699;}  /* 選択中のリンクの文字色を変える */
[/css]

post-4096_9

他にもたくさん擬似要素や擬似クラスはあるのですが、ブログ記事だけでは紹介しきれませんね!さて、そんな擬似要素や擬似クラスは覚えておくとホームページの見栄えが良くなるだけでなく、コーディングが楽になったりソースが綺麗になったりと嬉しい事が沢山あります。さらに、擬似要素や擬似クラスのスゴいところはこれだけではありません。なんとデザインにも応用できるスゴいところが!次回の記事では、擬似要素と擬似クラスをさらに応用したカッコいいデザインへの活用法をご紹介しますので、そちらもお楽しみに!

image


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp