HTMLでボタンをクリックすると別のページにするようにしたいです。

ブログをw3.cssとHTMLで作ろうと思っているのですが、HOMEのページはできました。しかしここから、各々のブログのRead Moreを押してそのブログに飛びたいのですがどこにどのようなコードを追加すればいいかわかりません。あと、HOME画面の下のNextも押して次の画面に行きたいのでそこも教えてください。

HTML
1<!DOCTYPE html>
2<html>
3<title>00000 Blog</title>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<link rel="stylesheet" href="css/w3.css">
7<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
8<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
9<style>
10body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
11</style>
12<body class="w3-light-grey">
13
14<!-- w3-content defines a container for fixed size centered content, 
15and is wrapped around the whole page content, except for the footer in this example -->
16<div class="w3-content" style="max-width:1400px">
17
18<!-- Header -->
19<header class="w3-container w3-center w3-padding-32"> 
20  <h1><b>Holidays in August</b></h1>
21  <p>Welcome to the blog of <span class="w3-tag">00000</span></p>
22</header>
23
24<!-- Grid -->
25<div class="w3-row">
26
27<!-- Blog entries -->
28<div class="w3-col l8 s12">
29  <!-- Blog entry -->
30  <div class="w3-card-4 w3-margin w3-white">
31    <img src="images/10/c" alt="Nature" style="width:100%">
32    <div class="w3-container">
33      <h3><b>August 10</b></h3>
34      <h5>study <span class="w3-opacity">August 10, 2021</span></h5>
35    </div>
36
37    <div class="w3-container">
38      <p>Here, I studied programming. Especially, I study C language. We focused on pointers, functions, and memory usage, as these are very difficult to understand. I also want to learn Java and Python, since Java can be used for Android and Python can be used to implement algorithms.</p>
39      <div class="w3-row">
40        <div class="w3-col m8 s12">
41          <p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE »</b></button></p>
42        </div>
43        <div class="w3-col m4 w3-hide-small">
44          <p><span class="w3-padding-large w3-right"><b>Comments  </b> <span class="w3-tag">0</span></span></p>
45        </div>
46      </div>
47    </div>
48  </div>
49  <hr>
50
51  
52<!-- END BLOG ENTRIES -->
53</div>
54
55<!-- Introduction menu -->
56<div class="w3-col l4">
57  <!-- About Card -->
58  <div class="w3-card w3-margin w3-margin-top">
59  <img src="images/aboutme.png" style="width:100%">
60    <div class="w3-container w3-white">
61      <h4><b>About me</b></h4>
62      <p>I am 00000. I made this blog for the purpose of blogging about how I spent my holiday in August.</p>
63    </div>
64  </div><hr>
65 
66  <!-- Labels / tags -->
67  <div class="w3-card w3-margin">
68    <div class="w3-container w3-padding">
69      <h4>Tags</h4>
70    </div>
71    <div class="w3-container w3-white">
72    <p><span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">study</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Holidays</span>
73      <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">playing</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Code</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">DIY</span>
74      <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Games</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Security</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">PC</span>
75      <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">News</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Fashion</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Mobile</span>
76      <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Sports</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Games</span>
77    </p>
78    </div>
79  </div>
80  
81<!-- END Introduction Menu -->
82</div>
83
84<!-- END GRID -->
85</div><br>
86
87<!-- END w3-content -->
88</div>
89
90<!-- Footer -->
91<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
92  <button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Previous</button>
93  <button class="w3-button w3-black w3-padding-large w3-margin-bottom">Next »</button>
94  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
95</footer>
96
97</body>
98</html>
99

行動規範の内容に同意します

回答2件

ベストアンサー

他の回答にあるようにa要素でリンク張って、見た目はCSSで装飾するのが良いと思います。

たとえば・・・

HTML
1<a href="ＸＸＸＸ.html">リンク</a>

CSS
1a {
2  color: #fff;
3  background: #5876a3;
4  padding: 10px 30px;
5  display: inline-block;
6  border-radius: 5px;
7  text-decoration: none;
8}

どうしてもbuttonを使いたいのであれば、

HTML
1<button type="button" onClick="location.href='ｘｘｘｘ.html'">リンク</button>

質問内容を挿げ替えるなら別質問で。

当初の「HTMLでボタンをクリックすると別のページにするようにしたいです。」について回答したのにノーリアクションのまま質問本文を別件に挿げ替えないで下さい。
「HTMLでボタンをクリックすると別のページにするようにしたいです。」についてはお答えしたので、解決済みにした上で別途質問し直すべきです。
（質問のタイトルと内容が不一致なのでこのままほっといても回答付かないと思いますよ）

投稿2021/07/15 08:34

編集2021/07/17 12:05