HTMLで404ページの作成方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで404ページの作成方法について解説しています。404エラーにアクセスした際の表示は自作のものを用意することが可能です。404ページに記載するべき内容とオリジナルの404ページの実装方法を覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで404ページの作成方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

404ページの作成方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

404ページとは

404ページとは、存在しないページにユーザーが訪れた時に表示されるエラーページです。

サーバーにアクセスした際の表示が404で処理されるため、404ページと呼ばれます。

また、htaccessに必要な記述をすることで、自身で作成した404ページを表示することが可能です。

 

404ページに記述すべき内容

先述した通り、存在しないページに訪れている事を伝えるのが目的です。

ユーザーを誘導したいページ(トップページなど)のリンクを設置するとことで離脱防止につながります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

404ページの設定方法と注意点

上記を踏まえて404ページを作成していきましょう。

htaccessに下記コードを記述し、FTPを使ってサーバーにアップします。

ErrorDocument 404 /404.html

 

404ページを作成してみよう

404ページはまとめサイトが存在するほど個性的なページが多く存在します。

サンプルを参考に作成してみましょう。

Google

 

GitHub

 

BASE

 

執筆してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。

過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

HTMLで404ページの作成方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。