HTML入門トレーニング

ダウンロード可能なリソースにリンクする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLからZIPやPDFなどの外部リソースにリンクを作成する方法について学びます。
講師:
07:51

字幕

このレッスンではHTMLから ZIPやPDFなどの外部リソースに リンクを作成する方法について学びます 時折HTMLからZIPやPDFなどの 外部リソースをダウンロードする機能を 提供したいことがあるでしょう このような時もaタグ a要素を使って特定のリソースにリンクをはり そのファイルをダウンロードするという 機能を提供することができます 現在画面ではコードエディタで サンプルファイルを開いているところです 現在開いているのはresource.htm というhtmlファイルです このWebサイトの中には アセットディレクトリという ディレクトリの中に syntax.pdfというPDFファイルと syntax.zipという ZIPファイルがあります 実際にこのhtmlファイルから これらのリソースにリンクを作成し ユーザーにファイルをダウンロードして もらうようにしてみましょう htmlの中身を確認すると 見出しがあり その下に通常の段落があることが分かります 段落の中にはHTML構文リファレンスを ダウンロード!と書いていますので このHTML構文リファレンスという 文字列に対して このZIPファイルへのリンクを 作成してみましょう 実際に記述していきます リンクを貼るためには通常のリンクと 同じようにaタグを使います そしてhref属性でリンク先を指定します ここではresource.htm 自分自身のhtmlを基準として 相殺パスでリンク先を記述しますので ZIPファイルへのリンク先は まず_assetというこのディレクトリ名を 指定する必要があります そのためこのhref属性の値に _assetを入力し ディレクトリを示す/(スラッシュ) こちらを忘れないように入力します この後ろに指定したいsyntax.zip というファイル名を指定するのです 現在使っている コードイッカーのBracketsでは このように現在のhtmlを基準として どのようなディレクトリや ファイル名があるのか このように自動的に検出して表示してくれます ここではsyntax.zipに リンクを貼ります 開始タグを閉じて 終了タグについては このHTML構文リファレンスという文字の 後ろに終了タグを配置します これによってこの文字列に対して aタグでリンクを作成することができました 実際にこの動作を確認してみましょう 保存してブラウザをリロードすると HTML構文リファレンスという文字列に リンクが貼られています このリンクをクリックすると ZIPファイルがダウンロードされました このようにHTMLから何らかのリソースに リンクが貼られている場合 ブラウザやサーバーは自動的にそのファイルの ファイルの種類を認識し ZIPファイルであれば ダウンロードというように ファイルの種類に合わせて その挙動を振り分けています この場合ZIPファイルでしたので 自動的にダウンロードするという 挙動になっています それでは今度はPDFファイルに リンクを貼ってみましょう コードエディタに戻って このZIPファイルの拡張子の部分を pdfに変更します 先ほど確認したように ZIPファイルと同じディレクトリにある PDFファイルへのリンクを貼りました ファイルの名前はsyntaxのままです 先ほどは追加しませんでしたが ここではこのPDFのリンク先が なんであるかということが分かりやすいように title属性も追加しておきましょう HTML構文リファレンスへのリンクである これを示すためにtitle属性で 値を入力しておきます 保存し ブラウザで再読み込みをして 確認してみましょう 現在はZIPファイルではなく PDFに対してリンクが貼られています リンクをクリックすると このようにブラウザ上で PDFファイルが表示されました 先ほど申し上げたとおり 今はリンク先がPDFでしたので ブラウザは自動的にPDFを表示するという 動作を選択したことになります しばしばこのようにPDFにリンクを貼る時 直接ブラウザ上で閲覧するのではなく ファイルをダウンロードさせたい 場合があります そのような場合につかえる属性があります コードイッカーに戻りましょう ユーザーにこのPDFファイルを ダウンロードさせたい場合は 属性に対して downloadという属性を追加します このdownloadという属性は 値を省略することができます 値を省略する場合はこの=(イコール)や "(ダブルコーテーション) そしてこの値の部分を全て省略 書かずにdownloadという 属性の名前だけ記述します こうすることでこのPDFファイルに対して すぐダウンロードして下さいという 指定をすることができます 実際に保存してブラウザで確認してみましょう 先ほどと同じようにPDFに対して リンクが貼られていますが download属性が指定されています リンクをクリックしてみましょう 先ほどはブラウザ上で PDFが表示されましたが 今度はZIPファイルと同じように PDFファイルがダウンロードされました このようにdownload属性を使うことで 直接ファイルをダウンロードするように 指定することができます 先ほどdownload属性は値を省略できる というふうにお伝えしました 実際には値を記述することもできます 値を記述するとダウンロードする ファイル名を記述できるのです 通常ダウンロードするファイル名は リンクしたこの実際のファイル名で ダウンロードされますが このdownload属性で ファイル名を指定すると そのファイル名でこのsyntax.pdfをダウンロードせよ という指定をすることができます ここではHTML_syntaxという 新しいファイル名で このPDFファイルをダウンロードするように 指定を加えてみましょう 元々のファイル名はsyntaxという ファイル名ですが 新しくダウンロードされるように指定した名前は HTML_syntaxです 保存してブラウザに切り替えて 再読み込みをしてリンクをクリックしてみます ダウンロードされたファイルの名前は HTML_syntax.pdfに なっていることが分かります このように実際に Webサーバー上にあるファイル名とは 別のファイル名でファイル名を ダウンロードさせることができます 実際このように外部リソースに対して リンクを貼った場合 その挙動はブラウザの設定や サーバーの設定に依存することもあります そのためお使いのWebサーバーやブラウザで どのような挙動になるかは 様々なファイルの種類に対して リンクを貼ってみて 確認をしてみるとよいでしょう このレッスンではHTMLから ZIPやPDFなどの外部リソースに対して リンクを作成する方法について学びました

HTML入門トレーニング

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

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

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

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

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