HTML入門トレーニング

上階層のページにリンクする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
a要素を使って、Webサイト内の上の階層のページにリンクする方法について学びます。
講師:
08:32

字幕

このレッスンでは a 要素を使って ウェブサイト内の上の階層のページに リンクする方法について学びます 現在 コードエディターでは サンプルファイルの about.htm を開いているところです このウェブサイトの階層構造を 事前に確認しておきましょう まずルート ベースとなるディレクトリには links.htm と same.htm があります その中には info ディレクトリ があり 今開いている about.htm は この info ディレクトリ の中にあります info ディレクトリ の中には about.htm と同じように extras ディレクトリがあり この extras ディレクトリの中には resources.htm があります まずはこの about.htm から 下の階層である resources.htm に対して リンクを張ってみましょう この文字列に対して リンクを張ってみます 下の階層にリンクを張るためには a 要素を使って href 属性を指定する時に ディレクトリの名前を入力する そして その後ろにスラッシュ「/」を書く というルールでした 最終的にリンクしたいファイルは resources.htm でしたので ファイル名を入力し リンクを張りたい文字列の前後に a タグの開始タグと 終了タグを入力します 一旦保存し ブラウザーでリロードして確認してみると resources.htm にリンクが張られており 実際に機能していることが確認できます それではコードエディターに戻って 今度は about.htm から 上の階層にある links.htm に リンクを張ってみましょう このlinks.htmという文字列の部分に リンクを張ってみます 同じように a タグを使って href 属性の値に指定します この時 現在いるウェブページの 現在いる階層より上の階層に行きたい時は 記号のドット 「.」 を 2 つ並べた後に スラッシュ 「/」 この 「.」 2 つと 「/」 この一連の文字列によって 1 つ上の階層という指定になります 現在いる about.htm の階層より 1 つ上の階層にある links.htm にリンクを張るため 「../」 そして links.htm こういう指定を書いてあげると 1 つ上の階層にある links.htm という指定になります リンクを張りたい文字列の前後に a タグの開始タグと終了タグを指定します 保存してブラウザーで 再読込みして確認してみましょう links.htm のリンクをクリックすると 上の階層の links.htm に遷移できました アドレスバーを見ると ディレクトリが 遷移できていることがわかります コードエディターに戻りましょう このように上の階層に対しては 「../」 という指定をすることで 現在いる階層から 1 つ上の階層へ 移動することができます このように 現在いるディレクトリから 遷移したいウェブページへのパスを 現在いるウェブページを基準に考えることを 「相対パス」という風に呼びます 今追加した 2 つの a 要素に title 属性を追加しておきましょう title 属性はブラウザーだけではなく スクリーンリーダーなどに リンク先の情報を伝えるために 有用な情報になります 「1 つ上のディレクトリへ」 という文字を入力しておきましょう こちらのリンク先には title 属性に 1 つ下のディレクトリへ 行くリンク先である このように情報を追加しておきます 一旦保存しておきましょう それではこの about.htm より 1 つ下の extras ディレクトリの中にある resources.htm を開いてみます resources.htm を開きました ここから 1 つ上の階層である about.htm あるいは 2 つ上の階層である links.htm に それぞれリンクを張ってみます まず 1 つ上の階層にリンクを張るには 先ほどと同様に a タグの href 属性の値に 「../」 で 1 つ上の階層を指定します そしてファイル名 これは about.htm と入力し 同じく title 属性も 入力しておきましょう ここでは 1 つ上のディレクトリへ 行くという情報を入力しておきます そしてリンクを張りたい文字列の前後に 開始タグと終了タグを書きます これで resources.htm を基準として 1 つ上のディレクトリ つまり info ディレクトリ の中の about.htm に リンクを張ることができました 続いて 2 つ上のディレクトリ resources.htm から見ると 2 つ上のディレクトリにある links.htm にリンクを張ってみます 同じように a 要素で リンクを張ります href 属性の中の値は 先ほどと同様に 「../」 これで1つ上のディレクトリ という指定になります ここでは 2 つ上のディレクトリを 指定しますので さらにもう一度 「../」 こちらを入力します これにより 2 つ上のディレクトリ 現在表示している resources.htm より 2 つ上のディレクトリであるという 指定になります そして同様に links.htm というファイル名を指定してあげると 現在いる resources.htm から 2 つ上のディレクトリにある links.htm こちらにリンクを張る という指定になります 同じように title 属性で リンク先の情報を記述しておきましょう 2 つ上のディレクトリへ 行くリンクである このような情報を追加しておきます 開始タグと終了タグは リンクを張りたい文字列の 前後に書いておきます ここまでを保存して ブラウザーでリロードして確認してみましょう 現在表示しているのは 2 つのディレクトリの下にある resources.htm です 1 つ上のディレクトリの about.htm へのリンクを クリックすると 実際に遷移できていますね [戻る] ボタンで戻って 2 つ上のディレクトリである links.htm にリンクを張った このリンクについても 正常に動作しています コードエディターに戻りましょう このように a 要素を使って ウェブサイト内のページにリンクをする時は 現在のページを基準として リンク先のページがどこにあるのか 上の階層にある場合は このように 「../」 を指定して 上の階層に 下の階層にある場合は このようにフォルダー名を指定して 「/」 同じ階層にある場合は ファイル名 このように階層を意識しながら リンクを張ることが重要になります ここではすべて文字列に対して リンクを張っていますが もちろん画像など 他の要素に対して リンクを張ることもできます このレッスンでは a 要素を使って ウェブサイト内の上の階層のページに リンクする方法について学びました

HTML入門トレーニング

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

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

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

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

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