HTML入門トレーニング

ページ内の特定の部分にリンクする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アンカーを使って、HTMLの中の特定の箇所にリンクを作成する方法について学びます。
講師:
11:31

字幕

このレッスンでは アンカーを使ってHTMLの中の特定の箇所に リンクを作成する方法について学びます アンカーは “フラグメント識別子” とも呼ばれ 特定のセクションに ジャンプすることができるため HTMLの中での ナビゲーションを向上させるために 非常に役に立ちます 現在画面では ブラウザでサンプルファイルの fragments.htmという HTMLファイルを 開いているところです HTMLの中を見てみましょう 冒頭に “Section 1 にリンク” “Section 2 にリンク” “Section 3 にリンク” などといった ある特定の箇所に リンクをするための文字列が いくつか並んでいます その下には 少し縦に長い領域に Section 1 次に Section 2 最後に Section 3 が定義されています このようにしばしばウェブページは 用語集や辞書などのように 長いテキストをコンテンツとして 持つことがあります このように縦に長いページを作成した場合 ページの特定の箇所にリンクして 直接ジャンプできると便利です ここではこのように ページ内の特定の箇所に対して リンクを作成する方法について学びましょう コードエディタに切り替え 先程ブラウザで開いていた fragments.htm を開きます サンプルファイルの中にはもう一つ destination.htm という ファイルもありますが 先にこの fragments.htm から 対応していきます フラグメント識別子を使って ページ内にリンクを作成するためには id属性の指定が必要です HTMLの中を少しスクロールしてみましょう この h1 トップレベルの見出しの部分に topという値を id属性に指定しています さらに下に見ると セクションごとに h3 の見出しが定義されていますが ここに一つ目のセクションでは “one” 二つ目のセクションでは “two” 三つ目のセクションでは 何も定義されていません フラグメント識別子を使うには id属性が必要になりますので ここで 自分でコーディングをしてみましょう id属性を追加して その値に “three” という文字を入力します この時 id属性の値には注意が必要です 例えば id属性の中に 空白の値を含めることはできません また id属性はユニーク 一意の値である必要があるため 同じ id属性の値が ひとつのウェブページの中で 重複するような このような形は存在してはいけません 必ずそれぞれの id属性の値が 別々になるように指定をします また大文字と小文字は 区別されて扱われますので注意しましょう 特に問題がなければ 全て小文字で 値を設定しておくのが良いでしょう それでは実際にこれらの id属性に対して リンクを作成しましょう 冒頭のこのSection1から3に対して リンクと書かれている文字列に対して リンクを作成していきます ページ内のリンクも a要素 aタグ で作成します この時 href属性の値に対して id属性の値を指定します ここではSection1にリンクするため Section1の idに指定されている “one” という値を指定します この時 “one”という値を入力する前に 記号の#(シャープ) これをHTMLでは“ハッシュ”と呼びますが この#(シャープ)を入力します この#(シャープ)の後に リンクを指定したい id属性の名前 “one”を入力します また合わせてリンク先の説明を指定するため title属性で “section one” と入力しておきましょう リンクはこの “Section1にリンク” という 文字列に対して貼りますので 開始タグと終了タグで この文字列を挟むようにして マークアップしましょう 同じように2と3に対しても リンクを貼っていきます このaタグをコピーして貼り付けていきます 終了タグも忘れないように コピー&ペーストします そしてリンク先を “#one” ではなく “#two” そしてこちらは “#three” それぞれ書き換えます title属性の値についても 書き換えることを忘れないようにしましょう これを保存しブラウザで表示してみます 実際にリンクが貼られていますね まず “Section1にリンク” の文字をクリックしてみましょう 同じページ内で Section1という箇所に リンクが実行されました これは実際にはページは遷移せず ページの中でスクロールしているだけです アドレスバーをみると 同じHTMLから遷移をせず その中の “one” というidに 移動したことがわかるように URLの後ろに #(ハッシュ) フラグメント識別子が ついているのが分かります アドレスバーに注目しながら “Section2にリンク” の文字列をクリックしてみましょう 今度は “one” と書いてあった部分が “two” に変わり 実際にウェブページもSection2まで スクロールされました このようなページでは ページ全体が縦に長いため 一番下までスクロールした時に ページのトップに戻る ボタンがあると便利ですよね それを追加してみましょう コードエディタに戻り HTMLの一番下を表示します bodyタグの終了タグ ()の前に pタグで トップに戻るリンクを追加しましょう トップに戻るリンクは すでに上の部分に“top”という id属性を指定していますので “top”というid属性に対して フラグメント識別子を使って ジャンプするようにします 同じようにtitle属性についても “ページのトップへ” という値を使って このリンクがどういうリンクであるか どういうリンク先にとぶのか という概要を入力するようにします また リンクする文字列については “トップに戻る” という文字列を 入力しておきましょう 保存し ブラウザに戻って 再読み込みすると Section3の下に “トップに戻る” というリンクが 追加されています このリンクをクリックすると 一気に同じページの一番上まで 戻ることができます ここまで 同じページの中の特定の箇所に リンクをするため フラグメント識別子を使って リンクを作成してきました 次に 現在見ているウェブページとは 別のウェブページの特定の箇所に リンクを貼るための 方法を紹介しましょう コードエディタに切り替えて リンク先のページを確認してみます サンプルファイルには destination.htm ファイルが 含まれており この中には先程の fragments.htmと同じように “one” “two” “three” というidがそれぞれ セクションごとに 見出しに付けられています 同じidの値ですが 別のHTMLファイルですので これは問題ありません fragments.htmに戻り この文字列に対して destination.htmのSection2に リンクをしてみましょう 先程と同様で aタグを使って href属性を指定します このとき指定したいのは 同じディレクトリにある destination.htmですので まずファイル名を入力します そして この後 HTMLファイルの名前の後に 同じようにアンカー #(ハッシュ)をつけて idを指定します ここではSection2にリンクしたいため “#two” と入力しましょう 先程と同様 title属性も合わせて入れておきます ここでは “destination” という名前にしておきましょう そして aタグの開始タグと終了タグで 文字列全体を囲みます 保存しブラウザで確認してみましょう リンクをクリックすると このように destination.htmの Section2に リンクされていることがわかります アドレスバーを見てもきちんと HTMLは遷移しており かつ特定のidの箇所まで 遷移していることが分かります 最後に外部サイトの特定の箇所に ジャンプするリンクを作ってみましょう 例えば W3CのHTML5の仕様書を開きます これは非常に長い仕様書です そのため特定の箇所にリンクができると とても便利ですよね ちょうどこの フラグメント識別子に関する仕様は この仕様書の中に存在します この 5章6の9 ここにフラグメント識別子についての 仕様が書かれていますので ここに直接リンクを貼ってみましょう すでにこの仕様書では この見出しに対してidが適用されています ブラウザのディベロッパツールを使って 該当の要素を確認してみると このようにh4要素 見出しに対して “scroll-to-fragid”という idが付いていることが分かります 実際アドレスバーを見ても このhtmlのidに とんでいることが分かります ここではこのURL全体をコピーして リンク先として使用します エディタに戻り 該当の箇所にリンクを追加しましょう aタグで href属性の値に 先程コピーした値をペーストします そして titleは “W3C spec” と書いておきましょう a要素で この文字列を作成します 保存しブラウザで確認をしてみましょう このリンクをクリックすると W3CのHTML5の仕様書で かつこのフラグメント識別子の 該当の箇所までスクロールしました このように アンカー フラグメント識別子を使うことで 該当の箇所に直接とぶような リンクを作成することができます このレッスンでは アンカーを使ってHTMLの中の特定の箇所に リンクを作成する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。