動作と表示の確認

パソコン上で作ったHTMLファイルをブラウザで開き、デザインの段階で作ったイメージと見比べて見栄えや動作の確認をします。
ホームページは全部作り終えてから確認するのではなく、作りながら確認していくのが効率的です。
なるべく早い段階で構文やスペルの間違いに気付いたほうが、修正する量が少なくて済むからです。
確認するべきポイントは大きく分けると以下の3つです。

① デザイン通りのレイアウトになっていること
② デザイン通りの装飾になっていること
③ リンクやボタンが正しく動作すること

具体的には、
・文字や画像が、正しい場所に正しい順番で表示されているかどうか?
・文字の字体、大きさ、色がcssの指定通りに表示されているかどうか?
・背景色や境界線など、cssで付けた装飾が正しく表示されているかどうか?
・ブロック同士の隙間や余白がcssの指定通りに表示されているかどうか?
・リンクを押すと正しいページに移動するかどうか?
・メールフォーム等の入力ボックスに文字が入力できるかどうか?
・メールフォーム等のボタンが正しく動作するかどうか?
・どのブラウザでも問題芯く表示されるかどうか?
・スマホやタブレッ卜でも問題なく表示されるかどうか?
などの観点で確認していきます。

特に最後の2つは忘れやすいので注意が必要です。
HTMLやcssは、ホームページにアクセスするブラウザの種類やパージョンによって対応している構文と対応していない構文があるからです。
利用者の多いブラウザについては一通り動作確認をしたほうが良いでしょう。
このような確認を行って、どこかおかしいところがある場合は、HTMLの構造が正しい階層になっていない可能性や、cssの構文が間違っている可能性が高いので、前の工程に戻って再点検します。
最初のうちは書き間違いに自分で気付くことが難しいと思いますので、インターネット上にある構文チェックツールを利用することをおすすめします。
「HTML自動整形ツ ール」とか「HTML構文チェッカー」などといったキーワードでインターネット検索すると見つかります。
自習だけでなく実務にもお役立ていただけると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です