HTMLスキル - 第7章 Lesson3

ページ内ジャンプさせるリンクの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ページ内でジャンプさせるリンクを、<a>タグを使って作成する方法について、初心者向けに解説しています。



この動画で学べること

・id名を使って、特定の場所にリンクを飛ばす方法



id名を使って、特定の場所にリンクを飛ばす方法

今回は、同じ文章の中の特定の場所まで飛ばす方法を見ていきましょう。
飛ばしたい場所に印を付けるため、id名を使って名前をつけていきます。
「検索サービスとは」をクリックして飛ばしたい文章の<p>タグにはid名「about」を、
「検索サービスの使い方」をクリックして飛ばしたい文章の<p>タグにはid名「howto」を、つけました。




 <p id="about">
<strong>検索サービスとは</strong><br/>
キーワードを入力して検索すると、そのキーワードに関連するウェブサービスを探しだして表示してくれるシステムのこと。
</p>
<p id="howto">
<strong>検索サービスの使い方</strong><br/>
各サービスにアクセスして、希望のキーワードを入力後、検索する。
</p>




ではこの2つの文章に飛んでくるように設定していきましょう。
クリックする<h2>タグに<a>タグを書き、href属性を追加します。
href属性の値には、先ほど<p>タグにつけたid名を入力していきます。



 <h2><a href="#about">検索サービスとは?→</a></h2>
<h2><a href="#howto">検索サービスの使い方→</a></h2>



ここまでできたら 、保存してブラウザで見てみましょう。
見出し2に指定した文字がリンクになり、クリックするとid名で印をつけたところに飛んでいくようになりました。