カテゴリー
プログラミング

【演習】テキストリンクとボタンリンクをHTML・CSSで作ろう

リンクを作ろう

一般的なWEBサイトには、テキストでクリックできるリンクや、ボタンを押すと他のページに飛べるかたちのリンクがありますね。

あれらのリンクは、<a>タグを使った「ハイパーリンク」によって作られています。ハイパーリンクとは、私たちが普段「リンク」と呼んでいるものの正式名称。

今回はWEBサイト制作においての重要な基礎のひとつである「リンクの仕組み」を学び、実際に演習としてテキストやボタンのリンクを作ってみましょう。

記事中に登場するHTML/CSSそれぞれのサンプルコードをテキストエディタに転載するだけで、リンクのコードの仕組みがわかるようになっています。

テキストリンクを知ろう

リンクについて教える講師

リンクにしたいテキストがあった場合は<a>タグで囲むことで、ハイパーリンク(=リンク)を作ることが可能。

リンク先のパス(=URL)は<href>(エイチレフ)属性を仕様します。<a href>は「アンカーエイチレフ」と読みます。リンクをクリックした際にそのページでなく、別のウインドウでページを開きたい場合は「target=”_blank」を記述します。

下記のサンプルコードを見てみましょう。

下のコードは、架空の「http://example.com」というサイトの「company」という会社概要ページへのリンクの例です。

<同ページで開く場合>

<a href="https://example.com/company">会社概要</a>

<新しいウインドウで開く場合>

<a href="https://example.com/company" target="_blank">会社概要</a>

<a>タグは親要素によって囲めるものが変わる特性を持っています。そのため、インラインで使う場合は上記の「会社概要」のようにテキストを囲みますが、ブロックとして使う場合ば<img>タグや<p>タグをまとめて囲むことも可能です。

テキストリンクの注意点

ソースコードの写真

一般的にはテキストリンクは「青文字」「青文字に下線」となっています。ワードプレスなどもデフォルトでそのようになっているテンプレートも多く、やはり青系が手堅いところでしょう。「青」と言っても、GoogleやYahooやAmazonでは使用している青色が微妙に異なっています。このあたりはサイトのデザインとの兼ね合いも出てきます。

いずれにしろ「ここがクリック出来るよ」というのが1秒以下でわかることが大切。いくら目立たせると言っても、奇抜な色ではテキストリンクと認識されなかったり、クリックをためらうユーザーもいます。かといってあまり地味だとそもそも気づかれません。

テキストリンクとボタンリンクを作ろう

リンク作成に挑戦する初心者

では、実際に「テキストリンク」と「ボタンリンク」を作ってみましょう。

まずは、完成イメージをご覧ください。

上記の、

●テキストリンク

●ボタンリンク「A」

●ボタンリンク「B」

以上3点を、HTML/CSSで作っていきます。一番上はシンプルなテキストリンク、2番目の緑はフラットなボタン、最後のオレンジは立体的な影がついていますね。

では、あらかじめテキストエディタを立ち上げておきましょう。テキストエディタで何を使うか迷う方は『初心者におすすめのテキストエディタは?厳選の「3つ」はコレ。』をチェック。

HTMLのコード

まずはHTML側のコードです。

<!DOCTYPE html>
    <html>
       <head>
       <meta charset="utf-8">
       <title>リンクの練習</title>
       <meta name="description" content="テキストリンクとボタンリンクの演習です">
       <link rel="stylesheet" href="sample.css">
       </head>


       <p><a href="ここに飛ばしたいリンクURL" class="text-link">テキストリンク</a></p>
       <p><a href="ここに飛ばしたいリンクURL" class="button-A" target="_blank">ボタンリンク「A」</a></p>
       <p><a href="ここに飛ばしたいリンクURL" class="button-B" target="_blank">ボタンリンク「B」</a></p>

headタグ内はページ名(title)やメタ要素が入っています。

その下の3つのタグが、今回の本命。リンク作成に使う記述です。

classとid

上の見本のHTMLのように同じタグが複数あり、それぞれに異なるCSSを指定したい場合は「class」名を付けて区別します。

