Linux Professional Institute Learning Logo.
main contentにスキップ
  • ホーム
    • 全てのリソース
    • LPI学習教材
    • コントリビューターになる
    • Publishing Partners
    • Publishing Partnerになる
    • About
    • FAQ
    • コントリビューター
    • Roadmap
    • 連絡先
  • LPI.org
032.3 レッスン 1
課題 031: ソフトウェア開発とWebテクノロジー
031.1 ソフトウェア開発の基本
  • 031.1 レッスン 1
031.2 Webアプリケーションのアーキテクチャ
  • 031.2 レッスン 1
031.3 HTTP の基礎
  • 031.3 レッスン 1
課題 032: HTMLドキュメントマークアップ
032.1 HTMLドキュメントの構造
  • 032.1 レッスン 1
032.2 HTMLのセマンティックスとドキュメント階層
  • 032.2 レッスン 1
032.3 HTMLにおける参照と埋め込みリソース
  • 032.3 レッスン 1
032.4 HTMLフォーム
  • 032.4 レッスン 1
課題 033: CSSコンテンツ スタイリング
033.1 CSSの基本
  • 033.1 レッスン 1
033.2 CSSセレクターとスタイルアプリケーション
  • 033.2 レッスン 1
033.3 CSSスタイリング
  • 033.3 レッスン 1
033.4 CSSボックスモデルとレイアウト
  • 033.4 レッスン 1
課題 034: JavaScriptプログラミング
034.1 JavaScriptの実行と構文
  • 034.1 レッスン 1
034.2 JavaScriptデータ構造
  • 034.2 レッスン 1
034.3 JavaScriptの制御構造と関数
  • 034.3 レッスン 1
  • 034.3 レッスン 2
034.4 WebサイトのコンテンツとスタイリングのJavaScript操作
  • 034.4 レッスン 1
課題 035: NodeJSサーバープログラミング
035.1 NodeJSの基本
  • 035.1 レッスン 1
035.2 NodeJS Expressの基本
  • 035.2 レッスン 1
  • 035.2 レッスン 2
035.3 SQLの基本
  • 035.3 レッスン 1
How to get certified
  1. 課題 032: HTMLドキュメントマークアップ
  2. 032.3 HTMLにおける参照と埋め込みリソース
  3. 032.3 レッスン 1

032.3 レッスン 1

Certificate:

Web開発の要点

Version:

1.0

Topic:

032 HTMLドキュメントマークアップ

Objective:

032.3 HTMLリファレンスと埋め込みリソース

Lesson:

1 of 1

はじめに

最近のWebページは、テキストだけで構成されていることはほとんどありません。画像や音声、動画、さらには他のHTML文書など、さまざまな種類のコンテンツで構成されています。HTML文書は、外部のコンテンツとともに、他の文書へのリンクを含むことができるので、インターネットの閲覧がより簡単になります。

埋め込みコンテンツ

HTMLで書かれたWebページがなくても、インターネット上でファイル交換は可能です。では、なぜWebドキュメントのフォーマットとして、PDFや他のワープロフォーマットではなく、HTMLが選ばれているのでしょうか。その理由の一つは、HTMLではマルチメディアリソースを別のファイルにしているからです。インターネットのように、情報が重複していたり、異なる場所に分散していたりする環境では、不要なデータ転送を避けることが重要です。ほとんどの場合、新しいバージョンのWebページには、以前のバージョンと同じ画像やその他のサポートファイルが取り込まれているので、Webブラウザはすべてを再びコピーすることなく、以前に取り込んだファイルを使用することができます。さらに、ファイルを分けておくことで、クライアントの所在地、画面サイズ、接続速度などの特性に応じて、マルチメディアコンテンツをカスタマイズすることが容易になります。

画像

埋め込みコンテンツで最も一般的なのは、テキストに付随する画像です。画像は別々に保管され、HTMLファイルの中では <img> タグで参照されます。

<img src="logo.png">

<img> タグは閉じタグを必要としません。src プロパティは、画像ファイルのソースロケーションを示します。この例では、画像ファイル logo.png がHTMLファイルと同じディレクトリになければならず、そうでなければブラウザは画像を表示できません。ソースロケーションプロパティは相対パスを受け付けるので、次のように ドット を使って画像の相対パスを示すことができます。

