今回のお話はHTMLコーディング時のチェック項目についてです。コーディングが終わった後ってちゃんと見直ししていますか?「見直しするとミスが減る!」と学生時代から言われていましたが、社会人になっても見直しってとても大事なことだと日々思っています。そこで私が日ごろから行っているHTMLコーディング後のチェックのコツを書いていきたいと思います。他のブラウザでもちゃんと動いているか確認する拡張機能を使ってTDK・og・altをチェック!まとめ画面で比較!デザインと完成したページデザインのデータがあればそれに従ってWebページを作成していくと思います。同じように作りますが、padding・marginの空き方や、微妙なフォントサイズの違いなど、パッと見ただけではわかりにくい箇所もあります。一つのウィンドウでタブを分けて表示し、そこから差を比較していきましょう。Ctrl+tabのショートカットでタブを切り替えることができます。同じウィンドウで切り替えて見ることで、異なった場所を明確に探すことができます。この方法は画像が正しい位置にあるかも把握するのに便利です。最初と最後を照らし合わせる文字チェック原稿をコピーペーストで反映する際、その数が多いとどうしても正しい原稿が入っているかわからなくなりますよね。ここでの見直しポイントは、原稿全てを読むのではなく、文字の最初の文章と、最後の文章を確認することです。文章を全て読むのは時間がかかりますし、効率が悪いです。ポイントだけを絞って確認します。このように前半と後半の5~10文字くらいがあっていれば基本的にはOKですが、不安な場合は中も少しだけ照らし合わせてみましょう。校閲や校正をしているわけではないので、正しい文章が、正しい位置に入っているかをチェックするのがポイントです!ただ自分で文章を打ち込む際には、校閲・校正をちゃんとした方がいいと思います。リンク先のチェックは後半のURLに注目URLを追加していくとき、日本語ではないので即座に違いを判断しにくいですよね。言ってこちらも文章と同じく全てのディレクトリまで確認するのは大変な作業です。ポイントはURLの後ろから確認することです。大方のURLはhttp://かhttps://から始まると思うので前からだと判断がつきにくくなります。同じサイト内の違うページに飛ぶときは、ディレクトリが途中まで同じなので余計に手間がかります。後ろからであれば比較的バラついているので、右から左に見ていきます。途中不安になった場合は後ろから順にディレクトリを確認してみましょう!リンクパスの指定を確認リンクパスが相対パス(./や../)か相対ルートパス(/hogehge/)、もしくは絶対パスになっているのか確認しましょう。個々の指定を間違えると、公開する環境で画像やアイコンが表示されない!ということも起こりえます。正しいパスを指定してあげましょう。他のブラウザでもちゃんと動いているか確認する自分と同じブラウザを他の人も使っているとは限りません。他のブラウザでも動作のチェックを行いましょう。Chrome、IE、FireFox、(Macではsafariも)などの有名ブラウザはチェックしておくべきだと思います。拡張機能を使ってTDK・og・altをチェック!title、ディスクリプション、キーワード(弊社では略してTDKと呼んでいます)とaltのチェックはChromeの拡張機能を使ってパッと済ませましょう。こちらが弊社で作成し、実際に使用している拡張機能です。userstitle,description,keyword等を確認するChrome拡張機能!こんにちは、佐々木です!title,description,keyword等を確認する拡張機能が前々から欲しいと思っていたので、少し前に作成してみました!試しに非公開で社内用に使っていたのですが、今回Chrome拡張機能として一般公開しましたので、ご紹介させて頂ければと思います...Ctrl+Shift+alt+TでTDKやogの中身をチェックできます。Checker」サイトの見出し、画像alt、リンク先要素を表示するChrome拡張機能を作成しましたマークアップのチェック時にサイト内の見出し要素やalt要素を表示するツールが欲しくて作成しました。alt要素を表示しているイメージWindows:CTRL+ALT+SHIFT+Aで表示Mac:Option+SHIFT+C...Ctrl+Shift+alt+Aで画像のaltが表示されます。見える部分ではないですが、中身もしっかり確認していきましょう。ソースと開いて見るよりも、早く確認ができます。複数のブラウザで動作確認TDK・og・altの確認これらをチェックするとミスが格段に減っていきます。ミスと減らせばその後の修正も減っていくので、見直しはちゃんとしていきましょう!余談ですが、こういった確認作業の時はデュアルディスプレイをお勧めします。2画面の方が圧倒的に作業効率が上がります。それではまたお会いしましょう。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。