href="#" とアンカーリンクを使いこなして、インタラクティブなWebページを作成しよう！
HTMLとハイパーリンク：href="#" の意味と使い方
ハイパーリンク は、Webページ内の別の場所や別のWebページへ移動するためのリンクです。HTMLでは a タグを使ってハイパーリンクを作成します。
a タグには href という属性があり、この属性にリンク先のURLを指定します。
href="#" は、同じページ内 の特定の場所へ移動するためのリンクを作成する場合に使用します。
# 記号は、HTMLドキュメント内のアンカーと呼ばれる場所にジャンプするための記号です。アンカーは id 属性を使って指定します。
例：
<a href="#top">ページの先頭へ戻る</a>
このコードは、ページ上部に id="top" というアンカーを設置し、そのアンカーへジャンプするためのリンクを作成します。
href="#" のその他の用途：
- ページ内スクロールをスムーズにする
- モーダルウィンドウを開く
- 特定の要素を非表示/表示する
- JavaScriptと組み合わせて様々な動作を実現する
注意：
- href="#" を使用すると、ページ全体の再読み込みは行われません。
- href="#" は、SEO (検索エンジン最適化) に影響を与えないと考えられています。
<a href="#top">ページの先頭へ戻る</a>
<h1 id="top">ページタイトル</h1>
<a href="#" onclick="openMyModal()">詳細はこちら</a>
<div id="myModal" style="display: none;">
</div>
<script>
function openMyModal() {
document.getElementById("myModal").style.display = "block";
}
</script>
<a href="#" onclick="hideElement()">この要素を非表示にする</a>
<p id="myElement">非表示にしたい要素</p>
<script>
function hideElement() {
document.getElementById("myElement").style.display = "none";
}
</script>
<a href="#" onclick="doSomething()">何かをする</a>
<script>
function doSomething() {
// ここに何か処理を書く
}
</script>
同じページ内の別の場所に移動する他の方法
JavaScriptを使って、ページ内の要素の位置やスクロール位置を直接操作することで、別の場所へ移動することができます。
<button onclick="scrollToBottom()">ページの最後までスクロールする</button>
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
スクロールバーを使う
ページにスクロールバーがある場合は、スクロールバーを使って目的の場所へ移動することができます。
アンカーリンクを使う
a タグに href 属性と id 属性を指定することで、アンカーリンクを作成することができます。アンカーリンクをクリックすると、ページ内の id 属性と一致する場所に移動します。
<a href="#section1">セクション1へ移動</a>
<h2 id="section1">セクション1</h2>
ボタンを使う
ボタンに onclick イベントを設定することで、JavaScriptのコードを実行することができます。JavaScriptコードの中で、ページ内の別の場所へ移動する処理を記述することができます。
<button onclick="location.href='#section2'">セクション2へ移動</button>
<h2 id="section2">セクション2</h2>
ページ内に複数のタブがある場合は、タブをクリックすることで別の場所へ移動することができます。
href="#" は、シンプルな方法で同じページ内の別の場所へ移動したい場合に便利です。
一方、JavaScriptを使うと、より複雑な動きを実現することができます。
html hyperlink
