Tsumiki

コース目次 / 第2章

中身を増やす

アイコン画像と、好きなサイトへのリンクを足して、ページの中身を厚くします。

目安 約40分この章のゴール: アイコン画像・趣味の紹介・外部リンクが載ったページになる
お使いのパソコン
手順とスクリーンショットが切り替わります

前の章で、文字だけのページができました。この章では 写真とリンク を足します。ページが一気に「サイトらしく」なる章です。

今日のゴール

いまは文字が縦に並んでいるだけですね。この章が終わると、いちばん上にアイコンの画像が出て、下のほうに「趣味」の紹介と、好きなサイトへのリンクが並びます。

ミニ解説その1: 相対パス

画像を出すには、ブラウザに「その画像がどこにあるか」を教えます。この「どこにあるか」の書き方を パス といいます。

これから使うのは 相対パス です。むずかしそうな名前ですが、意味は「いま開いているファイルから見た道順」だけです。

mysite/
├── index.html   ← いまここ
└── images/
    └── icon.png ← これを出したい

index.html から見ると、icon.png は「images フォルダに入って、その中の icon.png」です。それをそのまま書くと images/icon.png になります。スラッシュ(/)が「〜の中に入る」という意味です。

ミニ解説その2: img と a

新しく2つのタグを使います。

タグ 意味 特徴
<img> 画像を出す 閉じタグがない。1つで完結する
<a> リンクを作る <a>ここが押せる文字</a>

<img> には2つの情報を書きます。

  • src(ソース)… さっきの相対パス。どの画像を出すか
  • alt(オルト)… 画像が出せなかったときに代わりに表示される文章。目が見えない方が読み上げソフトで聞くときにも使われます。面倒でも必ず書きます。

<a> には href(エイチレフ)で行き先を書きます。他人のサイトへ行くときは https:// から始まるアドレスをまるごと書きます。

準備: images フォルダと画像を用意する

まず mysite の中に images という名前のフォルダを作ります。VS Code の左側、MYSITE の右にある「新しいフォルダー」のアイコンを押して images と入力してください。

次に、このページのいちばん下にあるZIPをダウンロードして、その中の images/icon.png を使います。ZIPを解凍すると mysite フォルダが出てくるので、その中の images/icon.png を、いま作った自分の images フォルダにコピーしてください。

Mac をお使いの方

ダウンロードした ZIP は Finder の「ダウンロード」にあります。ダブルクリックすると同じ場所にフォルダとして開きます。icon.png を選んで command + C、自分の images フォルダを開いて command + V で貼り付けです。

Windows をお使いの方

ダウンロードした ZIP はエクスプローラーの「ダウンロード」にあります。右クリック →「すべて展開」でフォルダになります。icon.png を選んで Ctrl + C、自分の images フォルダを開いて Ctrl + V で貼り付けです。

自分の好きな画像を使ってもかまいません。ただし、この章ではファイル名を icon.png のままにしておくと、教材のコードをそのまま使えて楽です。名前を変えたい人は、あとの「あなたの番」でどうぞ。

書き写す

<body> の中に3つ足します。緑の行が追加ぶんです。

index.html+1 / -0
   <body>   <h1>こんにちは、はるとです</h1>+  <img src="images/icon.png" alt="はるとのアイコン" />   <p>カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>
index.html+9 / -0
       <li>コーヒー</li>   </ul>+ +  <h2>趣味</h2>+  <p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>+ +  <h2>リンク</h2>+  <ul>+    <li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>+    <li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>+  </ul> </body> </html>

書き終わったファイル全体はこうなります。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はるとの記録</title>
  </head>
  <body>
    <h1>こんにちは、はるとです</h1>
    <img src="images/icon.png" alt="はるとのアイコン" />
    <p>カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>

    <!-- 好きなものを3つならべる -->
    <h2>好きなもの</h2>
    <ul>
      <li>カメラ</li>
      <li>旅行</li>
      <li>コーヒー</li>
    </ul>

    <h2>趣味</h2>
    <p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>

    <h2>リンク</h2>
    <ul>
      <li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>
      <li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>
    </ul>
  </body>
</html>

保存してブラウザをリロードしてください。アイコンが出て、いちばん下のリンクが青い文字になっていれば成功です。リンクを押すと、そのサイトが開きます。

あなたの番

ここからは、はるとさんのページを自分のページに変えていきます。

  • 画像 を自分のものに変えてみましょう。自分の写真でも、好きなイラストでもかまいません。images フォルダに入れて、src をそのファイル名に書き換えます。
  • alt も自分の画像の説明に書き換えてください。「〇〇のアイコン」で十分です。
  • 趣味の文章 を自分の言葉にしてください。3行くらいまでが読みやすいです。
  • リンク2本 を、自分がよく見るサイトに変えてください。リンクの文字も「〇〇でよく見ています」のように自分の言葉に。

インターネットで拾った画像には、勝手に使ってはいけないものがあります。自分で撮った写真か、「フリー素材」と書かれているものを使ってください。

うまくいかないときは

画像が出ない(壊れたアイコンが出る)

初心者がいちばん引っかかるところです。次の3つを順番に確認してください。

  1. 場所 … images フォルダは mysite の直下にありますか。index.html と images が横に並んでいるのが正解です。
  2. 大文字と小文字 … Icon.PNG と icon.png は別のファイル扱いになることがあります。実際のファイル名とコードの文字を1文字ずつ見比べてください。
  3. よけいな空白 … src=" images/icon.png" のように、日本語入力のまま打った空白(全角スペース)が混ざっていないか確認してください。
リンクを押しても何も起きない

href の中身が https:// から始まっているか確認してください。www. から書き始めると、自分のサイトの中を探しにいってしまい、迷子になります。

こうなっていればOK

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

この章はまだ完了していません。