TECH I.S.

CSSでリンクのデザインをカスタマイズする方法


CSSを使用すると、さまざまな方法でリンクのスタイルを設定できます。



リンクのスタイリング

リンクは任意のCSSプロパティでスタイル設定できます(例:colorfont-familybackgroundなど)。

a {   color: hotpink; }

自分で試してみる »

さらに、リンクの状態に応じて、リンクのスタイルを変えることができます。

4つのリンクの状態は次のとおりです。

  • a:link- 通常の未訪問のリンク
  • a:visited- ユーザーがアクセスしたリンク
  • a:hover- ユーザーがマウスオーバーしたときのリンク
  • a:active- クリックした瞬間のリンク

/* 未訪問のリンク */ a:link {   color: red; } /* 訪問済みのリンク */ a:visited {   color: green; } /* マウスオーバーしたときのリンク */ a:hover {   color: hotpink; } /* クリックした瞬間のリンク */ a:active {  color: blue; }

自分で試してみる »

複数のリンクの状態のスタイルを設定する場合、いくつかの順序規則があります。

  • a:hoverはa:linkとa:visitedの後に来なければなりません
  • a:activeはa:hoverの後に来なければなりません

テキスト装飾

text-decorationプロパティは、主にリンクから下線を削除するために使用されます。

a:link {   text-decoration: none; } a:visited {   text-decoration: none; } a:hover {   text-decoration: underline; } a:active {   text-decoration: underline; }

自分で試してみる »


背景色

background-colorプロパティを使用して、リンクの背景色を指定できます。

a:link {   background-color: yellow; } a:visited {   background-color: cyan; } a:hover {   background-color: lightgreen; } a:active {   background-color: hotpink; } 

自分で試してみる »


リンクボタン

この例は、複数の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; }

自分で試してみる »


その他の例

この例は、ハイパーリンクに他のスタイルを追加する方法を示しています。

a.one:link {color: #ff0000;} a.one:visited {color: #0000ff;} a.one:hover {color: #ffcc00;} a.two:link {color: #ff0000;} a.two:visited {color: #0000ff;} a.two:hover {font-size: 150%;} a.three:link {color: #ff0000;} a.three:visited {color: #0000ff;} a.three:hover {background: #66ff66;} a.four:link {color: #ff0000;} a.four:visited {color: #0000ff;} a.four:hover {font-family: monospace;} a.five:link {color: #ff0000; text-decoration: none;} a.five:visited {color: #0000ff; text-decoration: none;} a.five:hover {text-decoration: underline;}

自分で試してみる »

リンクボックス/ボタンの作成方法の別の例

a:link, a:visited {   background-color: white;   color: black;   border: 2px solid green;   padding: 10px 20px;   text-align: center;   text-decoration: none;   display: inline-block; } a:hover, a:active {   background-color: green;   color: white; }

自分で試してみる »

この例は、さまざまな種類のカーソルを示しています(リンクに役立ちます)。

<span style="cursor: auto">auto</span><br> <span style="cursor: crosshair">crosshair</span><br> <span style="cursor: default">default</span><br> <span style="cursor: e-resize">e-resize</span><br> <span style="cursor: help">help</span><br> <span style="cursor: move">move</span><br> <span style="cursor: n-resize">n-resize</span><br> <span style="cursor: ne-resize">ne-resize</span><br> <span style="cursor: nw-resize">nw-resize</span><br> <span style="cursor: pointer">pointer</span><br> <span style="cursor: progress">progress</span><br> <span style="cursor: s-resize">s-resize</span><br> <span style="cursor: se-resize">se-resize</span><br> <span style="cursor: sw-resize">sw-resize</span><br> <span style="cursor: text">text</span><br> <span style="cursor: w-resize">w-resize</span><br> <span style="cursor: wait">wait</span>

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細