<img src="../logo.png">

2つのドットは、画像がHTMLファイルのあるディレクトリから相対的に親ディレクトリの中にあることを示します。URLが http://example.com/library/periodicals/index.html であるHTMLファイルの中にファイル名 ../logo.png が使われている場合、ブラウザは画像ファイルを http://example.com/library/logo.png のアドレスにリクエストします。

ドットを使った相対パス記述は、HTMLファイルがファイルシステム上の実際のファイルではない場合にも適用されます。HTMLブラウザはURLをファイルへのパスであるかのように解釈しますが、そのパスがファイルを指しているのか、それとも動的に生成されたコンテンツを指しているのかを判断するのはHTTPサーバの仕事です。HTMLファイルがHTTPリクエストから来た場合には、サーバへのすべてのリクエストにドメインと適切なパスが自動的に追加されます。同様に、HTMLファイルがローカルファイルシステムから直接開かれた場合、ブラウザは適切な画像を開きます。

先頭が / で始まるファイル名のパスは、絶対パスとして扱われます。絶対パスは、画像の位置に関する完全な情報を持っているため、HTMLドキュメントの位置に関係なく動作します。 CDN(Contents Delivery Network) を利用する場合など、画像ファイルが他のサーバにある場合は、ドメイン名も含める必要があります。

Note

CDN(Content Delivery Network)は、他のWebサイトのために静的コンテンツを保存する地理的に分散したサーバで構成されています。アクセスの多いサイトのパフォーマンスと可用性の向上に役立ちます。

画像が読み込めない場合、HTMLブラウザは画像の代わりに alt 属性で指定されたテキストを表示します。例えば、以下のようになります。

<img src="logo.png" alt="The Company logo">

また、 alt 属性はアクセシビリティの観点からも重要です。テキストオンリーのブラウザやスクリーンリーダーは、この属性を対応する画像の説明文として使用します。

画像タイプ

Webブラウザは、JPEG、PNG、GIF、SVGなどの一般的な画像タイプをすべて表示することができます。画像の寸法は、画像が読み込まれると同時に検出されますが、 width と height の属性で事前に定義することもできます。

<img src="logo.png" alt="The Company logo" width="300" height="100">

<img> タグに寸法属性を含める唯一の理由は、画像の読み込みに時間がかかりすぎたり、まったく読み込めなかったりした場合に、レイアウトが崩れないようにするためです。画像の元の寸法を変更するために width と height 属性を使用すると、望ましくない結果になることがあります。

  • 元のサイズが新しい寸法よりも小さい場合や、新しいプロポーション比率が元のサイズと異なる場合、画像は歪んでしまいます。

  • 大きな画像を縮小すると、余分な帯域幅を使用するため、読み込み時間が長くなってしまいます。

SVGはこれらの影響を受けない唯一のフォーマットです。というのも、すべてのグラフィック情報がスケーリングに適した数値座標に格納されており、その寸法がファイルサイズに影響しないからです(そのため、 Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、大きさを変えられるベクター画像) という名前がついています)。例えば、SVGで長方形を描くために必要なのは、位置、辺の寸法、色の情報だけです。1ピクセルごとの特定の値は、後から動的にレンダリングされます。実際、SVG 画像は、そのグラフィック要素がテキストファイルのタグで定義されているという意味で、HTML ファイルに似ています。SVGファイルは、チャートやダイアグラムのような鋭角的な図面を表現することを目的としています。

これらの条件に当てはまらない画像は、 ビットマップ として保存する必要があります。ベクトルベースの画像フォーマットとは異なり、ビットマップは画像の各ピクセルの色情報をあらかじめ保存しています。画像の各ピクセルの色の値を保存すると、非常に大きなデータ量になるため、ビットマップは通常、JPEG、PNG、GIFなどの圧縮形式で保存されます。

写真の場合は、JPEG形式を推奨します。JPEG形式の圧縮アルゴリズムは、陰影やぼやけた背景に対しても良好な結果を得ることができるためです。一方、ベタ塗りの画像の場合は、PNG形式が適しています。したがって、ベクターイメージをビットマップに変換する必要がある場合は、PNGフォーマットを選択する必要があります。

GIFフォーマットは、一般的なビットマップフォーマットの中で最も画質が低いです。それにもかかわらず、GIFフォーマットはアニメーションをサポートしているため、今でも広く使用されています。実際、多くのWebサイトでは、短い動画を表示するためにGIFファイルが使用されていますが、動画コンテンツを表示するにはもっと良い方法があります。

オーディオとビデオ

オーディオやビデオのコンテンツは、画像とほぼ同じ方法でHTMLドキュメントに追加することができます。当然のことながら、オーディオを追加するためのタグは <audio> であり、ビデオを追加するためのタグは <video> です。当然のことながら、テキストのみのブラウザではマルチメディアコンテンツを再生することはできませんので、 <audio> と <video> タグは、表示できなかった要素のフォールバックとして使用されるテキストを保持するために閉じタグを使用します。例えば、以下のようになります。

<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>

ブラウザが <audio> タグをサポートしていない場合は、代わりに “Unable to play recording.mp3” という行が表示されます。 </audio> や </video> タグで閉じることで、Webページには、<img> タグの alt 属性で許可されている単純なテキストの行よりも、より手の込んだ代替コンテンツを含めることができます。

<audio> と <video> タグの src 属性は、 <img> タグと同じように動作しますが、ライブストリームを示すURLも受け付けます。ブラウザは、受信したコンテンツのバッファリング、デコード、および表示を行います。 controls 属性は、再生コントロールを表示します。この属性がないと、訪問者は再生を一時停止したり、巻き戻したり、その他の操作をすることができません。

一般的なコンテンツ

HTML文書の中に画像を挿入するのと同様に、HTML文書を別のHTML文書の中に入れ子にすることができますが、その際には <iframe> というタグを使用します。

<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>

簡素なテキストオンリーのブラウザは <iframe> タグをサポートしておらず、代わりに囲まれたテキストを表示します。マルチメディアタグと同様に、 src 属性はネストされたドキュメントのソースロケーションを設定します。また、 width と height 属性を追加することで、 iframe 要素のデフォルトの寸法を変更することができます。

name 属性は、iframeを参照して、入れ子のドキュメントを変更することができます。この属性がないと、入れ子になったドキュメントを変更することはできません。 anchor 要素を使うと、現在のブラウザウィンドウではなく、iframe内の別の場所からドキュメントを読み込むことができます。

リンク

一般的にWebの リンク と呼ばれるページ要素は、技術的には アンカー と呼ばれており、タグ <a> が使われているのはそのためです。アンカーは別の場所に導くもので、別の場所とは、ブラウザがサポートする任意のアドレスになります。場所は href ( hyperlink reference )属性で示されます。

<a href="contact.html">Contact Information</a>

位置情報は、前述の埋め込みコンテンツと同様に、相対パスまたは絶対パスで記述できます。訪問者に表示されるのは、囲まれたテキストコンテンツ(例: お問い合わせ先 )のみで、通常、デフォルトではクリック可能な下線付きの青いテキストとして表示されますが、リンクの上に表示されるアイテムは、画像など、他の可視コンテンツでも構いません。

<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>

ロケーションに特別な接頭辞を付けることで、ブラウザにそのロケーションをどのように開くかを伝えることができます。例えば、アンカーがメールアドレスを指している場合には、その href 属性に mailto: という接頭辞を付けます。

<a href="mailto:info@lpi.org">Contact by email</a>

tel: という接頭語は電話番号を表します。携帯電話でページを見ている人には特に便利です。

<a href="tel:+123456789">Contact by phone</a>

リンクがクリックされると、ブラウザはその場所のコンテンツを、関連するアプリケーションとともに開きます。

アンカーの最も一般的な使い方は、他のWeb文書を読み込むことです。デフォルトでは、ブラウザは現在のHTMLドキュメントを新しい場所のコンテンツで置き換えます。この動作は target 属性を使って変更することができます。例えば、 _blank というターゲットは、指定された場所を、訪問者の好みに応じて新しいウィンドウか新しいブラウザタブで開くようブラウザに指示します。

<a href="contact.html" target="_blank">Contact Information</a>

target 属性が指定されていない場合は、 _self ターゲットがデフォルトとなります。参照されているドキュメントが現在のドキュメントを置き換えることになります。

