HTMLのリンクのいろいろ

プログラミングの勉強日記

2020年7月3日　Progate Lv.148
ポートフォリオ作成中
HTMLのリンクについて

画像にリンクを張る方法と新規タブでリンクを開く方法

画像リンクの作成

　画像リンクは<img>タグを<a>タグで囲むことで作成できる。

<a href="リンク先"><img src="画像パス"></a>

リンク先を新規タブに設定する方法

　<a>タグにtarget="_blank"属性を付けることでできる。

<a href="ここにURL" target="_blank"></a>

CSSでリンクのデザイン変更

リンクの下線を消す

　CSSで何も指定しない場合、下の写真のようにリンクのテキストには下線が表示される。これを消したい場合、text-decoration: noneを指定する。

a {
  text-decoration: none;
}

リンクの色変更

　リンクの色を変更する場合は、文字の色を変更するときと同じように、colorプロパティを指定する。

a {
  color: skyblue; /* 水色にする */
}

カーソルを合わせたときのデザイン変更

　　セレクタをa:hoverと書くことで、マウスカーソルをリンクの上にのせたときのデザインを指定することができる。

/* カーソルをのせたとき */
a:hover {
  color: skyblue;
  font-size: 2em;/*文字サイズ2倍*/
  font-weight: bold;
}

訪問済みのリンクデザインの変更

　カーソルを合わせたときのデザインの変更のように、セレクタをa:visitedと書く。

/* 訪問済みのリンク */
a:visited {
  color: skyblue;
  font-size: 2em;/*文字サイズ2倍*/
  font-weight: bold;
}