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