見出し(h1〜h6)と 画像(img)で、
きみの推しを 紹介しよう!
このレッスンの やりかた
まずは、なんのランキングか わかるように タイトルを かきます。
HTMLに、下のコードを はりつけてね。
<h1>わたしの 好きな 食べもの ベスト3</h1>
h1(エイチ・ワン)は、ページの中で 一番 大事な 見出しだよ。
いよいよ 1位の 紹介だ!
少し 小さい見出しの h2(エイチ・ツー) と、説明文の p(ピー)をつかうよ。
さっきのコードの 下に ついかしてね。
<h2>第1位:カレーライス</h2>
<p>やっぱり これが ナンバーワン!
とくに おうちの カレーが だいすき。</p>
h2 は、h1 より 少し 小さいね。
文字だけじゃ さびしいから、写真を はってみよう。
img(イメージ)タグを つかうよ。
さっきの </p> の すぐ下に 入れてみてね。
<img src="https://placehold.jp/300x200.png?text=Curry" alt="カレーのしゃしん">
src="..."(ソース)の 中に、画像の アドレス(URL)を 書くんだ。
おなじように、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="おすし">
h2 を h3(エイチ・スリー)や h4 に 変えると、写真いりの にぎやかな ランキングが できたね。
「好きな ゲーム」や「行きたい 国」など、
いろんな テーマで ページを つくってみよう!