複数ページの画面遷移を構築しよう！

---
title: 2-2. HTMLの基本
tags: HTML
author: GeekSalon
---
#今回の学習
2-1. HTML/CSSの概要
<font color="Red"><b>2-2. HTMLの基本</b></font>
2-3. CSSの基本
2-4. ホームページの大枠を作ろう！
2-5. 自己紹介サイトを作ろう！
2-6. HTML/CSSをマスターしよう！
2-7. JavaScriptの基本
2-8. jQueryというライブラリを使ってみよう！

#GOAL

**HTMLのボタンで画面遷移用のリンクを作成する方法について学ぶ。**
**使い方理解して、プログラム作成に活かすことができる。**

#1.HTMLのボタンでリンクを作成する方法は3種類
HTMLのボタンでリンクを作成する方法として、3種類のタグを利用した作成方法をご紹介していきたいと思います。

**aタグ**
aタグにCSSで装飾し、ボタンの様に見せる方法です。
後述する「button」タグや「input」タグと異なり、テキスト形式の表示となるため、CSSでの装飾は必須となります。
aタグでは文章だけではなく、**画像などの要素になるもの**もリンクにさせることができます。



**buttonタグ**
HTMLのbuttonタグは、Webサイト上に「ボタン」を表示させます。
「ボタン」を押すことで、画面遷移やフォーム情報の送信などが可能となります。



**inputタグ**
inputタグは「type」属性に「submit」または「button」値を設定することで、ボタン表示可能になります。
「submit」値は、フォームに入力された値を送信することを目的として実装されます。
リンク用のボタンを作成する場合には、「button」値を設定して処理を実装していきます。



#2.HTMLのボタンでリンク作成してみよう！
##**2-1.aタグ**

まず初めに、aタグでリンク用のボタンを作成する方法について紹介していきます。

**aタグでのリンク用ボタン作成**
aタグでリンク用ボタンを作成する際の基本的な記述の仕方は以下のようになります。
![スクリーンショット 2021-09-11 15.45.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/80fa2661-e8eb-3e6c-6610-262acf93cf41.png)
aタグでは、上記の様に「href」属性に遷移先のURLを指定することでリンク用の実装が可能となります。
しかし、このままではテキスト形式の表示となるため、CSSでボタンに見える様デザインしていく必要があります。


**サンプルコード**
シンプルにボタンをクリックした際に、「index.html」と同一階層に配置した「sample.html」ファイルの内容を表示するサンプルコードを紹介します。


```index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Link Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="sample.html" class="btn">サンプル</a>
</body>
</html>
```

```style.css
.btn {
  border-radius: 5px;
  background-color: lightblue;
  padding: 10px;
  text-decoration: none;
  color: white;
}
```

```sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>HELLO!!!!!!</h1>
</body>
</html>
```

サンプルコードを実行した結果が下記の通りです。
![画面収録-2021-09-11-17.43.13 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/4393ef74-4fbf-fd37-c1c4-cc56a193f193.gif)






また「href」属性に飛びたい外部の遷移先のURLを埋め込むことで、該当ページに遷移することもできます。
以下はインスタグラムに飛ぶサンプルコードです。


```index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Link Sample</title>
  <link rel="" href="style.css">
</head>
<body>
  <a href=""https://www.instagram.com/geek_comm2" class="btn">サンプル</a>
</body>
</html>
```


上記のサンプルコードを実行した結果が下記の通りです。
![画面収録-2021-09-11-17.19.26 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/6f729b6a-036c-4e89-92a1-9940ead36542.gif)



**インスタのボタンの作り方**
![インスタロゴ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/39ffcef9-62d5-e937-2770-3c53323cf3b1.jpeg)
こちらのインスタグラムのロゴを表示させる方法を紹介します。


**デザイン1：アプリアイコン風**
![bdra.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/2d17aaf1-cea8-9426-89c9-2ef062c08ca1.png)

一つ目は、iPhoneアプリのアイコン風のボタンです。アイコンは、FontAwesomeにより表示しています。

**サンプルコード**

