画像がぞうをつかって!
🏆 きなものランキング

見出し(h1〜h6)と 画像(img)で、
きみのしを 紹介しょうかいしよう!

エディタを ひら
(ここをつかって つくるよ)
完成版かんせいばん(ゴール)を

このレッスンの やりかた

  1. うえの「エディタを ひらく」ボタンを おす。
  2. このページの「くろはこ(コード)」を コピーする。
  3. エディタに はりつけて、どうなるか たしかめる!
ステップ 1: 一番いちばんでかい タイトル!

まずは、なんのランキングか わかるように タイトルを かきます。
HTMLに、したのコードを はりつけてね。

ここをコピー
    <h1>わたしの 好きな 食べもの ベスト3</h1>
チェック!
h1(エイチ・ワン)は、ページの中で 一番いちばん 大事だいじな 見出しだよ。
とても 大きく 表示ひょうじされたかな?
ステップ 2: だい1発表はっぴょう

いよいよ 1紹介しょうかいだ!
少し 小さい見出しの h2(エイチ・ツー) と、説明文せつめいぶんp(ピー)をつかうよ。
さっきのコードの したに ついかしてね。

ここをコピー
    <h2>第1位:カレーライス</h2>
    <p>やっぱり これが ナンバーワン!
とくに おうちの カレーが だいすき。</p>
ポイント
h2 は、h1 より 少し 小さいね。
本でいうと「章(しょう)」の タイトルみたいなものだよ。
ステップ 3: 画像がぞうを はってみよう

文字もじだけじゃ さびしいから、写真しゃしんを はってみよう。
img(イメージ)タグを つかうよ。
さっきの </p> の すぐ下に 入れてみてね。

ここをコピー
    <img src="https://placehold.jp/300x200.png?text=Curry" alt="カレーのしゃしん">
画像が出た!
src="..."(ソース)の 中に、画像の アドレス(URL)を 書くんだ。
※今は サンプルの画像が 出るよ。
ステップ 4: 2と3も かこう

おなじように、2と 3も つくっていくよ。
コピーして、中身を 書きかえてみよう!

ここをコピー
    <h2>第2位:ハンバーグ</h2>
    <p>デミグラスソースが 最高!</p>
    <img src="https://placehold.jp/300x200.png?text=Hamburg" alt="ハンバーグ">

    <h2>第3位:おすし</h2>
    <p>サーモンと マグロが すき。</p>
    <img src="https://placehold.jp/300x200.png?text=Sushi" alt="おすし">
やってみよう
h2h3(エイチ・スリー)や h4 に 変えると、
文字の 大きさは どうなるかな? ためしてみてね!

🎉 おめでとう! 🎉

写真しゃしんいりの にぎやかな ランキングが できたね。

きな ゲーム」や「きたい くに」など、
いろんな テーマで ページを つくってみよう!