リンクタグのCSSまとめ！リンクの色の変更やオシャレな装飾方法を紹介
リンクタグのCSSまとめ！リンクの色の変更やオシャレな装飾方法を紹介

リンクタグのCSSまとめ！リンクの色の変更やオシャレな装飾方法を紹介

目次を開く

検索する メニューを開く Category カテゴリーを開閉する
  • WEB制作
  • HTML
  • CSS
Pickup

CSSショートハンドのチートシート

  • 389
  • 93474

CSSセレクタのチートシート｜37パターンを一覧で解説

  • 3149
  • 530628

IT・web用語の読み方わかるくん

  • 0
  • 323909

【2022年】人気ブラウザ11つを厳選！ランキング形式でご紹介

  • #WEB制作
  • 21
  • 417500

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

  • #CSS
  • 27
  • 14053

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

  • #CSS
  • 23
  • 12671
Contact 広告・お仕事のご相談はこちら メニューを閉じる
目次を閉じる
  • 75
  • Twitter
  • Facebook
  • Copy URL
  • hatena

htmlのリンクタグであるa要素のcssの装飾まとめです。基本のリンクの色の変更と罫線の削除だけでなく、アニメーションを用いたおしゃれなリンクボタンのデザインパターンもいくつか紹介していきます

リンクタグであるaタグの基本的な使い方はこちらでマスターできます。おさらいがてら一度読んでみるといいでしょう。

HTMLのリンク作成｜リンクタグの使い方と【a href】の意味を優しく解説

訪問済みのリンクの色を変える

訪問済みのリンクとは「ユーザーがすでに閲覧したことのあるページ」がリンクタグのURLに設定されていた場合のリンクです。たとえばGoogleの検索結果でも一度訪れたことのあるwebページのリンクは紫になっていますよね。

一度訪れたことのあるページのリンクの色と未訪問のリンクの色が分けられていることは、webサイトの使いやすさを向上させるポイントなのでぜひ対応しましょう。

訪問済みのリンクの色を変える場合、aタグは通常通りの書き方でOKです。

