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

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

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

ただし、
＊ブラウザデフォルトのスタイルを活かしたい場合
＊マウスオーバーでのアニメーションが不要な場合（スマホ専用サイトなら意味無い）
などもあるので、そこは臨機応変に。不要な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

点線

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」で透明度１、「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の値」を１セットとし、複数のセットを「,（カンマ）」で区切る。

.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（要素の直後に）などが擬似要素。

Facebook

Twitter