問題
15アンカーリンクを設定しよう
アンカーリンクとは、ホームページ内の指定の場所に移動できる文字リンクを指します。目次などで使われるユーザーが快適にホームページを見るための必須機能です。
HTML/CSSの問題に挑戦しよう！
問題
「アンカーリンクを設定しよう」
CSSのみでアンカーリンクを実装しましょう。
また、スムーススクロールの実装も併せて行いましょう!
※CSSのみのスムーススクロール実装はGoogleChrome/FireFoxのみでしかできません。
見本動画を参考にして実装してください。
あらかじめエディタに書くコード
<ul>
<li><a href=">タイトルA</a></li>
<li><a href=">タイトルB</a></li>
<li><a href=">タイトルC</a></li>
</ul>
<section>
<h2 id="titleA">タイトルA</h2>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
</section>
<section>
<h2 id="titleB">タイトルB</h2>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
</section>
<section>
<h2 id="tilteC">タイトルC</h2>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
<p>じゅげむじゅげむ</p>
<p>ごこうのすりきれかいじゃりすいぎょのすいぎょうまつ</p>
<p>うんらいまつふうらいまつくうねるところにすむところ</p>
<p>やぶらこうじのぶらこうじ</p>
<p>ぱいぽぱいぽぱいぽのしゅーりんがん</p>
<p>しゅーりんがんのぐーりんだいぐーりんだいの</p>
<p>ぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
</section>
¥HTML¥
期待する画面
解答と解説（アンカーリンクを設定しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
アンカーリンクの設定は、メニュー項目などにaタグを入れ
その中のhrefに付与されたタイトルのidなどを設定する事で実現します。
またhtmlタグにscroll-behavior: smooth;を
付与する事でアンカーリンクでスムーススクロールが実現できます。
※scroll-behavior: smooth;は現在 GoogleChrome,FireFoxのみの対応となっている様なのでご注意を。
補足
アンカーリンクの設定は馴染みのあるaタグを使用するので、簡単に設定できたのではないでしょうか。
idで紐づけるのでid名の前に#を付け忘れないように注意しましょう。
よく使用されるシーンとしては、冒頭で申し上げた目次のほか、ページ下部にあるトップページへのリンクなどにも使用されています。
トップページに遷移させる場合は、headerにidを付与してheaderのidを指定するか、#を指定すればOKです。