<a href="https://www.google.co.jp/">クリックして戻ったらピンク色</a> a:visited{ color : #ff4081; } クリックして戻ったらピンク色

css側でaではなくa:visitedというセレクタに対してcolorを指定することで訪問済みのリンクの色だけを変えることができます。

試しにサンプルのリンクをクリックして戻るとリンクの色が青色からピンク色に変わるのが確認できます。

マウスを乗せた時のリンクの色を変える

続いてはパソコンでwebで見ているユーザーがリンクテキストにマウスを乗せたときのリンクの色を変える方法です。

サンプルではマウスカーソルを乗せた時にリンクの色がオレンジに変わっていますよね。

ホバーのリンクの色を変える時も通常通りaタグの書き方でOKです。

<a href="https://webliker.info/">ホバーでオレンジ</a> a:hover{ color : #ff7043; } ホバーでオレンジ

ホバーした時のリンクはa:hoverをセレクタにしてcolorを適用します。これでホバーした時のリンクの色だけを変更することができます。

試しにサンプルのリンクにマウスカーソルを乗せてみましょう。

ホバーした時にふわっと色を変える

最近のwebサイトではホバーしたリンクの色がふわっと変わる処理が施されていることが多いですよね。

サンプルでは青色からオレンジ色にふわっと色が切り替わっています。マウスを離した時もふわっと青色にもどっていますよね。

a{ transition: color 0.3s; } a:hover{ color : #ff7043; } ホバーでオレンジ

ホバーしたリンクの色を変えるcssのコードはそのままでOKです。

aをセレクタにし、transitionというプロパティとその値にcolor 速さ（0.1s〜1s）を追記します。これだけで文字の色をふわっと変えることができます。

transitionはこちらを参考にしてください。

クリックした時のリンクの色を変える

クリックしている状態のリンクの色も変えることができます。現在どのリンクを操作しているのかわかりやすくなりますよね。

クリック時のリンクの色を変える時も通常通りaタグの書き方でOKです。

<a href="https://webliker.info/">クリックでグリーン</a></a> a:active{ color : #26a69a; } クリックでグリーン

cssでa:activeをセレクタにして、colorを設定してあげるだけでクリック時のリンクの色だけを指定することができます。

サンプルのリンクをクリックするとグリーンに変わりますよね。（※長押しのほうがわかりやすい）

スマホでリンクをタップした時の色を変える

クリック時のリンクの色を変更する方法を紹介しましたが、実は先ほどのcssのコードだけではスマホでタップしている時にリンクの色が変わりません。スマホでリンクをタップしている時に色を変えたい場合はontouchstart属性をaタグに追記する必要があります。

<a href="https://webliker.info/">タップでグリーン</a> a:active{ color : #26a69a; } クリックでグリーン

htmlにはスマホでタップした時に色を変更を有効にしたいa要素にontouchstart=""を追記します。

cssは先ほどと同じくa:activeにcolorを指定すればOKです。

サンプルのリンクをスマホでタップするとリンクの色がグリーンに変わります。

もし全てのリンクでa:activeの色変更を有効にしたい場合は<body>にontouchstart=""を追加して<body>とすればOKです。

リンクの下線を消す

リンクにはデフォルトでリンクだとわかるように、このように下線がついています。下線がついていたほうがリンクテキストだとひと目でわかりますがデザインの雰囲気によっては消したい時があるかもしれません。その場合はcssで消すことができます。

a{ text-decoration: none; }

text-decoration: noneのリンク

text-decoration: underlineのリンク

text-decoration: overlineのリンク

text-decoration: line-throughのリンク

aをセレクタにしてtext-decoration : none;を指定すれば下線を消すことができます。

text-decorationの値は複数用意されていて下線の種類を選択することができます。

リンクにアイコン（画像）をつける

さてここからはリンクボタンを装飾する方法を解説していきます。まずはリンクにアイコンをつける方法をみていきましょう。

今回はダウンロードができるリンクを表す左のようなリンクをつくってみましょう。

ダウンロードする <a href="img/spl.pdf" download="spl.pdf">ダウンロードする</a>

html側は通常通りaタグでリンクを書けばOKです。

a{ background-image : url(icon-download.svg); /*背景画像のパス*/ background-repeat : no-repeat; /*背景画像の繰り返し*/ background-position : center right; /*背景画像の配置*/ padding-right: 30px; /*背景画像を入れる余白をつくる*/ }
  1. cssのbackground-imageというプロパティで要素に背景画像を設定します。url()には画像のパスを記述します。
  2. 背景画像はデフォルトだと背景全体に繰り返すように表示されてしまうのでbackground-repeatでnoneを指定します。
  3. アイコンの配置場所をbackground-positionで指定します。今回は右に配置したいのでcenter rightとしました。
  4. 最後にテキストと背景画像が重なるのを防ぐためアイコン分の余白を内側につけます。

cssでつくるおしゃれなリンクテキスト2つ

cssだけで作れるおしゃれなホバーアニメーション付きのリンクテキストを2つ紹介します。

どれもコピペで簡単に作れるので、htmlを学習中のみなさんは今は細かな理屈は抜きで「こんなこともcssでできるんだ」ということを頭に残して流し読みでOKです。

下から線が広がるリンクテキスト a{ position: relative; display: inline-block; transition: .3s; } a::after { position: absolute; bottom: 0; left: 50%; content: ''; width: 0; height: 2px; background-color: #31aae2; transition: .3s; transform: translateX(-50%); } a:hover::after{ width: 100%; } おしゃれなリンクその1

ホバーをするとテキストの中央から下線が広がるリンクテキストです。

実際はborderで下線を作っているのではありません。afterという擬似要素を使用して、その要素のwidthをデフォルトで0にしておいてホバーした時点で100%に広げています。

左から背景色が伸びるリンクテキスト a{ padding: 0 10px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(49, 170, 226) 50%); background-position: 0 0; background-size: 200% auto; transition: .3s; } a:hover{ background-position: -100% 0; color: #fff; } おしゃれなリンクその2

ホバーをすると左から青い背景色が伸びてくきます。

linear-gradientというグラデーションの色を指定する値の応用的なテクニックを用いて実現しています。

リンクのcssまとめ

最後に本記事で学習したリンクの状態ごとの指定方法をまとめておきます。

  • 通常時はaをセレクタにしてcolorを指定する
  • 訪問済リンクはa:visitedをセレクタに
  • マウスを乗せた時（ホバー）はa:hoverをセレクタに
  • クリックした時はa:activeをセレクタに
  • スマホでタップ時のリンクの色を変えたいなら要素にontouchstart=""をつける
  • リンクのデフォルトの下線はdocoraiotn:noneで消せる
  • リンクにアイコンをつけるにはbackground-imageを使う
評価数ランキング 閲覧数ランキング

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

  • 196
  • 278202

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 182
  • 660538

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

  • 163
  • 406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

  • 154
  • 382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

  • 132
  • 925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

  • 48
  • 1009744

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

  • 132
  • 925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 182
  • 660538

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

  • 129
  • 608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

  • 80
  • 548591
新着記事一覧

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

  • 41
  • 11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

  • 55
  • 81979

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

  • 131
  • 56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

  • 23
  • 12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

  • 27
  • 14053

＼pick up articles／

CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

  • #CSS
  • 17
  • 90949

CSS・JSのキャッシュクリア｜「変更されてないです」から解放されるCa...

  • #CSS
  • 51
  • 38749

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

  • #CSS
  • 27
  • 14053

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

  • #CSS
  • 121
  • 367230

【CSS Peeper】webデザイナーは持ってて当たり前！？なハイパー...

  • #CSS
  • 13
  • 20542

paddingとmarginの違いとボックスモデル【図解&アニ...

  • #CSS
  • 28
  • 86751

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

  • #CSS
  • 131
  • 56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

  • #CSS
  • 23
  • 12671

HTMLとCSSの文法チェックツール7選！よくある文法エラーも紹介

  • #CSS
  • 20
  • 171048

1分で完了｜VScodeで任意の文字列を出力するショートカットの設定

  • #CSS
  • 18
  • 13777

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

  • #CSS
  • 41
  • 11319

あなたはいくつ知ってる？CSSのセレクタ40個を総まとめ【チートシート付...

  • #CSS
  • 21
  • 87242

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック！

評価数ランキング 閲覧数ランキング

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

  • 196
  • 278202

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 182
  • 660538

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

  • 163
  • 406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

  • 154
  • 382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

  • 132
  • 925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

  • 48
  • 1009744

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

  • 132
  • 925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 182
  • 660538

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

  • 129
  • 608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

  • 80
  • 548591
新着記事一覧

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

  • 41
  • 11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

  • 55
  • 81979

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

  • 131
  • 56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

  • 23
  • 12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

  • 27
  • 14053
📎📎📎📎📎📎📎📎📎📎
BOT