どうもフリーランスプログラマのTakaです。
さて、前回でPC版に関してはサンプルページと同じような見た目になったと思うので、ここからはiPhoneやAndroidのようなスマホの画面にも対応するようにしていきたいと思うのですが、その前にこのタイミングでグローバルナビゲーションにページ内アンカーリンクを設定してみたいと思います。
ページ内アンカーリンクはよく使われるのでこれを機に覚えておきましょう！
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
そして、冒頭でも述べたように前回まででPC版に関してはほぼほぼ出来上がっている状態になっています。
ページ内アンカーリンクの設定
では、早速ページ内アンカーリンクの設定をしていきたいと思いますが、設定自体は普通にリンクを設定するのと同じなのでとても簡単です。
まずは、現状のグローバルナビゲーションのソースコードを見ていきたいと思います。
このような感じで、現時点ではaタグのhref属性には「#」しか入っていません。
リンクが設定されていないということですね
では、ページ内アンカーリンクを設定したい場合どうするのかと言うと、アンカー先のid名を「#」のあとに設定すればいいだけです。
前回までコンテンツセクションのコーディングをしてきましたが、各セクションにそれぞれ識別できるidを付与していたと思うのですが、そのid名をそれぞれ指定してあげればいいということになるので、今回は下記のように設定します。
aタグのhref属性に、「#」を頭にそれぞれのセクションに付与したid名が設定されているのが分かるかと思います。
これだけです。これでページ内アンカーリンクの設定は完了です。実際にファイルをブラウザで開いてグローバルナビゲーションをクリックをしてみてください。クリックしたボタンのセクションの頭にスクロールされるのが確認できると思います。
まとめ
ということで、今回はグローバルナビゲーションにページ内アンカーリンクを設定してみました。
まとめると、ページ内アンカーリンクの設定方法は、アンカーで飛ばしたい先のコンテンツにidを付与し、そのid名をaタグのhref属性に「#」を頭にして設定してあげればいいだけですね。
とても簡単ですね！
本記事のまとめ
- ページ内アンカーリンクの設定方法
- 各セクションに付与したid名をaタグのhref属性に指定する
てことで、今回はこんな感じで、ページ内アンカーリンクも設定できたので、次回からはスマホにも対応するべくレスポンシブコーディングの説明に入っていきたいと思います。
それでは今回はここまで！また！