```HTML
<a href="#" class="insta_btn">
  <span class="insta">
    <i class="fab fa-instagram"></i>
  </span> 
  Follow Me
</a>
```

```CSS
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}
```


**デザイン2：アイコンに影をつけてみる**
box-shadowをcssに追加することによりアイコンに影をつけ、カーソルを当てると浮かび上がるようにしてみます。
![スクリーンショット 2021-09-11 18.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/bb3d4900-1eae-cfef-2c8f-f7798b95299b.png)

**サンプルコード**
先程のコードに以下を加えてください。

```CSS
.insta_btn .insta{
  box-shadow: 0px 1px 2px rgba(25, 25, 25, 0.50);
  transition: .4s;
}
.insta_btn .insta:hover{
  box-shadow: 0px 2px 3px rgba(25, 25, 25, 0.50);
}
```



**デザイン3：文字にもグラデーションをのせる**
アイコンだけでなく文字もグラデーションの上にのせて、横長のボタンにしてみました。
![bdra-2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/bfa07990-f7c7-a3fb-dddb-980c6de1808e.jpeg)

**サンプルコード**

```HTML
<a href="#" class="insta_btn2">
  <i class="fab fa-instagram"></i> <span>Follow Me</span>
</a>
```

```CSS
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
```


**デザイン4：正方形ボタン**
![bdra-3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/26a04a89-64f7-1704-4443-a4b718544382.jpeg)
デザイン3を正方形にしてみたものです。今度はボタンにカーソルを当てると、アイコンがくるんと回転するようにしてみました。

**サンプルコード**

```HTML
<a href="#" class="insta_btn3">
  <i class="fab fa-instagram"></i><div>Follow Me</div>
</a>
```

```CSS
.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    position: relative;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
```


##**2-2.buttonタグ**

次に「button」タグについて紹介していきます。

**buttonタグの基本**
「button」タグでは、先程のaタグとは異なり、CSSでデザインしなくても、デフォルトでボタンとしてWebサイト上に表示することが可能です。
![スクリーンショット 2021-09-11 15.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/800e30ad-694f-fbd0-8db6-3e1fff731508.png)
「location.href=’URL’」で飛びたい先のURLを指定してあげることで、ボタンをクリックした際にその指定したURLに画面遷移することできます。



**サンプルコード**
全体像をサンプルコードで確認していきたいと思います。
遷移先となる「sample.html」はaタグで利用したサンプルコードと同じなため、割愛しています。


```index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Link Sample</title>
</head>
<body>
  <button onclick="location.href='sample.html'">サンプル</button>
</body>
</html>
```


サンプルコードを実行した結果が下記の通りです。
![画面収録-2021-09-11-17.54.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/5850096a-ab9e-c792-9083-3f4370c0e99e.gif)

今回はcssで装飾していないため、buttonタグのデフォルトの状態で表示されていますが、cssで装飾することも可能です。



##**2-3.inputタグ**
HTMLのボタンは「input」タグを利用することでも表示することが可能です。
「input」タグでは「type」属性に「button」を指定することでボタンを表示します。
![スクリーンショット 2021-09-11 16.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/bec36d4e-0e9e-3650-cb1f-ea9e50073ea0.png)
リンクとして実装するには、先程のbuttonタグと同様、「location.href=’URL’」で飛びたい先のURLを指定してあげることでできます。

input属性では閉じタグを指定しないため、ボタンに表示したいテキストは「value」属性に設定してください。


**サンプルコード**
inputタグでボタンを作成するサンプルコードの全体像を確認してみましょう。

```index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Link Sample</title>
</head>
<body>
  <input type="button" onclick="location.href='sample.html'" value="サンプル">
</body>
</html>
```

```sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>HELLO!!!!!!</h1>
  <input type="button" onclick="history.back()" value="戻る">
</body>
</html>
```

サンプルコードを実行した結果が下記の通りです。
![画面収録-2021-09-11-18.00.05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2009525/73d5c15e-b6d7-9747-7bc5-725f862e7a9a.gif)




#まとめ
今回は内容が盛り沢山だったと思います。
何度か読み返して復習しましょう!
みなさんお疲れ様でした！！