• 【演習】テキストリンクとボタンリンクを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>

    テキストリンクの注意点

    ソースコードの写真

    一般的にはテキストリンクは「青文字」「青文字に下線」となっています。ワードプレスなどもデフォルトでそのようになっているテンプレートも多く、やはり青系が手堅いところでしょう。「青」と言っても、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="css/sample.css">
</head>
<body>
<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>
</body>
</html>

    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をきちんと理解しているかどうか」です。

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

    当サイト「メンタレ」は「メンターを一時的にレンタル」できるサービス。

    独学の途中でちょっとだけ「自分のための講座」を受けたい場合にカスタマイズしてもらったり、挫折した箇所からの学び直しなど柔軟に対応します。

    昨今の「とりあえず分からなくても前に進もう（＝カリキュラムを消化しよう）」という学び方ではなく「弱みはちゃんと習って克服しよう」というのが目的。オンラインで1講座から可能です。

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

さらに最新記事もチェック！

まずはLINEで
お問合せ