HTML入門トレーニング

同階層、下階層のページにリンクする

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

ぜひご覧ください。

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

字幕

このレッスンでは、a 要素を使って ウェブサイト内のページに リンクをする方法について学びます リンクを作ることは非常に簡単です リンクを作る際 最も使われる方法は ご自身のウェブサイトの中のページに リンクをすることでしょう 実際にサンプルファイルを使いながら ウェブサイトの中のウェブページに リンクを作っていきましょう 現在 コードエディターで サンプルファイルを開いているところです 実際に リンクを作っていく前に このウェブサイトが どのようなディレクトリ構造になっているか ということを確かめておきましょう 画面の左側には 現在開いているウェブページ links.htm というファイルと その他の html ファイル あるいは infoディレクトリというディレクトリ さらにそのディレクトリの中に extras というディレクトリなど 様々なhtmlが違うディレクトリ構造にある ということが示されています 現在開いている links.htm と 同じディレクトリには same.htm というファイルもあります 実際に links.htm から same.htm にリンクを張ってみましょう 現在開いている html の 中身を確認していきます body 要素の中には 見出しが一つ そしてもう一つ その下に段落が 2 つあります ここでは同じディレクトリ 現在開いている links.htm と 同じディレクトリにある same.htm にリンクをしたいため このsame.htm いう文字列に対して リンクを張っていきます リンクを張るためには a 要素 タグを使います 左向きの山型かっこ [<] に続いて a 要素 a タグを記述します そしてこのリンク要素から どのウェブページにリンクを張りたいか そのリンクのジャンプ先を href 属性の値として指定します ここでは href 属性の値は 同じディレクトリにある same.htm ですので そのままファイル名の same.htm を入力し 開始タグを閉じます これで a タグの開始タグから 終了タグで挟まれた この文字列に対して このウェブページ links.htm と同じディレクトリにある same.htm へリンクを張ることができました さらにこれに対して 属性を一つ追加しましょう title 属性です title 属性を使うと このリンクがどのようなリンクか リンク先は一体どのようなリンク先なのか という情報を与えることができます これはブラウザー自体に 表示されるわけではありませんが スクリーンリーダーなど 他のデバイスに対して 有用な情報を与えることができます 実際に title 属性を記述していきます title 属性はそのまま 「title」という綴りを入力し この値に対してリンク先の情報を与えます ここでは同じディレクトリの中の リンク先を示していますので 「同じディレクトリへ」 という文字を入力しておきます ここまでを保存して ブラウザーで表示してみましょう リンクができていますね 実際にクリックすると same.htm に飛ぶことができました 戻って 次は resources.htm に リンクを張ってみましょう コードエディターに戻ります 次に resources.htm に リンクを張っていくわけですが この時 ディレクトリ構造について 理解する必要があります リンクを張ろうとしている 現在の links.htm は ここにあります そしてリンクの対象である resources.htm は info ディレクトリの下の extras ディレクトリの下にあります そのためこの same.htm と同じように ファイル名だけを指定してリンクしても 正しくリンクすることができません 必ず現在の links.htm から見て どのようなパスの中にあるか そういう情報を指定する必要があります このようなパスを 「相対パス」という風に呼びます 相対パスは 現在見ているウェブページを 基準としたパスです そのため resources.htm へのパスは 現在いるこのディレクトリから見ると info ディレクトリの下の extras ディレクトリの下の resources.htm という情報を リンクに与えてあげる必要があります 実際に記述していきましょう a タグを使ってリンクを張るところまでは 同じです href 属性に対して 実際にディレクトリを指定します 現在使っているコードエディター Brackets では 現在ウェブページが置かれている ディレクトリ構造や 他のファイルを認識し このように候補を表示してくれます リンクを張りたい resources.htm は info ディレクトリの下にありますので ここでは info ディレクトリを選びます ディレクトリを指定する時は ディレクトリの名前の後に スラッシュ「/」を入力します そしてさらに info ディレクトリ の下には extras ディレクトリがありますので ここでは extras ディレクトリを指定します このように 2 つディレクトリを 下がる場合 2 階層下に行く場合は info ディレクトリ の下 extras ディレクトリの下 というように 「/」を都度 入力していきます そして最後に この extras ディレクトリの中にある resources.htm を指定しますので ファイル名を入力します これで正しいパスが 入力できました 終了タグは リンクを張りたい文字列の 後ろの部分に書いておきましょう そして上と同じように title 属性を入力します ここでは 同じディレクトリではなく 子ディレクトリへ行きますので 「子ディレクトリへ」 という文字列を入力しておきます 一旦セーブして ブラウザーに移って リロードして確認してみましょう resources.htm という文字列に リンクが張られています クリックすると 実際に子ディレクトリの中にある resources.htm に リンクを張ることができました それでは ディレクトリ構造を確認しながら もう一度リンクがきちんと張られているかどうか 確認してみましょう 現在表示しているのは links.htm ファイルです これと同じディレクトリにある same.htm には このように特にディレクトリを入力せず ファイル名のみを入力して リンクを作成しました そうすることで 同じディレクトリにある same.htm にリンクを張れています もう一つ links.htm から info ディレクトリ の下の extras ディレクトリの下の resources.htm にリンクを張りました html ではこのように「/」を使いながら ディレクトリ名を指定して 最後にリンクしたい html ファイルの名前を 入力します こうすることで 子ディレクトリの中にあるhtmlに対しても リンクを張ることができました このレッスンでは a 要素を使って ウェブサイト内のページに リンクする方法について学びました

HTML入門トレーニング

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

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

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

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

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