【CSS入門】a要素をCSSでデザインするには？基本から応用まで解説

Webサイトには、クリックをすると別ページが開くリンクというものがありますね。

このリンクは、a要素を使って作成されます。

a要素には、色や下線など、初めから設定されているデザインもあり、扱いづらいと感じている方もいるのではないでしょうか？

今回は、a要素をCSSでデザインする方法をきちんと理解したいという方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、a要素をCSSを使ってデザインする方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

a要素をCSSでデザインするには？

a要素はHTML文書内で以下のように記述します。

<a href="#">詳細はこちらへ！</a>

「#」の部分には、リンク先のURLやパスなどを書きます。CSSで何も設定していない場合、テキストは青く、下線が足されます。

文章の一部がテキストリンクである場合、基本的にはこの色と下線の設定をCSSで行います。

それぞれの指定方法を解説していきましょう。

リンクの色を変える

テキストリンクの色はデフォルトでは青くなっています。

CSSを使って、要素内のテキストの色を変更してみましょう。

a {
  color: skyblue;
}

色の変更はcolorプロパティを使います。今回は、skyblueに変更してみました。

まったく別の色にしてしまうと、リンクだと認識されずに素通りされる可能性が高まります。

別の色を使いたい場合には、下線を消さないままにするなど、リンクだとわかるような工夫をしておきましょう。

テキストの下線を削除する

テキストリンクの下線を消す方法を紹介します。

a {
  text-decoration: none;
}

下線を消すにはtext-decorationプロパティを使います。これをnoneにすることで下線を消すことができます。

また、「text-decoration:underline」と指定することで下線を付け足すことができます。

このtext-decorationは他の要素にも使用できますが、混乱を招くことがありますので、あまり使用を推奨しません。

基本的にはa要素の下線を消すために利用しましょう。

疑似クラスを指定する

マウスホバー時に色を変えるなど、a要素は疑似クラスを使った設定をすることが多いです。

a要素で用いられる疑似クラスについて解説していきましょう。

よく使われる疑似クラスについて

a要素で用いられる疑似クラスは、以下の4つです。

a{
  color: blue;
  text-decoration: none;
}

a:visited{
  color: green;
}

a:hover{
  color: skyblue;
  text-decoration: underline;
}

上記コードでは、最初、テキストリンクは青く、マウスを乗せると水色に変わり下線がつきます。

一度クリックした後は、訪問済みとなるため、テキストリンクは緑色になります。

基本的なボタンリンクの作り方

ここまで、テキストのリンクについて解説してきました。

ボタンの形のリンクもよく見かけますよね。簡単なボタンを作成してみましょう。

<a href="#">ここをクリック</a>

a{
  padding: 7px 13px;
  background: green;
  text-decoration: none;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  transition: 0.3s;
}

a:hover{
  background: skyblue;
}

ボタンの背景色を緑にして、文字を白くしました。

border-radiusは、角丸にする指定ですね。そのほかに、余白などを使ってボタンの形を作っています。

transitionはCSSアニメーションの設定を行うプロパティです。

上記では、0.3秒かけて変化するようにしています。一瞬で切り替わるのではなく、ふわっと切り替わる様子が確認できるかと思います。

ボタンの形状やマウスホバーしたときの変化の仕方を変えるなどして、色々と試してみてくださいね。

まとめ

今回は、a要素をCSSを使ってデザインする基本的な方法から、ボタンリンクの作り方まで解説してきました。

疑似クラスを使って、状態によってスタイルを変える方法も紹介しましたね。

a要素は、HTML/CSSを勉強する上で大事な知識となりますので、早めのうちにマスターしておきましょう。

学習する上で、今回の記事が参考になれば幸いです。