htmlの記述ミスを減らす方法をご紹介-webaby【エンジニアお父さんの育児・子育て】

サイト制作は、大きく分けるとデザインとコーディングでできています。

そのコーディングで、記述ミスをしたことがないという人はいないと思います。みんな数をこなして慣れていく上で、ミスが徐々に減り、更にミスをしないようにリスクを最小限にする書き方をしている方がほとんどです。

そんなコーディングでの記述ミスを少しでも減らせる方法をご紹介します。

1. コーディングで記述ミスをすると？
2. コーディングで記述ミスをしない方法
3. 記述ミスが起きた時の対処法
4. 記述ミスを減らす方法のまとめ

コーディングで記述ミスをすると？

記述ミスをすると、どうなるのかと制作前から考えたことはありますか？

これは、経験者なら何度か考えたり、記述方法や順番を変えたりして対策している方がほとんどだと思います。

ですが、初めからこういう風に記述するとミスが少ないと教えてくれる人はなかなかいません。

記述ミスをすると、サイト制作でのデメリットは大きくなります。

記述ミスでのデメリット

• サイトが崩れて表示される
• 内部SEOに影響がでる
• ミスしている箇所を探すのに時間がかかる
• 検索して調べてもエラーの対処が出てこない
• 最初から書き直さなければならなくなる

こういったデメリットが多くなり、納期が迫っていても時間に追われ、クオリティを下げざる負えなくなったり、納期に間に合わなくなることもあります。

また、せっかくできていた部分も削除したりと時間がかかることが多いです。

記述ミスで出たサイト崩れやエラーは、ネットで検索しても対処法がほとんどでてきません。逆に言うと対処方法がでてこない崩れやエラーは初歩的なミスが多いということになります。

この初歩的なミスほど、探すのに時間がかかることはないです。

コーディングで記述ミスをしない方法

初歩的なミスを無くしたり減らす方法はないのかというと、コーディングの記述方法で格段に減らすことができます。

また、コーディングする際に使うツールによっても補正してくれたり、記述ミスを表示してくれるものもありますが、今回は簡単なエディタでコーディングする方向けにご紹介します。

インデントや行を余分にとる

コーディングは、見た目が大事です。誰が見ても分かりやすく、どこで始まりどこで終わるかをしっかりと分かるように記述することで、ミスが起きても対処が早くなります。

記述例が下記になります。

まずは、タグを階層ごとにインデントを付けて、開始タグと終了タグを同一の列に記述するようにしましょう。

次に、box01とbox02の間（7行目）に1行開けています。こうすることで、コンテンツを別々にします。こうすることで、どこからがどのコンテンツなのかを一目で分かるようになります。

開始タグを記述後はすぐに終了タグを記述

開始タグ<ul>を記述した後に、そのまま<li>を記述せず、まずは</ul>を記述してから<li>タグを記述するようにしましょう。

記述ミスでサイトの崩れが起きやすいのは終了タグの書き忘れが多いです。こうすることによって終了タグの書き忘れを防ぐことができます。

コメントアウトを利用する

大きなコンテンツ同士を続けて記述する際は、コメントアウトで解かりやすく簡単な説明を書くようにしましょう。

コメントアウトとは<!–と–>で囲むことでサイトには表示されずコードにメモができるようになります。

これを使い、1行開けるだけでなくコンテンツ同士を分かりやすくします。

上記は少ないコンテンツ例ですが、実際のサイト制作では1つのコンテンツに画像やテキストなどいろいろなものが多くつかわれます。

多くなれば、それだけ見にくくミスも起こりやすくなります。

記述ミスが起きた時の対処法

上記のような書き方でコーディングをしていてもミスは起きます。

例えば、コピペをする際に「>」が抜けたりもします。そういった時でも上記のような書き方をしていればミスをすぐに見つけることができます。

崩れている部分のタグ確認

サイトは崩れている大きさでどこから崩れているのかがわかります。まずは崩れていない部分を探し、崩れていない部分の直下に記述したタグから確認してみてください。

タグの開始タグ・終了タグを確認

大きく崩れている場合は、コンテンツの外側のタグが原因の可能性が高いです。まずは、コンテンツの外側のタグから開始タグ・終了タグを有無を確認し、全角になっていないかなども確認してみてください。

ミスが見つけられない場合

行を開けて書いたり、コメントアウトで区切っている部分のコンテンツを一度削除します。（削除前のデータは残しておいてください）

サーバーにアップロードします。そうするとごっそりとコンテンツがなくなり、サイトの崩れが消えていることが多いです。これで崩れている場合は、削除した場所以外にミスがあります。

次に、削除したコンテンツを再度コピペして、次に細分化して削除しアップロードをして確認します。これを繰り返しすることで、どこにミスがあるかということを絞っていきます。

記述ミスを減らす方法のまとめ

今回、ご紹介した内容は経験者の方には、当たり前と思う人も多いかもしれません。

ですが、初心者やこれからコーディングを学ぶ人には、サイトを作ることだけでなくミスをした時の対処法を知っておく必要があります。

記述ミスを減らす書き方やミスをした時の対処法など、はっきり言って地味な作業になります。また、時間もかかる作業です。

ですが、サイト制作では重要な作業でもあるので、少しでもミスを減らし、少しでも改善する時間を減らす事が大切です。

ミスを減らす書き方や対処がしやすい書き方を目指すようにしてください。