問題

15
HTML_CSS

アンカーリンクを設定しよう

アンカーリンクとは、ホームページ内の指定の場所に移動できる文字リンクを指します。目次などで使われるユーザーが快適にホームページを見るための必須機能です。

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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

アンカーリンクの設定は、メニュー項目などにaタグを入れ
その中のhrefに付与されたタイトルのidなどを設定する事で実現します。

またhtmlタグにscroll-behavior: smooth;を
付与する事でアンカーリンクでスムーススクロールが実現できます。

※scroll-behavior: smooth;は現在 GoogleChrome,FireFoxのみの対応となっている様なのでご注意を。

補足

アンカーリンクの設定は馴染みのあるaタグを使用するので、簡単に設定できたのではないでしょうか。
idで紐づけるのでid名の前に#を付け忘れないように注意しましょう。

よく使用されるシーンとしては、冒頭で申し上げた目次のほか、ページ下部にあるトップページへのリンクなどにも使用されています。
トップページに遷移させる場合は、headerにidを付与してheaderのidを指定するか、#を指定すればOKです。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET