HTMLのリンク<a>タグを超簡単に解説!

HTML/CSS

基本のリンクの書き方

こんにちは、リバティエンジニア[?]のたくやです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

まずは基本のリンクの書き方をまとめておきましょう。

基本的にリンクは<a>タグを使う

基本的にリンクをHTMLで書くときは<a>タグを使います。
サンプルコードと一緒に見ていきましょう。

 

<a href="リンク先のURL"> <!-- ここにリンクボタンにしたい文字を書きます。 --> </a>
IT博士
IT博士

このように開始タグの中に””で区切ったリンク先のURLを書きます。
開始タグと終了タグの間がボタンのテキストになりますよ。

結構簡単なんですね!
リンクを貼って違う場所に飛ぶことを考えると、
大変なんだとばかり思っていました。

IT博士
IT博士

そのような印象をお持ちの方って結構いるんですよね!
こんなに簡単なのでサクッと覚えてしまいましょう♪

リンク先を別タブで開く

さっき習ったやり方だと、今見ているページに上書きされてリンク先に飛んでしまうのですが、残しておくことはできないんですか?

IT博士
IT博士

もちろんできます!
その方法としては、リンク先を別のタブで開く方法があります。

とりあえず、サンプルコードを見てみましょう。

<a href="リンク先のURL" target="_blank"> <!-- ここにリンクボタンにしたい文字を書きます。 --> </a>

このように、aタグの開始タグの中に「target=”_blank”」という文字を追加するだけです。
「href=””」と「target=”_blank”」の間は半角スペースで空けるようにして下さい。でないと、正しく読み取ってくれません。

これだけですか?
ほんとうにこれだけで動くのか不安になるくらい簡単ですね!

IT博士
IT博士

簡単ですよね♪

今度は、リンクボタンが文字だけだと少し味気ないので画像をボタンにしてみましょう!

そんなこともできるんですね!

作っているサイトがどんどんきれいにかっこよくなってきてます!!

画像のリンクボタンをつくる

次は、先ほどまで文字でリンク先に飛んでいたものを、画像をクリックすることでリンク先に飛べるように改良してみます!

IT博士
IT博士

ちょっと大袈裟に言ってみたんですが、実はやることはすっごく単純で、
リンクタグで画像を囲むだけなんです。

<a href="リンク先のURL"> <!-- ここにリンクボタンにしたい画像を貼る。 --> </a>

こんな感じですね。
画像の貼り方は、imgタグなので「<img src=”〜”>」を追加します。

<a href="リンク先のURL"> <img scr="画像のURL"> </a>

たったこれだけなんです。
覚えやすくて簡単ですよね。


画像の貼り方は別の記事で特集しますのでよかったら見てください♪

たったこれだけ?画像を表示![HTML/CSS入門]
はじめにこんにちは、リバティエンジニアのたくやです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。今回はHTMLを使ってWebページに画像を表示させて...

CSSでリンクのデザインを変える

つぎに、先ほど作ったリンクボタンの見た目(デザイン)を変えていこうと思います。
覚える項目はこんな感じです、

  • リンクの下線を消す
  • リンクの色を変える
  • 訪問済みのリンクのデザインを変える

この3つについて説明しますね。

リンクの下線を消す

先ほどまであえて触れずにいたのですが、リンクを貼るとリンクボタンの下に線が引かれますよね?
これが「気に入らない!消したい!」なんてときには消すことも可能です。

a {text-decoration: none}

またまた、たったこれだけです。
何をしているかというと、「aタグ」つまりリンクに対して「text-deciration: none」テキストの装飾をなしにする。という設定をしています。

こうすることで、
今日からワタシはプログラマ」だったものを「今日からワタシはプログラマ」のように下線が消えます。

リンクの色を変える

次は、「リンクテキストの色を変えたい。」そんな時につかえるのが、
aタグに対してcolorプロパティを指定することで、赤色にしたいときは「color: red」を、灰色にしたいときは「color: gray」のように書くことで変えることができます。

IT博士
IT博士

「color: #F89172」のようにカラーコードで指定することもできますよ。

a {color: カラーコード or 色の名前}

記述も簡単ですね。

訪問済みのリンクのデザインを変える

最後に、1度訪問したらそのことが見てわかるようにリンクボタンのデザインを変える方法を見ていきます。

使うのは、「a:visited {〜}」です。
実際にサンプルコードを見ていきましょう。

a:visited {
  color:gray;
}

これも簡単ですね!
「color」で指定している”gray”の場所を好きな色に変えるだけで、一度訪問済みのリンクはこの指定した色に変わります。

IT博士
IT博士

色の指定方法は先ほどの「リンクの色を変える」で紹介した、色の名前かカラーコードを使うことができますよ♪

まとめ

今回は、HTMLの基本ともいえるリンクについて、作り方の基本からデザインの変更などちょっとした応用も加えてご紹介しました。
自分だけのオリジナルリンクボタンも作ることができるので、ぜひ試してみてください!

 

IT博士
IT博士

ちなみに、別ページに飛ぶのではなく今見ているページの指定した場所に飛ぶような「サイト内リンク」を作ることもできますよ!

それについては、また機会があればご紹介しますね♪

 

https://itthestudy.com%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%b8%e3%83%a3%e3%83%b3%e3%83%97%ef%bc%81-%e3%82%b5%e3%82%a4%e3%83%88%e5%86%85%e3%83%aa%e3%83%b3%e3%82%af%e3%81%ae%e8%b2%bc/

なにか質問があればお問い合わせフォームでお気軽にお問合せください。
可能な限りすぐにお返事します。
一流プログラマを目指して頑張りましょう!

コメント