どーもこんにちは、okamotoです。
Web初心者にとっては、やはり「自分のコーディングってあってるのかな」と不安になりますよね。慣れてきたとしても、最終チェックは必ず行いたいもの。
今日は、コーディングチェックの方法についてご紹介したいと思います。
チェック方法は、下記の５点あります。
１．「alt（代替テキスト）」チェック
２．「コンソールエラー」チェック
３．「404」チェック
４．「The W3C Markup Validation Service」
５．「増減」チェック
１．「alt（代替テキスト）」チェック
まずは画像のalt属性が適切に設定されているかをチェックします。
ちなみに、画像のalt属性とは“代替テキスト”の意で、画像の読み込み失敗時に表示されたり、検索エンジンが画像の代わりに認識する為のテキストです。
また、目の不自由な人が画像のalt属性の値をスクリーンリーダーで読み上げたり、点字に変換して認識することもできます。
Webサイト制作時には、写真やイラストを載せるだけでなく、デザインの為にテキストが入っている画像を利用することがよくありますが、このalt属性を入力していないと・・・
例えば、h1タグにテキスト入り画像を挿入していた場合、コンテンツ上重要なテキストが入っているのにも関わらず、コンピューターがテキスト情報を認識せず、SEOに悪影響を与える可能性があります。
装飾的な画像であれば、alt属性値が空でも問題ないですが、テキストが入っていたり、コンテンツ上重要な写真や図であれば、必ずalt属性を入力するようにしましょう。
２．「コンソールエラー」チェック
次に、コンソールエラーチェックします。
コンソールエラーのチェックは、開発ツールのConsoleタブでチェックします。
この時、コンソールエラーが発生していると、「問題が発生している」ということになりますし、また、通常のログに関しましても、古いIEで正常に動作しなくなる原因となりますので、ログも納品時には出ないようにしておく必要があります。
３．「404」チェック
3点目は、「404」チェックです。
開発ツールの、Networkタブにてチェックできます。
Networkタブを開け、「Ctrl + Shift + R」を押して、リロードすると、ファイルを読み込もうとして失敗した場合、”Status”にて「404」という数値が出ているか、「failed」となっているはずです。
この場合、本来表示するべき画像等が表示されていない、もしくは必要のないファイルを読み込もうとしている可能性が考えられますので対処が必要です。
「200」または「finished」となっていれば問題なしです。
４．「The W3C Markup Validation Service」
下記のHPページにて、”Validate by Direct Input”を選び、HTMLコードをコピー＆ペースト→”Check”ボタンを押すと、コードのミスチェックができます。
ソースコードがW3Cが規定しているWEB標準に準拠しているかチェックします。
＜W3C Markup Validation Service＞
https://validator.w3.org/
WEB標準を満たしていない場合、SEO的に悪い影響が発生したり、特定のブラウザで表示が崩れたりする要因になる場合がありますので、要注意です。
５．「増減」チェック
そして最後に、「増減」チェックを行います。
サイト運用時に増減しやすいコンテンツ（テキストやリスト項目、数値の桁数など）を実際に増減させ、レイアウト崩れが起きないかを確認します。
という訳で、いかがでしたでしょうか？
結構チェック項目多いですね。目が痛くなりそうです。
「チェック、チェック」といいましたが、皆さんたまには目を休めることもお忘れなく。
ちなみに目には”ブルーベリー”が良いそうです。
私は、砂糖漬けブルーベリーをヨーグルトにかけて食べますが、友人はブルーベリーサプリメントもすごく良いと言っていました。
余談でした。
それではまた次回に。
by okamoto