a要素に設定できる疑...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





a要素に設定できる疑似クラス


  • CSS基礎知識

a要素に設定できる疑似クラス

リンクを記述する際に使用するa要素に対して疑似クラスを設定することで、リンクの色を変えたり、背景色を加えたり、下線を引いたりなど様々なスタイルを適用できます。

疑似クラスを指定するには、セレクタとしてセレクタ名のあとに(:コロン)をつけて疑似クラスを記述したものと指定します。

よく利用されている疑似クラスには、

  • link・・・【未読リンク】リンク先をまだ訪問していないときのデザインを指定する。
  • visitred・・・【既読リンク】一度でもリンク先を訪問したときのデザインを指定する。
  • hover・・・【オンマウス】マウスカーソルがa要素の領域内にあるときのデザインを指定する。
  • active・・・【アクセス中】ブラウザがアクセスしているときのデザインを指定する。

の4つがあります。

記述順は、上記の順に記述します。

順序が違う場合、意図した通りに反映されないことがあります。

以下の「HTML」「CSS」それぞれのタブをクリックすると、コードを確認することができます。

See the Pen a要素 by Tomoko Fukumoto (@FUKUMOTO) on CodePen.




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop