リンクのアウトラインを消したい! リンク(a要素)のためのCSSリセット(その他リンク周りのCSSを整える)

前回メモったCSSリセットの中でも念入りにやっておきたいのがリンクのためのCSSリセットだ。

特にリンクのアウトラインの除去
テキストや画像に貼ったリンクをクリックすると、ブラウザのデフォルトで点線のアウトラインが残るが、これが邪魔なときもある。これを消すためのCSSをメモ。

その他、リンクへのマウスオーバー時に、画像の濃度(透明度)を変えたり
それをアニメーションで徐々に変化させるCSS指定も、ついでにメモ。
リンク周りのCSSを整える。

本日のINDEX

ただし、
*ブラウザデフォルトのスタイルを活かしたい場合
*マウスオーバーでのアニメーションが不要な場合(スマホ専用サイトなら意味無い)
などもあるので、そこは臨機応変に。不要なCSSは書くだけ無駄。必要なものだけチョイスすること。

スポンサーリンク

画像のリンクのボーダーを無くす(border)

これはおなじみ。リンクのあるimg要素には、ブラウザのデフォルトで「border」が付くので、これをnoneにするだけ。

a img {border:none;}

テキストのリンクのアウトラインを無くす(outline)

テキストのリンクの場合は、ブラウザのデフォルトで a:visitedなどに「outline:dotted」が付くので、これをnoneにする。
a要素に対して outline:none; にするだけ(a:visited, a:focus などに細かく指定しなくてもaだけでOK)
これで、クリックした後に残る点線の枠が無くなる。

a {outline:none;}

outlineプロパティについて

outlineはインラインレベル要素の枠線のスタイル。
フォームの部品(input要素のテキストフィールドやラジオボタンなど)のフォーカス時などに、ブラウザのデフォルトで付く枠線が outline のスタイル。
a要素の a:visited, a:focus にブラウザデフォで付く点線の枠も outlineプロパティによるもの。

borderプロパティと線のスタイルは同じだが、borderと違って線の上下左右の個別指定は不可。全部同じスタイル・太さ・色で指定する。

outlineプロパティの値はこちら

none
デフォルト。非表示。太さも0。
solid
実線
double
2本線
groove
insetの線の中央がくぼんだ線
ridge
outsetの線の中央がでっぱった線
inset
上と左が暗く、下と右が明るい線。領域がくぼんで見える
outset
上と左が明るく、下と右が暗い線。領域がでっぱって見える
dashed
破線
dotted
点線

outlineプロパティの使用例





input.sample1 {outline: double 5px #f00;}
input.sample2 {outline: inset 5px #f00;}
input.sample3 {outline: outset 5px #f00;}
input.sample4 {outline: groove 5px #f00;}
input.sample5 {outline: ridge 5px #f00;}
input.sample6 {outline: dashed 5px #f00;}

リンク画像の透明度をマウスオーバーで変化させる(opacity)

opacityプロパティを使って「a img」と「a img:hover」で透明度に差をつけるだけ。
マウスオーバー時の画像を準備しなくても、ちょっと変化がつくので便利。

下記のソースでは「a img」で透明度1、「a img:hover」で透明度0.8にしている。

a img {opacity:1;}
a img:hover {opacity:0.8; filter:alpha(opacity=80);}

/*最後の「filter:alpha(opacity=80)」はオールドIE用。*/

リンクのマウスオーバー時に時間的に変化させる(transition)

transitionプロパティを使って、時間的変化を指定する。
ノーマル時にtransitionで「変化させたいCSSプロパティ」「変化の時間」「変化速度の割合い」などを指定。
「:hover擬似クラス」などでノーマル時と違うスタイル指定をすれば、パッと変わるのではなく、時間的に変化する。

「変化させたいCSSプロパティ」は、「allで十分だと思う。
(allはすべてのプロパティに適用されるので。下記参照↓

★ :hover以外なら、form関連の要素での :focus擬似クラスでも使えるはず。試した事無いけど。
★ :hoverならPCビューのみ有効。スマホ専用サイトなら無意味。マウスオーバーという観念が無いので変化無し。

本ブログでの指定を見てみると↓

a {
	color:#fff;
	text-decoration: none;
	transition:all 0.5s ease-out;
	overflow: hidden;
	outline: none;}
a:hover{
	color: #05c6fe;
	text-decoration:underline;}
a img {
	border: none;
	opacity: 1; 
	transition:all 0.5s ease-out;}
a img:hover {opacity: 0.8; filter: alpha(opacity=80);}

これで、テキストのリンクの場合(a と a:hover)は、color と text-decoration が時間的に変化。0.5秒かけて ease-out(最後がゆっくり)で変化する。
画像リンクの場合は、opacityが、同じく 0.5秒・ease-out(最後がゆっくり)で変化。

transitionプロパティについて

「transition : transition-propertyの値、transition-durationの値、transition-timing-functionの値、transition-delayの値」といったカタチで指定する。それぞれの値は「半角スペース」で区切る
最後の「transition-delayの値」は、そこまで厳密に指定する機会も無いので、私は省略することが多い。

transitionプロパティで指定できる 各プロパティと値 はこちら

transition-propertyプロパティ(transitionを適用するCSSプロパティ)
all(デフォルト。すべてのCSSプロパティに適用)
none(どのCSSプロパティにも適用しない)
プロパティ名(特定のプロパティに適用したい場合に指定。「,(カンマ)」で複数指定OK)
transition-durationプロパティ(変化にかかる時間)
0(デフォルト)
数値+「s」で秒数で指定。1s なら1秒。0.5s なら0.5秒。(マイナスの数値不可。0とされる)
transition-timing-functionプロパティ(変化速度の割合い)
ease
デフォルト。開始と完了を滑らかに(cubic-bezier(0.25, 0.1, 0.25, 1.0) )
linear
一定(cubic-bezier(0.0, 0.0, 1.0, 1.0) )
ease-in
ゆっくり始まる(cubic-bezier(0.42, 0, 1.0, 1.0))
ease-out
ゆっくり終わる(cubic-bezier(0, 0, 0.58, 1.0))
ease-in-out
ゆっくり始まってゆっくり終わる(cubic-bezier(0.42, 0, 0.58, 1.0))
cubic-bezier(数値, 数値, 数値, 数値)
3次ベジェ曲線のハンドルを (x1, y1, x2, y2) で指定(開始点P0、開始点のハンドルP1、終了点のハンドルP2、終了点P3のうち、ハンドルP1, P2のxy座標ということ)。0~1の数値で指定。
transition-delayプロパティ
0(デフォルト。すぐに始まる。)
数値+「s」で秒数で指定。1s なら1秒。0.5s なら0.5秒。(マイナスの数値だと、すぐに開始されるが、指定のマイナス分だけ以前に始まったような表示に)

transition-propertyの値はCSSのプロパティ名。
allなら、指定されたすべてのプロパティに対してtransitionが有効。
複数したい場合は、
「プロパティ名、transition-durationの値、transition-timing-functionの値、transition-delayの値」を1セットとし、複数のセットを「,(カンマ)」で区切る。

.sample {
  background:#fff;
  width:200px;
  height:50px;
  transition:background 0.5s ease-in 0, width 0.5s ease-in 0;}
.sample:hover {
  background:#000;
  width:100%;
  height:70px;}

5行目がtransitionの指定。
background と width に対してtransitionを指定している。(heightは時間的変化をしない)

aとa:hover以外の指定(a:link, a:visited, a:active, a:focus)

ちょっと余談になるが、a要素へのスタイル指定と、擬似クラス「a:hover」への指定だけで、リンクに関するスタイルは十分だと思ってる(根がいいかげんなせいか..)

a要素にスタイル指定すれば、ほかの状態(a:link, a:visited, :hover, a:active, a:focus)への指定を省略しても、すべての状態に a要素へのスタイル指定がイキになる。
a要素への指定以外の変化をつけたい場合のみ、擬似クラスを使って指定するのだ。
それで、「a:hover」のスタイルだけ追加で指定することが多いというわけ。

だが、ほかの状態も細かくスタイルを指定したい時のために、
a要素のスタイル指定についてのポイントと、a要素の擬似クラスをメモ。

a
a要素へのスタイル指定で ブラウザデフォルト(a:visited の outlineなど)をリセットしておくと便利。
(以下の擬似クラスを使っていちいち指定しなくても、コレ一発で済むので)
a要素はインラインレベル。なので、widthやheightを指定したいなら display:block を指定してブロックレベルにする必要アリ。
display:block を指定すれば、テキストリンクでも、テキストだけでなくaの領域(幅と高さを持つ)すべてがリンク領域になるので、ユーザがクリックしやすくなる。
a:link
リンクへ未訪問の状態のa要素
(aのスタイルを上書きするだけなので不要かも。マジ使った事無いわ)
a:visited
リンクへ訪問済みの状態のa要素
(既にクリックしてリンクへ飛んだことがあるa要素。指定したほうが便利なページもあるかも。
 ただ、ユーザによるブラウザの訪問履歴設定によっては、せっかく指定しても無効になるけどw)
a:hover
マウスオーバーしている状態のa要素
(クリックする前のマウスオーバー状態。そこがリンク領域であることが認知しやすいので必須だと思う。
 ただ、スマホやタブレットでは、マウスオーバーの概念が無く意味無いか。タップ時に一瞬この指定が有効になっている気もする)
a:active
マウスでクリックしている状態のa要素
(ユーザがマウスでクリックしてから離すまでの間の状態)
a:focus
マウスでクリックして選択した状態のa要素
(フォーム関連の要素がフォーカスされた状態のスタイルのために良く使われるが、aにも使える。
 aの場合、別ウィンドウ(タブ)へのリンクで、元のウィンドウ(タブ)に戻った時、該当リンク部分は「focus状態」)

ちなみにCSSの「擬似クラス」セレクタとは
要素が「ある状態」になっているときだけ適用されるように、擬似的なclassのように指定するためのセレクタ。だと私は思っている。擬似クラスには、上記の他に、「:lang」「:first-child」「:last-child 」などがある。

★「:hover」「:active」「:focus」は、
別にa要素専用ではなく、マウスオーバーしたり、マウスでクリックできる要素なら何とでも組み合わせて使える。
特に「:focus」は、フォーム関連の要素がフォーカスされた状態(例えばテキストフィールドなら、カーソルが現れて入力できる状態)のスタイル適用によく使われる。

これと似た「擬似要素」セレクタとは
「状態」ではなく「モノ」に対してスタイルを指定する。という認識でイイんじゃないかな〜。
:first-line(最初の行のみにスタイルを適用)、:first-letter(最初の文字)、:before(要素の直前にモノを挿入)、:after(要素の直後に)などが擬似要素。

関連記事

モーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順

プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイ [記事を読む]

ドロワーメニュー(ハンバーガーメニュー)を簡単な jQueryとCSSだけで作る手順

ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー(ハンバーガーメニュー)にしたくて、プラグインや既存ライブラリなどを使 [記事を読む]

background-attachment: fixed がスマホで効かない問題は ::before で解決!

Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラ [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^