ゼロから始めるホームページ作成～５～

2020/9/24 2020/9/29 ホームページ作成ネタ

～目次～

画像や動画をブラウザで表示する方法

さて、今回は画像と動画をWEBページで表示する方法と、ハイパーリンクを設定する方法をご紹介します。

文字だけのWEBページは見ていて退屈ですからね。まずは、画像と動画を用意します。

ご自分で表示したい画像や動画がある場合には、そのファイルをHTMLファイルの配置場所と同じところに配置してください。

画像や動画がない場合には、サンプルを無料で提供してくれているサイトがたくさんありますので、そこからダウンロードしましょう。

無料サンプル画像→写真 AC

無料サンプル動画→Pixtabay

今回は下記のような画像を背景画像にしようと思います。

似たような画像を用意してください。

動画は下記のような動画をダウンロードしてみました。

HTMLの記述

前回のファイルの内容に画像と動画の表示、ハイパーリンクの設定を追加しました。

画像や動画のファイル名は準備したファイルの名前に変更してください。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>○○の自己紹介サイト</title>
  <style>
  
  </style>
</head>
<body>
<img src="./sample.jpg" alt="空の画像">
<header>
  <h1>○○の自己紹介サイト</h1>
  <nav>
    <ul>
      <li><a href="#name">氏名</a></li>
      <li><a href="#address">住所</a></li>
      <li><a href="#appeal">自己アピール</a></li>
    </ul>
  </nav>
</header>
<article>
  <section>
    <h2 id="name">氏名</h2>
    <p>○○</p>
    <h2 id="address">住所</h2>
    <p>●●</p>
    <h2 id="appeal">自己アピール</h2>
    <p>△△</p>
    <h2>ポートフォリオ</h2>
    <video src="./sample.mp4" controls></video>
  </section>
  <section>
    <h3>資格一覧</h3>
    <table>
    <caption>資格一覧表</caption>
    <thead>
      <tr>
        <th>取得年月</th>
        <th>資格名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2020年9月</th>
        <td>HTML5レベル1 取得</td>
      </tr>
      <tr>
        <th>2020年9月</th>
        <td>HTML5レベル2 取得</td>
      </tr>
    </tbody>
    </table>
  </section>
</article>
<footer>
  <h3>サイトマップ</h3>
  <nav>
    <ul>
      <li><a href="#name">氏名</a></li>
      <li><a href="#address">住所</a></li>
      <li><a href="#appeal">自己アピール</a></li>
    </ul>
  </nav>
  <p>© 2020 ○○</p>
</footer>
</body>
</html>

赤色になっている箇所が前回からプラスされた部分です。

ナビゲーションにハイパーリンクを設定して、先頭に画像を、ポートフォリオとして動画を表示してみました。

ファイルを保存してブラウザで開いてみましょう。

下記のようにブラウザに表示されればOKです。

※画像はブラウザの縮小率を25%にしています。

画像のサイズが大きすぎましたね。これは、サイズを指定しないといけません。

次回以降の記事で表示を整えるCSSについて記載していきますので、その時にきれいに表示されるように整えましょう。

また、ナビゲーションのハイパーリンクをクリックすると、「名前」「住所」「自己アピール」の箇所が左上に表示されるかと思われます。これが今回設定したページ内でのハイパーリンクです。

これも、高さが足りていないためきちんと移動しているように見えません。CSSで高さを指定してあげる必要がありますね。

画像表示の説明

<img src="./sample.jpg" alt="空の画像">

画像を表示する記述です。

imgタグのsrc属性に画像ファイルのURLを記述します。例の場合は「相対パス」で記述しています。

HTMLファイルを配置した場所と同じ階層にある画像ファイルを指定しています。

一つ上の階層であれば、「../ファイル名」と記述します。

一つ下の階層であれば「./フォルダ名/ファイル名」と記述します。

もう一つ、alt属性ですが画像の読み込みが失敗した時などに表示される文言になります。

どのような画像であるかを記述します。

動画表示の説明

<video src="./sample.mp4" controls></video>

動画を表示する記述です。

videoタグのsrc属性に動画ファイルのURLを記述します。

例の場合は、画像同様に相対パスで記述しています。

WEBサーバにアップロードされた動画やYouTubeにアップロードした動画を表示する場合に「http～」と記述することを「絶対パス」と言います。

もう一つ「controls属性」を記述しています。この記述をすることにより、ブラウザ専用のコントローラーを動画下部に表示することができるようになります。

ハイパーリンクの説明

<li><a href="#name">氏名</a></li>
<li><a href="#address">住所</a></li>
<li><a href="#appeal">自己アピール</a></li>

<h2 id="name">氏名</h2>
<p>○○</p>
<h2 id="address">住所</h2>
<p>●●</p>
<h2 id="appeal">自己アピール</h2>
<p>△△</p>

別のWEBページや同じWEBページ内の別の箇所へのリンクを表示する記述です。

例の場合は、同じページ内に「id属性”○○”」を付与して、その箇所に移動するようにhref属性に「#id名」と記述しています。

別のWEBページを表示する場合には、画像や動画同様に「相対パス」「絶対パス」をhref属性に記述することでページ遷移することができるようになります。

ページ遷移した画面を別タブで開きたい場合には、「target属性」に「_blank」を記述します。