LoginSignup
1
1

More than 1 year has passed since last update.

@miyusachi(永田 幸)

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

Last updated at Posted at 2021-09-11

title: 2-2. HTMLの基本
tags: HTML

author: GeekSalon

今回の学習

2-1. HTML/CSSの概要
2-2. HTMLの基本
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
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

また「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

インスタのボタンの作り方
インスタロゴ.jpeg
こちらのインスタグラムのロゴを表示させる方法を紹介します。

デザイン1：アプリアイコン風
bdra.png

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

サンプルコード

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

.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

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

.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

サンプルコード

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

.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
デザイン3を正方形にしてみたものです。今度はボタンにカーソルを当てると、アイコンがくるんと回転するようにしてみました。

サンプルコード

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

.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
「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

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

2-3.inputタグ

HTMLのボタンは「input」タグを利用することでも表示することが可能です。
「input」タグでは「type」属性に「button」を指定することでボタンを表示します。
スクリーンショット 2021-09-11 16.03.35.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

まとめ

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1