CSS リンク

❮ 前章へ次章へ ❯

リンクは、いろいろな方法でスタイルの設定ができます。

Text Link Text Link Link Button Link Button

リンクのスタイル

リンクは、CSS プロパティ(例えば color, font-family, background など) でスタイルを設定することができます。

例

a {
color: hotpink;
}

Try it Yourself ❯

さらに、どのような状態にあるかに依り、異なったスタイルの設定ができます。

リンクの状態は以下の4通りです:

a:link - 標準、未読のリンク
a:visited - 既読のリンク
a:hover - マウス・オーバ時のリンク
a:active - クリックされる瞬間のリンク

例

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Try it Yourself ❯

複数のリンク状態にスタイルを設定する時は、順序に規則があります:

a:hover は、a:link と a:visited の後ろでなければならない
a:active は、a:hover の後ろでなければならない

（訳注；Love and Heart と覚えれば良いででょう）

テキスト・デコレーション

text-decoration プロパティは、多くの場合、リンクからアンダーラインを取り除くために使用されます：

例

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Try it Yourself ❯

背景色

background-color プロパティは、リンクの背景色を指定するために使用できます：

例

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Try it Yourself ❯

高度な例 - リンクボタン

この例は、いくつかの CSS プロパティを組み合わせて、リンクをボックス/ボタンにように表示する高度な例のデモです。

例

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Try it Yourself ❯

その他の例

ハイパーリンクへのいろいろなスタイル追加
この例は、ハイパーリンクへいろいろなスタイルを追加する方法のデモです。

高度な例 - ボーダー付きリンクボックスの作成
リンク・ボックス/ボタンの作成方法の別な例です。

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯

❮ 前章へ次章へ ❯