その他のタイプのターゲットは <iframe> 要素に関連しています。 <iframe> 要素の中で参照されているドキュメントを読み込むには、 target 属性にiframe要素の名前を指定します。

<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>

<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>

iframe要素は、別のブラウザウィンドウとして動作するため、iframe内のドキュメントから読み込まれたリンクは、iframeのコンテンツのみを置換します。この動作を変更するために、フレームドキュメント内のアンカー要素でも target 属性を使用することができます。ターゲットの _parent は、フレームドキュメント内で使用された場合、参照された場所が <iframe> タグを含む親ドキュメントを置き換えるようになります。例えば、埋め込まれた gallery.html ドキュメントには、親ドキュメントを置き換えながら自分自身をロードするアンカーを含めることができます。

<p><a href="gallery.html" target="_parent">Open as parent document</a></p>

HTMLドキュメントは、 <iframe> タグによる複数レベルのネストをサポートしています。 _top ターゲットは、フレームドキュメント内のアンカーで使用されると、対応する <iframe> の直接の親であるか、チェーンのさらに後ろの祖先であるかにかかわらず、参照された場所がブラウザウィンドウ内のメインドキュメントを置き換えるようになります。

ドキュメント内のロケーション

HTMLドキュメントのアドレスには、ドキュメント内のリソースを識別するために使用できる フラグメント をオプションで含めることができます。このフラグメントは、 URLアンカー とも呼ばれ、URLの最後にハッシュ記号 # をつけた文字列です。例えば、 History という単語は、 https://en.wikipedia.org/wiki/Internet#History というURLの中のアンカーです。

URLにアンカーがある場合、ブラウザはドキュメント内の対応する要素、つまり、 id 属性がURLのアンカーと同じである要素にスクロールします。与えられたURL、 https://en.wikipedia.org/wiki/Internet#History の場合、ブラウザは “History” のセクションに直接ジャンプします。このページのHTMLコードを調べてみると、セクションのタイトルが対応する id 属性を持っていることがわかります。

<span class="mw-headline" id="History">History</span>

URLアンカーは、 <a> タグの href 属性で、外部のページを指している場合と、現在のページ内の場所を指している場合のどちらでも使用できます。後者の場合は、 <a href="#History">History</a> のように、URLフラグメントと一緒にハッシュ記号だけで開始すれば十分です。

Warning

id 属性は、ホワイトスペース(スペース、タブなど)を含んではならず、ドキュメント内でユニークでなければなりません。

URLアンカーに対するブラウザの反応をカスタマイズする方法があります。たとえば、 hashchange ウィンドウイベントをリッスンし、アニメーションやHTTPリクエストなどのカスタマイズされたアクションをトリガーするJavaScript関数を記述することができます。ただし、URLフラグメントはURLとともにサーバに送信されることはないので、HTTPサーバが識別子として使用することはできないことに注意してください。

演習

  1. http://www.lpi.org/articles/linux/index.html にある HTMLドキュメントには、 src 属性が ../logo.png を指している <img> タグがあります。この画像の完全な絶対パスは何でしょうか?

  2. <img> タグで alt 属性が重要である理由を2つ挙げてください。

  3. 点がぼやけている写真や、色や濃淡の多い写真に使用すると、画質が良く、ファイルサイズを小さく保つことができる画像フォーマットは何でしょうか?

  4. Youtubeのようなサードパーティのプロバイダを使用する代わりに、標準的なHTMLの機能のみを使用して、HTMLドキュメントに動画ファイルを埋め込むことができるHTMLタグは何でしょうか?

発展演習

  1. あるHTML文書に、ハイパーリンク <a href="pic1.jpeg">First picture</a> 、iframe要素 <iframe name="gallery"></iframe> があるとします。ユーザーがリンクをクリックした後、指定されたiframe要素の中に指し示す画像が読み込まれるようにハイパーリンクタグを修正するにはどうしたらよいでしょうか?

  2. 訪問者がiframe内のドキュメントのハイパーリンクをクリックし、そのハイパーリンクのtarget属性が _self に設定されていた場合はどうなりますか?

  3. HTMLページの2番目のセクションのURLアンカーが機能していないことに気づきました。このエラーの原因として考えられることは何でしょうか?

