CSS入門 | CSS基本プロパティ | CSSリンク

Tags:

CSSを使うと、リンクにさまざまな効果を設定できる。

リンクには、color、font-family、backgroundプロパティなど、CSSのさまざまなプロパティを適用できる。 また、text-decorationプロパティ値をnoneに設定して、リンクが設定されたテキストの下線を削除することもできる。

<style>
    a {
        background-color: #FFFFE0;
        color: darkslategray;
        font-size: 1.3em;
        text-decoration: none;
    }
</style>

リンクの状態

リンクには合計5つの状態があり、それぞれの状態に異なるスタイルを適用できる。

  1. link: リンクの基本状態であり、ユーザーがまだ一度もそのリンク先ページを訪問していない状態である。
  2. visited: ユーザーが一度でもそのリンク先ページを訪問した状態である。
  3. hover: ユーザーのマウスカーソルがリンク上にある状態である。
  4. active: ユーザーがマウスでリンクをクリックしている状態である。
  5. focus: キーボードやマウスのイベント、または別の方法でその要素がフォーカスを持っている状態である。
<style>
    a:link { color: olive; }
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:active { color: khaki; }
</style>

リンクを活用したボタン

CSSを使うと、リンクを簡単にボタンのように作ることができる。

<style>
    a:link, a:visited {
        background-color: #FFA500;
        color: maroon;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active { background-color: #FF4500; }
</style>