TOP 無料問題集 無料コンテンツ コース一覧
ログイン
問題15

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

HTML_CSSの問題 HTML_CSS

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

アイコン画像

問題15：アンカーリンクを設定しよう

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登録 LINE登録

タグアイコン解答ソースコード

              <ul>
  <li><a href="#titleA">タイトルA</a></li>
  <li><a href="#titleB">タイトルB</a></li>
  <li><a href="#tilteC">タイトル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¥
            
              html {
  scroll-behavior: smooth;
}
body {
  padding: 48px;
}
section {
  margin-bottom: 60px;
}
ul {
  display: flex;
  margin-bottom: 32px;
}
li {
  margin-right: 16px;
  list-style: none;
}
h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}
¥CSS¥

コメントのアイコン解説

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

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

※scroll-behavior: smooth;は現在 GoogleChrome,FireFoxのみの対応となっている様なのでご注意を。
ログインして解答を見る

コメントのアイコン補足

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

よく使用されるシーンとしては、冒頭で申し上げた目次のほか、ページ下部にあるトップページへのリンクなどにも使用されています。
トップページに遷移させる場合は、headerにidを付与してheaderのidを指定するか、#を指定すればOKです。
完了にする！
BACK > ハンバーガーメニューのアイコン実装 へ
NEXT > タイトル毎に固定ヘッダーを変更しよう へ
コース一覧に戻る
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる