【初心者向け】30日間でWebサイト作成チャレンジ｜5日目：HTMLの画像とリストの使い方

HTMLで画像を表示させる方法は非常に簡単です。 以下のHTMLコードをご覧ください。

                
<img src="./yama.png" alt="Yamaのプロフィール画像">
                
              

src=""には画像のリンク先を指定します。

altには画像の説明します。これは目の見えない方達に対してどんな画像であるかを説明するためのものです。

上記のコードを実行結果がこちらです。

画像によっては大きすぎたり、小さすぎたりすることもあるのでその場合はCSSを使ってwidthを用いて横幅を指定する必要があります。

リンクを指定する際に画像がどこにあるかを理解する必要があるのでそこを注意して頂きたいです。

リストを表示させる方法は非常に簡単です。

以下のコードをご覧ください。

                
<ul>
  <li>カレー</li>
  <li>唐揚げ</li>
  <li>小ライス</li>
</ul>
                
              

コードの実行結果がこちらです。

このliタグはいくらでも増やすことができます。

ですが増やしすぎはUI(見た目の良さ)を悪くするので注意が必要です。

以上がHTMLでの画像とリストの表示のさせ方でした。

いかがでしたでしょうか？全体的に簡単な内容なのでスムーズに進めることができたと思います。

この記事で覚えて頂きたいのが画像の表示の仕方にはリンクを指定する必要があるということと、

リストを作るにはulタグの中にliタグを用いることで表示させることができるということです。

関連記事

【初心者向け】30日間でWebサイト作成チャレンジ｜6日目：CSSで色とフォントを変更する

2026/04/13

いよいよ6日目です！今回はCSSを使って文字に装飾をしていきます。 文字はWebサイトを開発するにおいて重要な役割を持っています。 そのため文字に装飾を施すことで...