HTMLの基礎の基礎15

作成日：2026-04-28

【55】404ページ（HTML）

• 「404 Error Page Not Found」
• ページが見つからない場合に表示されるページ。
• 以前は存在していたが、作成者が削除したページを検索エンジンがまだ結果表示していたり、どこかに（自分または他人が）URLリンクを残していたりすると、そのURLをクリックして訪れる人がいるので、正規ページへ案内するために必要。


• 意外なことに、このページのデザインがおしゃれなWebサイトが世の中には多いです。
• 基本的に見られることは少ないページなのに。

• 「404ページ」で検索すると、企業などのちょっとこだわりデザインの404ページを見ることができます。

【56】background-image（CSS）

• 背景に画像を使用するためのCSSです。
• 重要なのは「データファイルサイズの大きい画像は使用しない」ことです。

• Webサイトで使用する画像は、すべて「できるだけ軽く」することが重要な基本ルールです
• 画像や動画は、ページを開いた側のPCやスマホにすべてダウンロードされ表示されています。

• 文字は、画像や動画とは違う方法で表示される仕組みになっています。
• 文字は相手のネット速度やPCやスマホに対する負荷は軽いです。


• それでも1ページに文字だけを超長文で表示させようとすると重くなります。
• 文字だけなら軽いと言ってもやりすぎは厳禁です。

【HTML】

<div class="kakomu bgicss-02">
  <ul>
    <li>文字は画像や動画とは違う方法で表示される仕組みになっています。</li>
    <li>文字は相手のネット速度やPCやスマホに対する負荷は軽いです。</li>
    <br>
    <li>それでも1ページに文字だけを超長文で表示させようとすると重くなります。</li>
    <li>文字だけなら軽いと言ってもやりすぎは厳禁です。</li>
  </ul>
</div>

<div class="kakomu bgicss-06">
  <ul>
      <li>文字は画像や動画とは違う方法で表示される仕組みになっています。</li>
      <li>文字は相手のネット速度やPCやスマホに対する負荷は軽いです。</li>
      <br>
      <li>それでも1ページに文字だけを超長文で表示させようとすると重くなります。</li>
      <li>文字だけなら軽いと言ってもやりすぎは厳禁です。</li>
  </ul>
</div>

【CSS】

.bgicss-02 {
  background-image: url(../img/BGimg002.png);
}

.bgicss-06 {
  background-image: url(../img/BGimg006.jpg);
  color: #fff;
}

• cssからimgフォルダの画像を呼び出す場合、注意が必要です。


• htmlから呼び出す場合は、htmlの下にimgフォルダがあるので「img/画像名.jpg」だけでOK!なのですが。
• cssフォルダはimgフォルダと同じ場所にあるので、下記の書き方が必要になります。


• 「../img/画像名.jpg」
• 「ドットドットスラッシュ」を書き加えるだけです。

【今回はここまでです】

今回は「404ページ（HTML）」「background-image（CSS）」を解説しました。

次回は「リセットCSS」「他人のwebページのHTML・CSSを見る」を解説したいと思います。