CSSを書く際にこのclass名をセレクタにすることで、それぞれ異なるスタイルを適用できます。セレクタについてピンとこない場合は『CSSとは?「基本の書き方」と「6種のセレクタ」を覚えよう。』をチェックしてみましょう。

class名は自由につけることができますが、例えば「button-A」というclassを作っておけば、同じボタンを実装したいときに同じclass名をつければ適用されます。

classとid「使用上の注意」

class名は「1ページに複数使える」idは「1ページに1回しか使えない」というルールがあります。

CSSのコード①

今回は3つのパターン(テキストリンク/ボタンリンク①/ボタンリンク②)を作りますが、まずは「共通設定」をします。

a{
     display: block;
     width: 200px;
     margin: 40px auto;
     padding: 1em;
     text-align: center;

}


@media screen and (min-width: 960px) {
     a:hover{
     opacity:0.7;
}
}

パソコンでは、ホバー(=マウスをリンク要素に乗せたときの挙動)時の記述も必要になります。ホバーの指定は「:hover」と記載。これを「疑似クラス」と呼びます。

擬似クラスには「:hover」の他に、

●「:active」クリックしている間の挙動

●「:focus」タブキーなどでフォーカスされている時の挙動

●「:visited」以前にクリックしたことのあるリンクの表示

などがあります。

<ホバー指定時の注意>

ホバーの挙動をモバイルでも有効にしてしまうと、デバイスによっては2回タップしないとリンク先に進めないなどの支障が出ます。ホバーのスタイル指定はパソコンだけにとどめましょう。

CSSのコード②
テキストリンクの場合

青色のリンクを作ります。今回はYouTubeで使われているリンクの青色(#0033cc)を使用します。

a.text-link{
       color: #0033cc;
       text-decoration: underline;
}

CSSのコード③
ボタンリンク「A」の場合

ボタンの作成には「背景に色を付ける」ことで作成できます。今回の『ボタン「A」』には、以下のように記述しました。

●背景色は緑(#3cb371)

●テキストに対する下線はナシ(none)

●ボタン内の文字色は白(#ffffff)

●フォントのサイズは20px

a.button-A{
      background: #3cb371;
      text-decoration: none;
      color: #ffffff;
      font-size: 20px;
}

CSSのコード④
ボタンリンク「B」の場合

ボタン「B」では、立体感も出してみましょう。角も丸くして影も付け、ボタンらしさを演出してみます。デザインの方法としては古い見た目ですが、今回は演習ですのでやってみましょう。

a.button-B{
       background: #ffa500;


       text-decoration: none;
       color: #000;
       font-size: 20px;
       border-radius: 10px;
       border-bottom: 4px solid #191970;
}


a.button-B:active{
       border-bottom: none;
       transform:translateY(4px);
}

上記の「a.button-B:active」の「:active」は、先ほども例で出ました「疑似クラス」です。

クリックしている間はボタンの影をなくし「押してる感」を出しています。実際にオレンジのボタン「B」をクリックしてみてください。なお、今回パスつまりURL=飛び先は指定していませんのでクリックしてもなにかのページに進めるわけではありません。

「:active」の挙動はパソコンのみで、スマートフォンでは反映されないこともご承知おきください。

これで完成

冒頭の完成イメージになりましたでしょうか。

リンク先は指定していませんが、好きなサイトのURLでも入れて見ると飛ぶことができます。試しにやってみましょう。

基礎を固めることで挫折は防げる

マークアップを教える講師と生徒

例えばワードプレスなど、WEBサイト制作においての重要なポイントは「HTMLとCSSをきちんと理解しているかどうか」です。

プログラミングの前段階にある基礎の部分をどれだけ分かっているかにより、その後の応用段階での対応力が決まる。

当サイト「キソプロ」では、プログラミングの全ての根幹となる基礎力を固めることで挫折を防ぎ、応用段階において右往左往しない足場を作るオンライン・マンツーマンのサービスです。

昨今の「とりあえず分からなくても前に進もう(=カリキュラムを消化しよう)」というプログラミング教育サービスとは正反対のポジションにある「キソプロ」。

学校側のペースでなく、自分で納得しながら勉強を進めたいという方は、お気軽にご相談ください。