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

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

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

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

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

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

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

　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;
}