レイアウトを崩してしまうhtmlの凡ミスいろいろ

htmlのありがちなミスには

• 入れ子のミス (開始タグと終了タグの 位置 間違い)
• タグの閉じ忘れ (開始タグに対応する終了タグが 欠損)
• 開始タグと終了タグの数が違う (一部の空要素以外は 開始タグと終了タグの数が一致している必要あり)

こんなところがよくありますけれど、本記事では上記のような大きなミスではなく
記号間違えちゃったー！
空白入れるの忘れた…
みたいなホントに凡々のミスについても、というか寧ろそちらをメインに触れていこうと思います。

" と “ は別の記号

とてもよく似ていますが別種の記号です。
"
の方がhtmlで利用する ダブルクォーテーション です。 もう一つの方は
“
htmlソースコードとしての 利用はできません

名称	Double Quotation Mark	Left Double Quotation Mark
見た目
種類	半角 1種のみ	全角 右ダブルクォーテーションあり (”)
エンティティ	"	“

フォント種によっては非常に見分けにくいので間違えてしまうことがあります。
キーボードから打つ前に半角に変更しないと、気付かずそのまま全角で打ってしまいます。
また、この間違いをしている方というのは
どこかのサイトからコピペで拾ってきた
場合が多いんですね。
情報提供者の意図はわかりませんが、記号をわざと(?)違えている場合があります。
ともかく htmlコードで全角は使えません ので注意が必要です。

内容を差し替える場合も注意

どこかからコピペで〜のパターンでひっかかりやすいのが、
差し替え対象範囲を間違える
ことです。

例えばこんな雛形があったとします。

<meta name="twitter:site" content="[ここにツイッターID]">

ツイッターIDが @xxxxx だとします。

<meta name="twitter:site" content="[@xxxxx]">

こう(前後の記号を残す)なのか。それとも

<meta name="twitter:site" content="@xxxxx">

こう(前後の記号を削除)なのか。
正解は後者の「記号を削除」なのですが、記号を省いて良いのかそのまま残すのかわからないことってみなさん無いですか (´・ω・｀)
情報提供者がわかりやすくするためにわざわざ用いた記号が却って迷わせてしまうパターン。
これについてはその都度どちらが正解なのか調べる必要がありますね。
調べなきゃどうしようもない(笑)
「たぶん… こっちやろ。」
という雰囲気だけではなんともならないのがhtmlです。

何故かよく間違える「別タブで開く」指定

ページ遷移時に 別タブで開く ための指定が target="_blank" ですが、何故か指定方法を間違える方が多いです。
blankの前にあるアンダースコア( _ ) が迷わせるんでしょうか(笑)
これがあるせいでなんとなく変な感じはしますよね。確かにね ^^;

もしくは、通常のaタグ (target="_self" 初期値ですので何も指定しなければ自動でこちらになります)に 追加 する方が多いからでしょうかね。

<a href="遷移先アドレス" target="_blank">テキスト</a>

アンダースコア欠損

<a href="遷移先アドレス" target="blank">テキスト</a>

属性間半角スペース欠如

<a href="遷移先アドレス"target="_blank">テキスト</a>

ダブルクォーテーション欠損

<a href="遷移先アドレス" target=_blank">テキスト</a>

a要素の終了タグ忘れ

これも本当によく見かけます。
そのほとんどが サイドメニューなどにブログランキングバナーを貼り付けている方
です。

aタグというのはページ遷移に利用するhtmlタグですが、終了タグを忘れても一見して問題が出ないこともあり、なかなか修正が行われないんですね。
ところがこのaタグのミスというのは ページの動作に影響を及ぼしています。
「リンクの範囲がなんかヘン… な気がするけどよくわからない (汗)」
「なんとなくクリックした時の感じがおかしい…？」
など違和感を感じることがあるかもしれません。

aタグに限らず終了タグの欠損というのは後続要素に大きな悪影響を与えます。</div> などはもう明らかにページがぐちゃぐちゃになることが多いのですぐ気づきますが </a> はなかなか気が付きにくい。
ランキングバナーなど、自分で貼り付けた要素だけでなく、貼り付けた近接の要素に何かしら違和感があるのなら一度確認を。

本来表示されるべきものが表示されていない
という場合にもa終了タグ忘れが影響していることがありますよ。
まぁ、出てこないわけですからこれまた気が付きにくいのですが。

コメントアウトの間違い

コメントアウト というのは、htmlやCSSやJSなど、書かれている内容を処理させないようにすることを言います。
そのために用いるのが コメント です。

コメントの書き方は html, CSS, JS それぞれ異なります が、全て同じ書き方をしてしまったり。
あるいはコメントに用いられる記号の過不足があったり。
コメントの書き間違いも後続要素に大きな悪影響を与えます。
描画させない、動作させない、など、つまり 機能させないために行う わけですから、ここが狂えば全てが狂うと言っても過言ではありません。

htmlコメントアウト

<!-- ここにコメント内容 -->

記号一部欠損

<!- ここにコメント内容 -->

記号間違い

<!-- ここにコメント内容 --!>

コメント内容の前後に半角スペースを用いるのが推奨です。

CSSコメントアウト

/* ここにコメント内容 */

記号一部欠損

/ ここにコメント内容 */

目立つように、という意味で

/***------------------------------------------
      カスタマイズ用
------------------------------------------***/

こんな書き方をわざとする場合もあります。
仕組みは以下の赤部分がコメントの記号で、他は全て「コメント内容」です。

/***------------------------------------------
      カスタマイズ用
------------------------------------------***/

これもなんとなく雰囲気で使って良いものではありません。最初と最後以外は全てコメント内容なんだ、と理解して使うべき。

JSコメントアウト

<script>
  $(function(){
    $('body').on('contextmenu',function(e){ // 右クリック禁止
      return false;
    });
  });
</script>

JS用コメントの注意は、ソース圧縮 をかける場合には利用してはいけない、というところ。
//
この2つのスラッシュが圧縮の際に悪さすることがあります。
圧縮を前提とする方はhtml用のコメントを JSコードの外で 利用するようにしてください。

例

<!-- 右クリック禁止 -->
<script>
  $(function(){
    $('body').on('contextmenu',function(e){
      return false;
    });
  });
</script>

まとめ

必須の記号が欠損している、というのは記事内でも多く見られるのですが、一番目につくのはやはり ランキングバナー 関連です。
FC2ブログがSSL対応になりましたので、慌ててランキングサイトへ行って新しいコードを取得される方も多いかと思います。
その際にはせっかく書き直すチャンスでもありますので、一度よくよくコードを眺めて見ることをおすすめします。