【Chapter3】画像とリンク

概要と目標リンクを設定したり、
画像を表示したり。

HTMLファイルに移動するハイパーリンクという機能と、
画像の表示方法を学習しましょう。

今回のゴール

RERUN

リンク別のHTMLファイルに、
ジャンプする。

HTMLには別のHTMLファイルに移動するハイパーリンクという機能がある。
ハイパーリンクはa 要素にhref 属性を使ってをリンク先を指定する。

リンクの要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`a`	anchor（アンカー）の略で、リンクを表す	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ	トランスペアレント（透明） HTML5　改

リンクを使ってみよう。

リンクは、a 要素に、href 属性を使ってリンク先を指定する。
リンク先を別ウインドウで開きたい時は、target 属性で、_blankと指定する。

`a` 要素の主な固有属性
属性名	役割	属性値
`href` （必須）	リンク先を指定する属性	リンク先のファイルパスを指定
`target`	リンク先の表示場所を指定する属性	`"_blank"` : 新しいウインドウ

基本的なa要素の使い方

<a href="リンク先ファイルパス">アンカーテキスト</a>

「html-lessons」 › 「chapter03」 › 「link」フォルダ内にある「index.html」をテキストエディタで開く
各リスト項目の文字列に、リンクを設定

chapter03/link/index.html

<h2>小説</h2>
<ul>
  <li><a href="human.html">人間失格</a></li>
  <li><a href="train.html">銀河鉄道の夜</a></li>
</ul>
<h2>検索エンジン</h2>
<p><a href="https://www.google.co.jp/">Googleへ</a></p>

上書き保存
「html-lessons」 › 「chapter03」 › 「link」フォルダ内の「index.html」をダブルクリック。
各リンクをクリックして、該当ページにジャンプできるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンク先を別ウインドウで、
表示してみよう。

リンク先を別ウインドウで表示

<a href="リンク先ファイルパス" target="_blank">アンカーテキスト</a>

「html-lessons」 › 「chapter03」 › 「link」フォルダ内にある「index.html」をテキストエディタで開く
「Googleへ」のリンクを別ウインドウで開くように、target属性を追記

chapter03/link/index.html

<p><a href="https://www.google.co.jp/" target="_blank">Googleへ</a></p>

上書き保存
「html-lessons」 › 「chapter03」 › 「link」フォルダ内の「index.html」をダブルクリック。
「Googleへ」をクリックして、別ウインドウで表示するかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

絶対パスと相対パスファイルパスの指定方法は、
2種類ある。

リンク先を指定する際や画像を表示する際は、パスで指定する。
パスの指定方法には絶対パスと相対パスの2種類がある。

絶対パス

絶対パスは住所の様に、絶対的な場所を表すもので、基本的には、URLを指定すればよい。
絶対パスは、主に"外部のWebサイト"へのリンクに利用する。

Googleのトップページにリンクする場合

<a href="https://www.google.co.jp/">Google</a>

相対パス

相対パスは人に道を教える様で、現在地から目的のファイルまでの道順を使ってリンク先を指定する。

① 同じ階層の相対パス

<a href="a.html">a.htmlへ</a>

② 下の階層の相対パス

<a href="B/b.html">b.htmlへ</a>

③ 上の階層の相対パス

<a href="../index.html">index.htmlへ</a>

④ 複雑な相対パス

<a href="../C/c.html">c.htmlへ</a>

答えを見る

ページ内リンク同じページ内の違う場所にジャンプ。

同じページ内の違う箇所にリンクすることも可能。
その場合は、リンク先（ジャンプして来てほしい場所）に、id属性で固有の名前を指定し、
リンクを指定するa 要素のhref 属性に、「#」を付けて、リンク先のid名を指定する。

リンク先にid名を指定

<要素名 id="固有の名前">・・・</要素名>

ページ内リンクの指定

<a href="#リンク先のid名">アンカーテキスト</a>

ページ内リンクを指定してみよう。

「html-lessons」 › 「chapter03」 › 「link」フォルダ内の「human.html」をテキストエディタで開く
各章の見出しにid名を指定する

chapter03/link/index.html

<h2 id="section1">はしがき</h2>

<h2 id="section2">第一の手記</h2>

<h2 id="section3">第二の手記</h2>

<h2 id="section4">第三の手記</h2>

目次の各項目にページ内リンクを指定

chapter03/link/index.html

<ol>
  <li><a href="#section1">はしがき</a></li>
  <li><a href="#section2">第一の手記</a></li>
  <li><a href="#section3">第二の手記</a></li>
  <li><a href="#section4">第三の手記</a></li>
</ol>

上書き保存
「html-lessons」 › 「chapter03」 › 「link」フォルダ内の「human.html」をダブルクリック。
ページ内リンクができることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像画像は`img`要素で表示する。

