こんにちは、カヨです。
今回のお題は、
aタグを使うときによく検索することまとめ
リンクを作成する際によく使う設定や記述をまとめておきました。筆者も実務でいつも必要になるのでブックマークしておくときっとお役に立つと思います。
こんな方に読んでいただきたいと思っています！
✔︎ サイトを作成している人
✔コードを書く人
✔コーディングを学んでいる人
✔<a>タグを書くときにいつも調べてしまう人
基本構文の確認
<a href="https://example.com">リンクテキスト</a>
新しいタブで開く方法（target=”_blank”）
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>📢 noopener / noreferrer を忘れがちなので注意（セキュリティ対策）。
ページ内リンクの書き方（アンカーリンク）
<a href="#section1">セクション1へ</a>
...
<h2 id="section1">セクション1</h2>
電話リンクの書き方（tel）
<a href="tel:0123456789">電話をかける</a>
リンクの下線を消す／色を変える（CSS）
a {
text-decoration: none; /* 下線を消す */
color: #333; /* デフォルトの青を上書き */
}
ホバー時に色や装飾を変える（CSS）
a:hover {
text-decoration: underline; /* ホバー時だけ下線 */
color: #007bff; /* ホバー時の色 */
}
ボタン風にする（CSS）
【scss】
a.button {
display: inline-block;
padding: 0.5em 1em;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 4px;
}
a.button:hover {
background-color: #218838;
}
【html】
<a href="/submit" class="button">送信</a>
アイコン付きリンク（余白の調整）
【scss】
a .icon {
margin-right: 0.5em;
vertical-align: middle;
}<a href="/home">
<span class="icon">🏠</span> ホームへ戻る
</a>
状態別スタイル
a:visited {
color: purple; /* 訪問済みリンク */
}
a:active {
color: red; /* クリック中のリンク */
}
その他メモ
- text-decoration: none → 下線を消す定番
- display: inline-block → パディングや背景を使いたいときに必要
- hoverやvisitedなどの擬似クラスは忘れがちなのでチェック
筆者
この記事が少しでも参考になれば嬉しいです。便利なのでブックマークやお気に入りにしておいてくださいね。♡もクリックしてもらえると励みになります☺
