HTML入門トレーニング

外部サイトにリンクする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部のWebページにリンクする方法について学びます。
講師:
06:32

字幕

このレッスンでは a 要素を使って 現在見ている Web サイトの 外部の Web サイトにリンクを作成する 方法について学びます 一般に外部サイトへのリンクは 「外部リンク」と呼ばれます このようなリンクを作成することは 非常に簡単です 実際にサンプルファイルを使って 作業をしてみましょう 現在コードエディタでサンプルファイルの HTML を開いているところです HTML の中身を見てみましょう 見出しがあり 段落があります 段落には Visit lynda.com という文字列があり この文字列から lynda.com というWebサイトに リンクを張るのがよさそうです このように外部の Web サイトに リンクを張る場合は その Web サイトの完全な URL を 知る必要があります 完全な URL とは 実際にブラウザで その URL を表示してみましょう これが lynda.com の ウェブサイトです アドレスバーにはこの lynda.comの URL が表示されています 例えばページを遷移すると その新しいページの URL が アドレスバーに表示されます ある Web サイトから 外部の Web サイトにリンクするためには このように完全な URL を 知る必要があるのです 一旦戻り このトップページに対して リンクを張ることにしてみましょう アドレスバーに行って この URL をコピーします この時 表示されている文字列は www.lynda.com という文字列だけですが 実際にはこの前にも 文字列があります そのことについては 後ほど説明します ここでは一旦この文字列を コピーしておきましょう コードエディタに戻って コードを書きましょう この Visit lynda.com という文字列に対して リンクを張っていきます リンクを作成する際は ウェブサイトの内部のページに リンクを張る時と同様に a 要素を使います a 要素の href 属性 この属性に対して リンク先の URL を指定します ここでは一旦 空にしておき title 属性でこのリンク先への 説明を入力しておきましょう ここでは lynda.com という Web サイトを訪れますので Visit lynda.com という説明にしておきます 開始タグを閉じて 終了タグをこのリンクを張りたい 文字列の後ろ側に入力します これでこの a タグの開始タグと 終了タグで挟まれた この文字列に対して リンクを作成することができました さて 実際にこの href 属性で ジャンプする URL を指定するわけですが ここに先ほどコピーした URL を 貼り付けます さて 先ほどブラウザ上のアドレスバーには www.lynda.com という文字列しか 表示されていませんでした しかし 実際に貼り付けて表示されたのは 「http://」という頭の文字列と 後ろにスラッシュ「/」を含んでいます これは一体どういうことでしょうか 一般に Web サイトでは 「http」あるいは「https」という プロトコルが使われています プロトコルとは その Web ページと通信する際の 通信の方式のことです 通常の Web サイトでは 一般に「http」が使われています 「https」の場合は セキュリティの高い通信を行う時に 使われるプロトコルです 外部リンクを作成する時は このプロトコルが省略された形では 正常にリンクが機能しません 必ずこのプロトコルを含めた形で URL を記述するようにしてください ブラウザのアドレスバーでは http プロトコルなのか https プロトコルなのか 実際に表示が省略されている場合が ほとんどです しかし にアドレスバーの URL を コピーすると このようにプロトコルの部分も 一緒にコピーされます そのため このプロトコルを href 属性の値として 含めるように忘れないようにしましょう 最後のスラッシュ「/」については あまり重要ではありません あっても大丈夫ですし なくても問題なく動作します ここでは最上位のディレクトリを示す スラッシュ「/」になっていますが 特に必要ではありませんので 削除しておきます コードを保存し ブラウザで表示を確認してみましょう ブラウザをリロードして 実際にリンクが張られていることがわかります クリックすると 先ほどのlynda.comのウェブページへ 遷移しました ではこのリンクをクリックした時に 新しいタブでリンクを開くには どうすればよいでしょうか コードエディタに戻ります このように新しいタブを開きたい場合は target 属性を使います この target 属性の値に 「_blank」という値を指定します こうすることで このリンクをクリックした時に 新しいタブあるいはウィンドウで このリンクを開くという設定ができます 保存して再度ブラウザで確認してみましょう わかりやすいように すでに開いているタブを閉じておきます 現在開いているタブは 1つだけです このリンクをクリックすると 新しいタブで lynda.com このウェブページが開かれました このように target 属性を使うことで 新しいタブを使いながらリンクを開く という指定ができます このレッスンでは a 要素を使って 外部のウェブサイトに リンクする方法について学びました

HTML入門トレーニング

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

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

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

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

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