HTMLで画像を表示する際は、img 要素を使う。
画像ファイルは、src 属性を使って参照する。

画像の要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`img`	image（イメージ）の略で、画像を表す	フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツ	なし（空要素）

`img`要素を使ってみる。

img要素は、表示したい画像をsrc 属性で参照して表示する。
なお、画像が表示できないユーザーのために、alt 属性を使って、代替えテキストを提供する。

`img` 要素の主な固有属性
属性名	役割	属性値
`src`	参照する画像ファイルのパスを指定する属性必須	画像ファイルのパスを指定
`alt`	画像の代替えテキストを指定する属性 HTML5 改	代替えテキスト
`width`	画像の横幅を指定する属性	数値（px）
`height`	画像の高さを指定する属性	数値（px）

img要素の使い方

<img src="画像ファイルのパス" alt="代替えテキスト">

「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をテキストエディタで開く
h1要素の下に「images」フォルダ内にある、「tkg.jpg」を表示

chapter03/img/index.html

<p><img src="images/tkg.jpg" alt="おいしそうなたまごかけご飯"></p>

上書き保存
「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をダブルクリック。
画像が表示されるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像のサイズを変更してみよう。

width属性や、height属性を使えば、画像のサイズを変更できる。
ただし、画像を小さくしてもファイル容量が小さくなるわけではない。

width属性、height属性の使い方

<img src="画像ファイルのパス" width="幅（px）" height="高さ（px）" alt="代替えテキスト">

「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をテキストエディタで開く
画像のサイズを変更する

chapter03/img/index.html

<p><img src="images/tkg.jpg" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>

上書き保存
「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をダブルクリック。
画像が縮小されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像にリンクを張ってみよう。

画像にだってリンクを貼ることができる。

「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をテキストエディタで開く
画像にリンクを指定する

chapter03/img/index.html

<p>
  <a href="../../chapter02/list/index.html">
    <img src="images/tkg.jpg" width="320" height="213" alt="おいしそうなたまごかけご飯">
  </a>
</p>

上書き保存
「html-lessons」 › 「chapter03」 › 「img」フォルダ内の「index.html」をダブルクリック。
画像にただしくリンクが貼られているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter03」 › 「training」フォルダ内に「index.html」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

「chapter03」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： index.html
HTMLの全体構造の要素を記述して下さい。
- HTMLのバージョン： HTML 5
- 文字コード： UTF-8
- タイトルの文字列： "Dummy 株式会社"
body要素内に下記の文字列と画像を挿入し、大見出しとしてマークアップして下さい。
なお、文字列の後は、改行を挿入して下さい。
- 文字列： "Dummy 株式会社"
- 画像ファイル：「images」フォルダ内の "logo-dummy.png"
- 画像の代替えテキスト：適切な文字列
上記で挿入した画像にリンクを設定して下さい。
- リンク先： "index.html"
大見出しの下に、サイトのナビゲーションを作成して下さい。
- ホーム
  - 画像ファイル：「images」フォルダ内の "nav-home.png"
  - 画像の代替えテキスト：適切な文字列
  - リンク先： "index.html"
- サービス
  - 画像ファイル：「images」フォルダ内の "nav-service.png"
  - 画像の代替えテキスト：適切な文字列
  - リンク先：「service」フォルダ内の"index.html"
- 私たちについて
  - 画像ファイル：「images」フォルダ内の "nav-about-us.png"
  - 画像の代替えテキスト：適切な文字列
  - リンク先：「about-us」フォルダ内の"index.html"

解答例

chapter03/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy 株式会社</title>
</head>
<body>
  <h1>
    Dummy 株式会社<br>
    <a href="index.html"><img src="images/logo-dummy.png" alt="Dummy 株式会社"></a>
  </h1>
  <ul>
    <li><a href="index.html"><img src="images/nav-home.png" alt="ホーム"></a></li>
    <li><a href="service/index.html"><img src="images/nav-service.png" alt="サービス"></a></li>
    <li><a href="about-us/index.html"><img src="images/nav-about-us.png" alt="私たちについて"></a></li>
  </ul>
</body>
</html>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめリンクは、`a` 要素、
画像は、`img` 要素。

HTMLで別のファイルにリンクを指定する時は、a 要素を使う。
また、画像を表示する時は、img 要素を使う。

ハイパーリンクは、a 要素
画像は、img 要素
パスには、絶対パスと、相対パスがある

Chapter03 画像とリンク

リンクを使ってみよう。

リンク先を別ウインドウで、表示してみよう。

絶対パス

相対パス

ページ内リンクを指定してみよう。

img要素を使ってみる。

画像のサイズを変更してみよう。

画像にリンクを張ってみよう。

リンク先を別ウインドウで、
表示してみよう。

`img`要素を使ってみる。