まとめ

このレッスンでは、適切なHTMLタグを使って、画像やその他のマルチメディアコンテンツを追加する方法を学びました。また、ハイパーリンクを使って他の文書を読み込んだり、ページ内の特定の場所を指し示したりするさまざまな方法についても学びました。このレッスンでは、次のような概念と手順を学びました。

  • <img> タグとその主な属性。 src と alt です。

  • URLの相対パスと絶対パス

  • Webでよく使われる画像フォーマットとその特徴。

  • マルチメディアタグの <audio> と <video>

  • <iframe> タグを使ってネストしたドキュメントを挿入する方法。

  • ハイパーリンクタグの <a> とその href 属性、および特別なターゲット。

  • ハッシュアンカーとしても知られているURLフラグメントの使用方法。

演習の回答

  1. http://www.lpi.org/articles/linux/index.html にある HTMLドキュメントには、 src 属性が ../logo.png を指している <img> タグがあります。この画像の完全な絶対パスは何でしょうか?

    http://www.lpi.org/articles/logo.png

  2. <img> タグで alt 属性が重要である理由を2つ挙げてください。

    テキストオンリーのブラウザでは、不足している画像の説明を表示することができます。スクリーン・リーダーは alt 属性を使って画像を説明します。

  3. 点がぼやけている写真や、色や濃淡の多い写真に使用すると、画質が良く、ファイルサイズを小さく保つことができる画像フォーマットは何でしょうか?

    JPEG形式。

  4. Youtubeのようなサードパーティのプロバイダを使用する代わりに、標準的なHTMLの機能のみを使用して、HTMLドキュメントに動画ファイルを埋め込むことができるHTMLタグは何でしょうか?

    <video> タグ。

発展演習の回答

  1. あるHTML文書に、ハイパーリンク <a href="pic1.jpeg">First picture</a> 、iframe要素 <iframe name="gallery"></iframe> があるとします。ユーザーがリンクをクリックした後、指定されたiframe要素の中に指し示す画像が読み込まれるようにハイパーリンクタグを修正するにはどうしたらよいでしょうか?

    a タグの target 属性を使う。<a href="pic1.jpeg" target="gallery">First picture</a> 。

  2. 訪問者がiframe内のドキュメントのハイパーリンクをクリックし、そのハイパーリンクのtarget属性が _self に設定されていた場合はどうなりますか?

    ドキュメントは同じiframe内に読み込まれます。これがデフォルトの動作です。

  3. HTMLページの2番目のセクションのURLアンカーが機能していないことに気づきました。このエラーの原因として考えられることは何でしょうか?

    ハッシュ記号の後のURLフラグメントが、2番目のセクションに対応する要素の id 属性と一致しないか、または要素の id 属性が存在しません。

Linux Professional Insitute Inc. All rights reserved. 学習資料をご覧ください: https://learning.lpi.org
ここでの作成物は、Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Licenseの下でライセンスされています。

次のレッスン

032.4 HTMLフォーム (032.4 レッスン 1)

次のレッスンを読む

Linux Professional Insitute Inc. All rights reserved. 学習資料をご覧ください: https://learning.lpi.org
ここでの作成物は、Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Licenseの下でライセンスされています。

LPIは非営利団体です。

© 2023 Linux Professional Institute(LPI)は、オープンソースプロフェッショナル向けのグローバルな認定基準およびキャリアサポート組織です。200,000人以上の認定保持者を擁する、世界初かつ最大のベンダー中立Linuxおよびオープンソース認定機関です。LPIは180か国以上で認定プロフェッショナルを擁し、複数の言語で試験を実施し、何百ものトレーニングパートナーを擁しています。

私たちの目的は、オープンソースの知識とスキルの認定資格を世界中からアクセスできるようにすることで、誰にとっても経済的で創造的な機会を可能にすることです。

  • LinkedIn
  • flogo-RGB-HEX-Blk-58 Facebook
  • Twitter
  • お問い合わせ
  • 個人情報とCookieポリシー

間違いを見つけたり、このページを改善したいですか? 私たちに知らせてください。.

© 1999–2023 The Linux Professional Institute Inc. All rights reserved.