ホーム プログラミング言語 Web関連 css3 CSSリンクスタイル(4種類)






CSSリンクスタイル(4種類)




 
 
リンクはウェブサイトの重要な部分です. ほとんどすべてのウェブページに多くのリンクが表示されます. リンクスタイルの合理的なデザインは、ウェブページの外観にポイントを追加できます.リンクには、リンク、訪問済み、アクティブ、ホバーの 4 つの異なる状態があります。次の疑似クラス セレクターを使用して、リンクの 4 つの状態に異なるスタイルを設定できます。

 

  • :link : 通常または未訪問のリンクのスタイルを定義します。
  • :visited : 訪問したリンクのスタイルを定義します。
  • :hover : マウスがリンクの上を通過またはホバーしたときのスタイルを定義します。
  • :active : リンクがクリックされたときのスタイルを定義します。

上記の 4 つの擬似クラス セレクターを使用して、通常のテキストのスタイルを定義するのと同様に、色、フォント、背景、境界線など、リンクに必要な CSS スタイルを定義できます。

注: 4 つの擬似クラス セレクターを定義する場合、特定の順序が必要です. 一般に、 :hover :link:visited後に配置する必要があり:active:hoverの後に配置する必要があります。

Chrome、Firefox、Safari などの主流の Web ブラウザーでは、リンクに対して一連の既定のスタイルが定義されています。リンクに対して特にスタイルが設定されていない場合、ブラウザーは既定のリンク スタイルを使用します。

  • 通常のリンク: 下線付きの青いテキスト。
  • 訪問したリンク: 下線付きの紫色のテキスト。
  • リンクがクリックされたとき: 赤い下線付きのテキスト。
  • リンクの上を歩いたりホバリングしたりする場合: リンクの外観は変わりません。以前の状態の色が保持されます。

1. :link

:link擬似クラス セレクターを使用して、通常のリンクまたは未訪問のリンクのスタイルを設定できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html> 

実行結果は次の図のとおりです。

図: :link疑似クラスセレクタのデモ
図: :link疑似クラスセレクタのデモ

2. :visited

:visited擬似クラス セレクターを使用して、訪問したリンクのスタイルを設定できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html> 

実行結果は次の図のとおりです。

図: :visited擬似クラス セレクターのデモ
図: :visited擬似クラス セレクターのデモ

3. :hover

:hover疑似クラス セレクターは、マウスがリンクの上を通過またはホバーしたときのスタイルを定義できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>これもリンクです</a>
</body>
</html> 

実行結果は次の図のとおりです。

図: :hover擬似クラス セレクターのデモ
図: :hover擬似クラス セレクターのデモ
4. :アクティブ

:active疑似クラス セレクターを使用して、リンクがクリックされたときのスタイルを定義します。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html> 

実行結果は次の図のとおりです。

図: :active疑似クラスセレクターのデモ
図: :active疑似クラスセレクターのデモ
 

「CSSリンクスタイル(4種類)」についてわかりやすく解説!絶対に観るべきベスト2動画

超初心者向け!!リンクを作るHTMLタグの使い方!(テスト動画)
CSS を HTML にリンクする方法