にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキストリンクをボタンのように装飾するCSS [リンク,]

ボタンのように見えるリンクを用意したい場合、リンクを画像で用意してしまうと「選択できない・検索できない・文字サイズを変更できない・読み込みに時間が掛かる」など(画像化したことによる)デメリットが多々あって不便です。
そこで、リンク自体はテキスト(文字)のまま、スタイルシートを使ってボタンのように見えるよう装飾してみてはいかがでしょうか。以下はその表示例です。

テスト1 テスト2 テスト3

▲これらのテキストリンクにマウスを載せるとへっこんだデザインに変わります。

上記のサンプルでは、3つのリンクがスタイルシートでボタンのように装飾されています。リンクテキスト(=リンクに使われている文字)は、画像ではなくテキスト(文字)のままなので、範囲選択も可能、検索も可能、文字サイズも変更可能で、読み込みに時間はかかりません。

これらは単にリンク(a要素)に対して枠線や背景色を付加しているだけです。枠線の種類としては「でっぱったよう(凸型)に見える枠線(=outset)」・「へっこんだよう(凹型)に見える枠線(=inset)」を指定しています。
具体的には、下記のようなCSSソースを書きます。

border-style: outset; /* 凸型に見える */

上記のようにborder-styleプロパティに値「outset」を指定すると、全体がでっぱったように見える枠線色が描かれます。

border-style: inset; /* 凹型に見える */

上記のように、値を「inset」にすると、全体がへっこんだように見える枠線色が描かれます。
この値を使うことで、テキストをボタンのように装飾することができます。

全体のCSSソースは下記の通りです。

a {
   display: block; /* ★ブロック化 */
   margin: 0.1em;  /* 外側の余白 */
   padding: 0.3em; /* 内側の余白 */
   width: 5em;     /* 横幅 */
   float: left;    /* 続く内容を右側に */
   text-decoration: none; /* 下線を消す */
   
   background-color: #ffffcc; /* ★背景色 */
   color: #000080;            /* 文字色 */
   border-width: 2px;         /* ★枠線の太さ */
   border-style: outset;      /* ★凸型に見えるように */
   border-color: #ffff55;     /* ★枠線のベース色 */
}
a:hover {
   background-color: #ffffaa;  /* ★背景色 */
   color: red;                 /* 文字色 */
   border-style: inset;        /* ★凹型に見えるように */
   text-decoration: underline; /* 下線を引く */
}

最低限必要な装飾は「★」マークを付加した部分だけです。あとは、書かなくても構いません。書けば、冒頭のサンプルのように表示されます。とりあえず、コピー&ペーストで使ってみて、値をいろいろ変えてみつつ使ってみると良いでしょう。

なお、「凹型に見える枠線色」や「凸型に見える枠線色」は、実際にどのような色で表示されるかはブラウザによって異なります。凹凸を表現するためには、明るい線と暗い線を描画する必要があるので、border-colorプロパティで指定した色がベースに使われますが、具体的な配色はブラウザが勝手に決めますから。事前に複数のブラウザで表示確認しておいた方が良さそうです。もし気に入らなければ、上下左右の枠線の色を自力で個別に指定する方が確実です。

※個人的には、Firefoxでの表示が一番ボタンっぽく見えます。(^_^;)

ボタンリンクの上にマウスポインタを「載せたとき」ではなく「押したとき」にだけ凹んだ装飾を適用したい

さて、上記のサンプルでは、ボタン型に装飾したリンクの上にマウスポインタを載せるだけで、ボタンが凹むようなデザインになっています。これは「マウスポインタが載ったとき」を示す疑似クラスhoverに対してスタイルを指定しているからです。

しかし、「ボタン」というのはクリックするまでは凹みません(押し下げられません)よね。そこで、マウスポインタの載せたときには表面の色を変えるだけに留めておき、ボタン型リンクを押した(クリックした)瞬間にだけ押し下げたように見せるデザインを作っておく方が、より自然な気がします。

マウスポインタが載ったタイミングで装飾を変更したい場合にはhover疑似クラスが使えるように、クリックされたタイミングで装飾を変更したい場合にはactive疑似クラスが使えます。例えば、以下のように「通常のリンク」→「マウスポインタが載った際のリンク(hover)」→「クリックされた際のリンク(active)」の順でスタイルを記述すると良いでしょう。

a {
   display: block; /* ★ブロック化 */
   margin: 0.1em;  /* 外側の余白 */
   padding: 0.3em; /* 内側の余白 */
   width: 5em;     /* 横幅 */
   float: left;    /* 続く内容を右側に */
   text-decoration: none; /* 下線を消す */
   
   background-color: #ffffcc; /* ★背景色 */
   color: #000080;            /* 文字色 */
   border-width: 2px;         /* ★枠線の太さ */
   border-style: outset;      /* ★凸型に見えるように */
   border-color: #ffff55;     /* ★枠線のベース色 */
}
a:hover {
   background-color: #aaffff;  /* ★背景色 */
}
a:active {
   background-color: #ffffaa;  /* ★背景色 */
   color: red;                 /* 文字色 */
   border-style: inset;        /* ★凹型に見えるように */
   text-decoration: underline; /* 下線を引く */
}

このCSSソースを使って冒頭の例を再度表示すると、以下のように見えます。

テスト1 テスト2 テスト3

▲これらのテキストリンクにマウスを載せると色が変化し、さらにクリックすると押し下げられたデザインに変わります。

ただ、active疑似クラスを使ってリンクを装飾しても、クリックした直後にページを移動しちゃうわけですから、あんまり見えませんけども……。(^_^;;;
まあその辺は、本物のボタンでも同様ですしね。^^;
※上記のボタンリンクは、クリックしてもページ移動はしません。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---