buttonタグ、inputタグでページ遷移する方法
buttonタグ、inputタグでページ遷移する方法をお伝えします。
りゅうはじめはaタグ以外での実装方法を知りませんでした。
buttonタグでの実装はよく使いますので、マスターしましょう。
この記事でわかること
- buttonタグでページ遷移する方法
- inputタグでページ遷移する方法
buttonタグでページ遷移する方法
buttonタグでページを遷移する方法は、buttonタグにonclick属性を使用します。
onclick属性は、ユーザが要素をクリックした際に起動する処理を指定するイベント属性です。
onclick属性に以下のようにリンクを設定することで、ページ遷移するボタンの実装が可能です。
<button type="button" onclick="location.href='（ページのパスまたはURL）'">遷移</button>直前のページに戻る場合は、以下のように記述します。
<button type="button" onclick="history.back()">戻る</button>Buttonタグには、疑似要素（:before,:after）が使用できるので、ボタンに矢印をつけたり、マウスホバー時の動きをつけることが可能です。
See the Pen button by 竜貴族 (@czuqbsxm-the-selector) on CodePen.
<button type="button" onclick="location.href='https://ryuryuweb.com/'" class="button">ホームへ</button>.button {
display: block;
color: #fff;
background-color: #0B93A8;
border: none;
border-radius: 8px;
padding: 8px;
position: relative;
text-align: center;
text-decoration: none;
width: 200px;
cursor: pointer;
transition: all 0.3s;
}
.button::after {
/* 擬似要素で矢印アイコンをつくる */
content: "";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%) rotate(45deg);
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
display: inline-block;
width: 10px;
height: 10px;
transition: all 0.3s;
}
.button:focus, .button:hover {
opacity: 0.8;
}
.button:focus::after, .button:hover::after {
right: 15px;
}inputタグでページ遷移する方法
inputタグでページを遷移する方法は、buttonタグと同じでonclick属性を使用し、location.href=’（ページのパスまたはURL）’にリンクを設定します。
<input type="button" onclick="location.href='（ページのパスまたはURL）'" value="遷移">フォームの送信ボタンを押すと、送信完了ページに遷移するといった実装ができます。
buttonタグ同様にinputタグでも直前のページに戻るボタンも作成できます。
<input type="button" onclick="history.back()" value="戻る">ただし、inputタグで実装できるボタンはbuttonタグでも同様の機能を持った実装が可能です。
buttonタグと違いinputタグでは疑似要素が使えないため、デザインの自由度が高いbuttonタグを使用するケースが多いです。
まとめ
buttonタグ、inputタグのページ遷移の方法について解説しました。
onclick属性を使用してページ遷移ができます。
buttonタグの方が、疑似要素を使ったデザイン性のあるボタンの実装が簡単なので、buttonタグ使用をおすすめします。
ご参考になれば幸いです。
web制作者におすすめの参考書です。
こちらの参考書でCSS設計を学び、保守、管理しやすいサイト制作スキルを身につけましょう！！
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/38baa31a.a59d6e19.38baa31b.64c61b2f/?me_id=1213310&item_id=19916545&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1731%2F9784297111731.jpg%3F_ex%3D300x300&s=300x300&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
web制作者はWordPressブログを始めましょう！
以下の記事で、WordPressブログをやるメリットについて解説しています。
コメント