画像とリンクを表示する

Updated at 2023.07.08 21:01.

この章で作る WEB サイトと学習内容

上記の WEB サイトを作ることで、以下を学ぶ。

Link(リンク)とは
ページを移動する
画像を表示する

学習環境を用意する

CodeSandbox 右下のOpen Sandboxをクリックして編集ページを開こう。

Link(リンク)とは

リンクとは日本語で「連結」を意味することから分かる通り、WEB サイト上で別のサイト（ページ）に移動するためのコードである。WEB サイトはリンクでつながり合うことでインターネットを作り上げている。リンクを作るには<a>を使う。a(エー)はAnchor(アンカー) Link(リンク)の略である。

ページを移動する

下記のコードを 13 行目の<body>の中に書き加えよう。

<a href="./subpage/index.html">サブページへ移動</a>

書き加えると以下のようになる。クリックするとサブページへ移動する。

自分が編集している CodeSandbox の左側を見てほしい。ここにはこの WEB サイトに必要なファイルが保存されている。今回のテンプレートではあらかじめ subpage フォルダに index.html というファイルを保存しておいた。

書き加えたコードは<a>だが、<a>の中にhref="./subpage/index.html"と書いた。href(エイチレフ)はHypertext(ハイパーテキスト) Reference(リファレンス)の略で<a>は移動先をこのようにして指定する。

また、./とは、「現在のファイル」という意味である。

サブページからトップページに戻るときのリンクは以下のように書く

<a href="../index.html">戻る</a>

../は一つ上のフォルダを示す。subpage/index.htmlからindex.htmlに移動するのでこのように書く。二つ上のフォルダに移動する場合は../../と書く。subpage/index.html に上記のコードを書き加えると以下のようになる。サブページに戻るリンクが作られトップページに戻れるようになる。

画像を表示する

画像は<img>を使って表示する。CodeSandbox のフォルダに以下の画像を用意している。

この画像をページに表示するには以下のように書く。

<img src="./lovely-duck.jpg" />

<a>の下の行に書き加えると以下のようになる。

<img>では画像の場所をsrc(エスアールシー)で指定する。日本語で源を意味するsource(ソース)の略である。

このままでは画像は画面サイズに関係なく一定の大きさに表示されてしまうので CSS で形を整える。以下のコードを<head>の中に書き加える。

<style>
  img {
    inline-size: 100%;
    border-radius: 50%;
  }
</style>

inline-sizeプロパティは画像の幅を決める。100%を指定することで親要素である<html>の幅を超えないようにして常に画面の中に収まるようにした。

border-radiusプロパティは角丸を指定するプロパティだ。このプロパティを50%に指定することで丸を表現することができる。