おはようございます、hamatakBlogです！
今回は、HTML、Javascriptを使っての画面遷移についてご紹介していきます！
ん。えっと、画面遷移ってなんですの？
画面遷移って簡単に言うと、Webページから別のWebページに移動することです！
この動作って、Webサイト上では実は当たり前のように使われている技術なんですよ！
これができるだけで、最低限のそれっぽいWebサイトを作ることができます！
また今回の記事は、はてなブログを利用している方にもおすすめで、ブログをカスタムしてみたいけど、やりかたがあんまりよくわかんない！って思ってるそこのあなた！
ぜひ本記事を参考にしていただけたら幸いです！！
それでは、学習スタート！！
HTMLを使ってリンクを作り画面遷移してみる
まずは、HTMLだけで画面遷移を行う方法をご紹介します！
HTML
イメージはこちら⇓
皆さん、見たことがあるのではないでしょうか！
いわゆるリンクってやつです！！
この青文字をクリックすると、遷移するようになっています！！
- <a></a>
aタグ：href属性を付けることで、画面遷移リンクを作成する。 - href="任意のURL"
href属性：任意のURLを設定することで、クリック時にURLに画面遷移する。
JavaScriptを使って画面遷移してみる
HTMLだけでも、遷移することはできますが様々な条件がある状態で、画面遷移したい場合などはJavaScriptで処理を実装します！
HTML
function butotnClick(){
// location.hrefにURLを代入することで画面遷移する
location.href = "https://hamatakeblog.hatenablog.com";
}
let button = document.getElementById('btn');
button.onclick = butotnClick;
ボタンをクリックしたときに、画面遷移を行います。
JavaScript関数の書き方は、前の記事で紹介しているので、こちらからどうぞ！⇓
- location
表示しているWebページの位置情報を保持しているオブジェクト。 - location.href
表示しているWebページのURLを保持しているプロパティ。ここを変更することで画面遷移する。
たとえば、この関数内にチェックボックスがチェックされている場合に画面遷移をする、チェックされていない場合アラートを出すといった処理を実装することができます！
実用的な実装を考えると、JavaScriptを用いた方法を覚えたほうがいいですね！
はてなブログに画面遷移する処理を作る
今回ご紹介した処理は、実はhamatakeBlogの画面ヘッダー部分でも使用している処理なんです！
実際にこのボタンをクリックするとちゃんと画面遷移していることが確認できると思います！
ちなみにここでは、URLにカテゴリーのURLを指定することで遷移を行っています！
はてなブログのカスタマイズについては、また別の記事でご紹介しますので、お楽しみに！
ということで以上、画面遷移の方法をご紹介しました！
これだけ簡単な処理とWebデザインだけそれっぽいWebサイトが作れます！
ぜひサンプルを模写して実装を試してみてください！
以上ご視聴ありがとうございました！
|
|
