知識の枝

"All is well"

404 Not Foundページを作る

約412日前 2020年10月11日0:04
デジタル
HTML devchallenges

改訂履歴


2020/10/11 投稿

1. 背景


この記事はDev Challengesでスキルアップの第一弾です。

ネットサーフィンをしているとたまに「404 Not Foundエラー」が出てくることがありますよね?
このエラーは「Not Found」と書いてあるように、アクセスしようとしたURLのウェブページが存在しない場合に表示される画面です。

この404 Not Foundのエラーページは実は自作することが可能です。
今回はこのページを自作することが目的です。

Dev Challengesのスキルアップの一環として実施する為、
作成するページの構成は既に決まっています。
詳細を次項以降で説明します。

2. チャレンジ内容


・指定された構成の「404 Not Found」ページを作成する。
・ページはレスポンシブデザインであること。



【レスポンシブデザイン】
ウェブページを閲覧する端末(画面サイズ)によってページの表示内容を変更し、画面サイズごとに見易い最適な表示を行う設計のこと。

3. 成果物の公開方法


Dev Challengesのルールに則り下記①~③の構成とする。

①トップページ
成果物スクショ、デモページへのリンク、経験・学んだこと、何を使用して制作したか

②デモページ
成果物の動作が確認可能なページ

③解説ページ
どのように課題を解決したか説明

①、③は本記事で代用したいと思います。

4. コンテンツ


4.1 - リンク


課題はこちらのサイトから頂いております。
Devchallenges.io

成果物のデモページはこちらです。
デモページ - 404 Not Found

どのように取り組んだかは4.3項で解説しています。
解説へのショートカット

挑戦課題の元ページはこちらです。
挑戦課題 - 404 Not Found

4.2 - 概観





この成果物は
「html」と「CSS(bootstrap4.5)」を使用して作られ、
Djangoによってこのホームページに公開されています。

4.3 - 解説


作成したhtmlコードは下記の通りです。
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />

<title>404 Not Found</title>

<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />

<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>

</head>
<body>
<div class="container mb-5">
<div>
<h6 class="mb-5 pb-5">404 NOT FOUND</h6>
</div>
<div class="row">
<div class="col-md-6 align-self-center offset-md-1">
<div>
<img
src="{% static '404_not_found/Scarecrow.png' %}"
class="img-fluid"
/>
</div>
</div>
<div class="col-md-4">
<div class="container h-100">
<div class="row flex-column h-100">
<div class="col my-3 my-md-0">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-start" style="padding: 0">
<h1>I have bad news for you</h1>
</div>
</div>
</div>
</div>
<div class="col my-3 my-md-0">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-center" style="padding: 0">
<h5>
The page you are lokking for might be removed or is
temporarily unavaliable
</h5>
</div>
</div>
</div>
</div>
<div class="col my-3 my-md-0">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-end" style="padding: 0">
<a
href="/devchallenges"
role="button"
class="btn btn-dark"
>
BACK TO HOMEPAGE
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="text-center">
<div class="container">
<p class="text-black">chuna @ DevChallenges.io</p>
</div>
</footer>
</html>

デモページの成果物は上記のhtmlコードで作成されています。

CSSの部分についてはBootstrapに頼りきっています。
レスポンシブデザインのレイアウトが必要だった為、グリッドデザインを採用しています。
グリッドデザイン・・・container、row、col
containerの中に入子でcontainerを使用し、無理やりやっちゃってる感があるかもしれません。
(恥ずかしながら私の実力です・・・)

もっと他に良い方法があると思うのでアドバイスがある方はコメントでご教示願います。

5. 詰まったところ


進める上で困ったところがいくつかあったので紹介します。

5.1 - カラムのオフセット


挑戦ページの実施例(画像)を見てみると、大画面表示状態で「I have bad news for you」の「I have bad news」の部分で改行が入っています。
当初はグリッド数:12に対して、左側の画像に6、右側の文字6でカラムを割り振ろうと考えていましたが、
文字部分に6割り振ると大画面状態で改行が入らなかった為、割り振り数を4としたところ上手く表示されました。

このままでは全体カラム数が10となり全体的に左寄りの表示になってしまう為、
1カラム分だけオフセットさせました。

結果的に下記のようなスタイルになっています。
<div class="col-md-6 offset-md-1"> #画像側のカラム
<div class="col-md-4"> #文字側のカラム

基本のカラム幅は「col-md-6」で決めて、別途「offset-md-1」と指定することで、
1カラム分オフセットさせています。



どちらも「md」と入れることで画面サイズが小さくなった時にオフセットが解除されるようにしています。
オフセットを解除しないと、レスポンシブで画面サイズが小さくなったときに画像が1カラム分右だけ右にズレたように表示されてしまいます。



5.2 - 404 NOT FOUNDの位置


「404 NOT FOUND」文字列がページ全体に対する左上表示ではなく、画像の左上の位置にくるように調整しました。



やり方は簡単で、該当文字列のタグごとcontainerの中に入れ込むだけです。
画像が入っているコンテナに入れることで、同じ列上に表示されるようになります。

【変更前】
  <body>
<div>
<h6 class="mb-5 pb-5">404 NOT FOUND</h6> #この部分を<div>ごと移動させる
</div>
<div class="container mb-5">
<div class="row">

【変更後】
  <body>
<div class="container mb-5"> #container
<div>
<h6 class="mb-5 pb-5">404 NOT FOUND</h6> #containerの中に入れた
</div>
<div class="row">


5.3 - 入れ子colの幅


今回作った例では、
文章の位置調整のためにcolの中に更にcontainerを入れ込み、その中でcolを使用しています。

ここで問題になるのがカラム(col)の幅です。
上位のコンテナ内で分け合った4カラム分の幅があるのですが、
この中に入れ子でカラムを設けると、左右の幅が15px(ピクセル)分だけ小さくなります。
これはBootstrapのcolにデフォルトで左右方向に15pxのpaddingが付いていることが原因です。



このままでは幅が狭くなり過ぎてしまうので、このpaddingを打ち消そうと思います。
対象のカラムに「style="padding: 0"」を指定することで、paddingの設定を上書きします。
<div class="col" style="padding: 0">

こうすることで上位のカラムと同じ幅で中身が表示されます。

5.4 - 枠の大きさを確認する


コンテナやカラムを使ってコンテンツの位置調整を行う際、
自分の予想と違ったレイアウトで表示される場合がよくあります。

私の場合は枠となる要素に「class="border"」を一時的に付けることで確認を行っています。



枠線(=border)を表示することで、何が原因でレイアウトが崩れているのかを特定する助けになります。

5.5 - カラム内位置調整


縦方向いっぱいに伸びたカラムについて、中身のコンテンツの位置を調整したい場合に有効な手段。
「class="align-self-〇〇"」を指定することでカラムの「上側」「中央」「下側」を決められます。
<div class="col align-self-〇〇">

〇〇部分には今回の場合「start」「center」「end」を入れています。