記事内に商品プロモーションが含まれる場合があります
今回はHTMLでaタグでリンクを作り、さらにCSSでデザインを変える方法をマスターしましょう。HTML&CSS初心者の方でも分かるようにていねいに解説していきます。
1. HTMLでのリンクタグ（aタグ）の書き方
はじめにHTMLでのリンクの書き方をまとめておきます。
1-1. aタグの基本のき
リンクはaタグを使って書きます。aタグの基本形は以下のようになります。
リンクボタンにしたい部分を<a href="">~</a>ではさみます。リンク先のURLは開始タグの中にhref="リンク先のURL"という形で書きます。
例えばサルワカのトップページへのリンクを書いてみます。
<div class="a-link-e01"><a href="https://saruwakakun.com/">サルワカへジャンプ！</a></div>リンクボタンが作られました。aタグにはさまれた部分がリンクテキストになるわけですね。このリンクは文章中でさらっと使われることがよくあります。文章中にリンクを入れる場合は、以下のようにpタグの中にaタグを書けばOKです。
<div class="a-link-e02"><p>今すぐに<a href="https://saruwakakun.com/">サルワカへジャンプ！</a>しよう</p></div>今すぐにサルワカへジャンプ！しよう
1-2. 別タブで開くリンクを作ってみよう
さきほどのリンクをクリックすると、見ていたページからそのままリンク先に飛びます。新しいタブ（ブラウザの設定によってはウィンドウ）で開きたいときは、aタグにtarget="_blank"を追加します。
<a href="https://saruwakakun.com/" target="_blank" rel="noopener">
リンクテキスト
</a>href=""とtarget="_blank"の間には半角スペースを空けます。この例では、リンク先から元のページを操作できないようにrel="noopener"も明記しています。現在のHTMLではtarget="_blank"に同じ保護が含まれます。サルワカのトップページを別タブで開くリンクを書いてみます。
<div class="a-link-e03"><a href="https://saruwakakun.com/" target="_blank" rel="noopener">サルワカへジャンプ！</a></div>新しいタブなどで開くリンクができました。現在のページを開いたままにできますが、使いすぎには注意しましょう。毎回別タブで開くと、訪問者にとってうっとおしく感じられることもあります（とくにスマホで見ていると…）。「本当に別タブで開かれるべきページなのか」をよく検討することが大切です。
1-3. 画像のリンクボタンを作ってみよう
次に画像のリンクボタンを作ってみましょう。aタグでimgタグをはさむだけです。画像だけがリンクになるときは、altに「サルワカのトップページへ」のようにリンク先や機能が分かる説明を付けます。
<a href="https://saruwakakun.com/">
<img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg"
alt="サルワカのトップページへ" width="120" height="119">
</a>試しに「サルワカくんの顔の画像をクリックするとサルワカのトップページに飛ぶ」リンクを作ります。この例では、公開当時の見本画像をそのままリンク画像として使っています。画像のURLは、使いたい画像のものに置き換えてください。
<div class="a-link-e04"><a href="https://saruwakakun.com/"><img src="https://saruwakakun.com/wp-content/uploads/2017/01/f785937ce29accf88de7a14fdc85cfc4.png" alt="サルワカのトップページへ（顔の画像）" width="600" height="479" style="display: block; max-width: 100%; height: auto;"></a></div>
公開当時の見本画像をリンクに使っています。
「サルワカくんの顔を踏むとトップページに飛ぶ」というリンクが出来上がりました。
2. CSSでリンク（aタグ）のデザインを変える
次にリンクボタンのデザインを変える方法を紹介します。
2-1. リンクの下線を消す
a {
text-decoration: none;
}ブラウザの既定スタイルでは、通常リンクテキストに下線が引かれます。ただし、ページのCSSで変わることがあります。サルワカへジャンプ！この下線を消したいときは、aタグにtext-decoration: none;を指定します。↓実際に使ってみましょう。
<div class="a-link-e05"><a href="https://saruwakakun.com/">サルワカへジャンプ！</a></div>.a-link-e05 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e05 p {
margin: 1em 0;
}
.a-link-e05 a {
color: blue;
text-decoration: underline;
}
.a-link-e05 a:hover,
.a-link-e05 a:focus-visible {
opacity: 1;
}
.a-link-e05 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e05 a {
text-decoration: none;
}下線が消えました。逆に下線をつけたいときはa {text-decoration: underline}を指定します。
【参考】特定のリンクのデザインのみ変えるには？
aというセレクターはページ内の全てのaタグを選びます（他のCSSとの優先順位によって、実際の見た目は変わることがあります）。一部のリンクだけを変えたい場合は、以下のようにします。各例では、他のリンクに影響しないよう、例を囲むdivのclass名で適用範囲を絞っています。HTMLとCSSを一緒にコピーしてください。
1. aタグにidやclassをつけるaタグにclass(id)名をつけ、CSSでそのclass(id)名に対してデザインを指定します。
<div class="a-link-e06"><a href="https://saruwakakun.com/">変えない</a>
<a href="https://saruwakakun.com/" class="noline">変える</a></div>.a-link-e06 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e06 p {
margin: 1em 0;
}
.a-link-e06 a {
color: blue;
text-decoration: underline;
}
.a-link-e06 a:hover,
.a-link-e06 a:focus-visible {
opacity: 1;
}
.a-link-e06 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e06 .noline {
text-decoration: none;
}classを指定したaタグのみデザインが変わりました。
2. 子孫セレクタ（絞込指定をする）CSSでは「pタグの中にあるaタグ」や「class名"◯◯"の中にあるaタグ」のような指定もできます。このような絞り込み指定をしたいときは、タグ名やクラス名を半角スペースで区切って並べます。
<div class="a-link-e07"><a href="https://saruwakakun.com/">変えない</a>
<p><a href="https://saruwakakun.com/" class="noline">変える</a></p></div>.a-link-e07 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e07 p {
margin: 1em 0;
}
.a-link-e07 a {
color: blue;
text-decoration: underline;
}
.a-link-e07 a:hover,
.a-link-e07 a:focus-visible {
opacity: 1;
}
.a-link-e07 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e07 p a {
text-decoration: none;
}CSSの書き方についてより詳しく知りたい方はこちらの記事を読んでみてください。
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！2-2. リンクの色を変える
a {
color: skyblue;
}リンクテキストの色を変えたいときは、aタグに対してcolorプロパティを指定します。赤くしたいときはcolor: red、灰色にしたいときはcolor: grayというように書きます。color: #F89172のようにカラーコードで指定することもできます。例としてリンク色を水色（skyblue）にしてみます。
<div class="a-link-e08"><a href="https://saruwakakun.com/">サルワカへジャンプ！</a></div>.a-link-e08 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e08 p {
margin: 1em 0;
}
.a-link-e08 a {
color: blue;
text-decoration: underline;
}
.a-link-e08 a:hover,
.a-link-e08 a:focus-visible {
opacity: 1;
}
.a-link-e08 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e08 a {
color: skyblue;
text-decoration: none;
}3.カーソルをのせたときのデザインを変える（a:hover）
a:hover,
a:focus-visible {
color: skyblue;
}
セレクターをa:hoverと書くと、マウスカーソルをリンクにのせたときのデザインを指定できます。タッチ操作などではhoverが使えない場合もあるため、以下の実演ではキーボード操作でリンクにフォーカスしたときのa:focus-visibleにも同じ変化を付けています。Tabキーで試せます。
a:hoverでは、色やサイズなどさまざまなデザインを指定できます。例として、ホバー時やキーボードのフォーカス時に「文字サイズを大きくし、色を変え、さらに太字にする」という派手な変化を付けます。
<div class="a-link-e09"><a href="https://saruwakakun.com/">サルワカへジャンプ！</a></div>.a-link-e09 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e09 p {
margin: 1em 0;
}
.a-link-e09 a {
color: blue;
text-decoration: underline;
}
.a-link-e09 a:hover,
.a-link-e09 a:focus-visible {
opacity: 1;
}
.a-link-e09 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e09 a:hover,
.a-link-e09 a:focus-visible {
color: skyblue;
font-size: 2em; /*文字サイズ2倍*/
font-weight: bold;
}
このように少し目立つような変化をつけることもできるわけですね。ちなみにHTML&CSSでは「カーソルを当てたとき」のことをホバー時と呼んだりします。本や解説サイトを読んでいるとよく登場するので覚えておくと良いでしょう。
画像リンクのhover時の見た目を変える
a:hover img,
a:focus-visible img {
opacity: 0.7;
}
画像リンクにも、a:hover imgでカーソルを重ねたときの変化を付けられます。a:hoverの後ろに半角スペースを置いてimgと書くと、リンク内の画像が対象になります。以下の例ではa:focus-visible imgも指定し、キーボードでフォーカスしたときにも同じ変化を付けています。
カーソルを当てると画像が線で囲まれる装飾
ひとつめの例では、カーソルを当てたりキーボードでフォーカスしたりすると、画像が線で囲まれます。
<div class="a-link-e10"><p>顔を踏んでね↓</p><p><a href="https://saruwakakun.com/"><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカのトップページへ（顔の画像）" width="120" height="119"></a></p></div>.a-link-e10 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e10 p {
margin: 1em 0;
}
.a-link-e10 a {
color: blue;
text-decoration: underline;
}
.a-link-e10 a:hover,
.a-link-e10 a:focus-visible {
opacity: 1;
}
.a-link-e10 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e10 img {
display: inline-block;
box-sizing: content-box;
margin: 0;
padding: 0;
width: 120px;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.a-link-e10 a:hover img,
.a-link-e10 a:focus-visible img {
border: solid 2px silver; /*2pxのシルバーの実線*/
}顔を踏んでね↓
カーソルを当てると画像を半透明に
２つめの例では、カーソルを当てたりキーボードでフォーカスしたりすると、画像を半透明にします。現在はopacity: 0.7;だけで、70%の不透明度を指定できます。50%にしたいときはopacity: 0.5;に変えます。
<div class="a-link-e11"><p>顔を踏んでね↓</p><p><a href="https://saruwakakun.com/"><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカのトップページへ（顔の画像）" width="120" height="119"></a></p></div>.a-link-e11 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e11 p {
margin: 1em 0;
}
.a-link-e11 a {
color: blue;
text-decoration: underline;
}
.a-link-e11 a:hover,
.a-link-e11 a:focus-visible {
opacity: 1;
}
.a-link-e11 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e11 img {
display: inline-block;
box-sizing: content-box;
margin: 0;
padding: 0;
width: 120px;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.a-link-e11 a:hover img,
.a-link-e11 a:focus-visible img {
opacity: 0.7; /*不透明度70%。50%にするなら0.5*/
}顔を踏んでね↓
4. 訪問済みのリンクのデザインを変える（a:visited）
a:visited {
color: silver;
}
訪問済みのリンクにはa:visitedを使います。ただし、履歴の保護のため、訪問済みと判定される条件はブラウザにより制限されます。別のサイトから訪れた履歴などが、そのまま反映されるとは限りません。
:visitedは:hoverと違い、通常はcolorやbackground-colorなどの色に関する一部のプロパティだけを変更できます。サイズや配置を自由に変えることはできません。例として、訪問済みリンクの文字色をシルバーにしてみましょう。
<div class="a-link-e12"><a href="https://saruwakakun.com/life">サルワカへジャンプ！</a></div>.a-link-e12 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e12 p {
margin: 1em 0;
}
.a-link-e12 a {
color: blue;
text-decoration: underline;
}
.a-link-e12 a:hover,
.a-link-e12 a:focus-visible {
opacity: 1;
}
.a-link-e12 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e12 a:visited {
color: silver;
}
この例では、訪問済みと判定されたリンクの文字色がシルバーになります。実演のリンクを開いて戻り、画面で見比べてみてください。ブラウザの履歴設定などによっては変わらないこともあります。また、JavaScriptのgetComputedStyle()は履歴保護のため未訪問の値を返すので、取得した色だけでは訪問済みかどうかを確認できません。上のGIFは公開当時の記録です。
5. CSSでオシャレなリンクボタンを作ってみよう
さて、最後にこの記事の復習を兼ねて、少しおしゃれなリンクボタンのデザイン例をひとつ紹介します。気に入ったらコピペして使ってみてください。
<div class="a-link-e13"><a href="https://saruwakakun.com/" class="link_button">Click here!</a></div>.a-link-e13 {
color: #333;
font: 16px/1.5 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
overflow-wrap: anywhere;
}
.a-link-e13 p {
margin: 1em 0;
}
.a-link-e13 a {
color: blue;
text-decoration: underline;
}
.a-link-e13 a:hover,
.a-link-e13 a:focus-visible {
opacity: 1;
}
.a-link-e13 a:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.a-link-e13 .link_button {
display: inline-block;
font-weight: bold;
text-decoration: none;
background: skyblue;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-family: Avenir, Arial, sans-serif;
}
.a-link-e13 .link_button:visited {
color: gray;
}
.a-link-e13 .link_button:hover,
.a-link-e13 .link_button:focus-visible {
background: silver;
text-decoration: none;
}最後に
最後にこの記事のポイントをまとめておきます。