無くならないhtml構文エラー 簡単なチェックの仕方

無くならないhtml構文エラー 簡単なチェックの仕方

カスタマイズ HTML, CSS, JavaScript
2021/09/23
3
vanillaice (Akira)
vanillaice (Akira)
初心者向けトラブル対処EducationHTML

htmlの構文エラーは「見た目に影響が出てすぐに察知できるもの」と「見た目にはわからないもの」とがあります。FC2ブログ一般ユーザーさんの抱えるエラーというのはほとんどが 開始タグと終了タグの数の不整合 です。今回は簡単なチェック方法をお伝えします。

本記事は初心者向け、htmlモード(編集)利用者向けです。

ブラウザの文字列検索機能を利用しよう

チェックツールなどもあるんですが、ツールを使う場合はまずそのツールの使い方説明からしなければいけない(笑)
なので今回は恐らくどんな環境下でも、そして誰にでもできるであろう方法を。
* ただし「パソコン」のみでのチェック方法です。

文字列検索

どのブラウザでも必ず付いている機能です。

Windowsキーボード
Ctrl + F

Macキーボード
Command + F

それぞれ2キーを同時押しすると検索窓が出てきます。FC2ブログの新投稿画面は Google Chrome 推奨 なので、サンプルにすると

赤枠で囲ったものが文字列検索窓です。まずこの操作を覚えておかれると良いと思います。例えば長いブログ記事で特定の文字列を見つけたいときなどに重宝します。今回は タグの数を知るため に利用します。

チェックすべきページ

  • 記事作成(編集)画面
  • プラグイン編集画面

html構文エラーのほとんどが ユーザーが記した内容 の中にあります。もちろんテンプレートに構文エラーが存在しないことが大前提です。

記事で利用したhtml、そしてプラグインについては「編集を行った」あるいは「フリーエリアプラグインをDLし、そこに内容を記載した」場合ですね。

記事に問題がある場合はほとんどが単発なんですが、場合によっては 定型文にエラーがある ことも。ランキングバナーの掲載などもそれにあたります。定型文掲載でほぼ全ての記事に記載しており、そこに構文エラーがある、という場合とても残念ですが 全て修正 ということになります (´・ェ・`)
* ランキングバナーについては各記事その都度記載ではなくテンプレートhtmlへの記載をおすすめしています。

プラグインの場合は一度修正すれば済みますので労力としては少ない方ですね。

チェックの仕方とチェックする内容

非常によく見かけるエラーは以下のhtml要素です。

div span a

もうほとんどがこれ (´・ω・`)
あと p もあるんですが、p要素の場合ちょっと特殊な事情がありますので後述します。

チェックの仕方

まずdiv要素を例にします。検索窓に <div と入れてください。

クリックで拡大

該当する箇所はハイライトが行われます。Enter/ Return キーを押下すると次の該当箇所へと順にジャンプします。

コツは <div> ではなく <div と、右側のブラケット無しで検索することです。こうすると例えば <div style="margin: auto;"> などもヒットします。
* 文字列検索は完全一致です。アルファベット大文字小文字の区別は行われません。

ここでチェックするのは 該当総数 です。サンプルでは 4/11 と表示されていますね。この右側の 11、これがdiv要素の 開始タグ 総数です。この数を覚えておいてください。

次に </div> で検索。

クリックで拡大

結果の総数は 10 ですね。これがdiv要素の 終了タグ の総数。先程検索した開始タグの総数は 11 だったので、数が合っていません。開始タグと終了タグの総数はきっちり同じでないといけませんので、すなわち どこかに構文エラーがある ということになります。この場合は「終了タグが足りない」というエラーということですね。

同じように <span</span> そして <a</a> でチェック。

p要素について

p終了タグを省略できる要素 なので、人によっては

<p>あいうえお</p>

ではなく

<p>あいうえお

と書いている場合があります。個人的には「終了タグ省略は上級者向け、初〜中級者は省略非推奨」ということを以前からお伝えしています。特にhtml初心者の自覚がある方は 絶対に省略しない という気構えの方が良いと思います。

で、省略を行っていなければ上記の方法が有効ですが、省略している場合はチェックしても意味がありませんので(数が合わないに決まっているので)、チェックしたい場合には 一旦記事の保存を行ってください。そして再度編集画面を開くと、自動で終了タグの </p> が補完されているはずなので、それでチェック可能になります。

あとは li などもそうですね。

<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
</ul>
<ul>
<li>あいうえお
<li>かきくけこ
</ul>

構文ルール的にはどちらも正しいですが、初心者さんは省略しない。こちらについてもp要素と同様に保存後の補完状態でチェック可能。

構文エラーは数だけではない

このチェック方法では「数の不整合」はチェックできますが「位置の不整合」まではチェックできません。

正しい位置関係

<div><span style="color: red;"あいうえお></span></div>

間違った位置関係(構文エラー)

<div><span style="color: red;">あいうえお</div></span>

位置の不整合をチェックする簡単な方法というのは ありません。何故なら位置によってボックスレイアウトは変わりますので、コード作成主の「意図」というのを無視できないからです。それでも単純な構文であれば明らかなエラーというのは見ればわかりますので、どうしても自分で理解できなければQ&Aサイトなどで有識者に手助けを乞うなどされると良いと思います。

まとめ

今回は開始タグと終了タグの「数」に関係する構文エラーについてお話しました。私個人からのアドバイスなのですが、どこかのページを参照してhtmlを書くときには記事の日付が新しいか必ず確認をする ことをおすすめします。

2015年以前に書かれた記事は参考にしない、ぐらいで良いと思います(記事の更新日時も重要です)
というのは、拝見しているととにかくもう、コードが古い… ( ̄∀ ̄;)

古い!(廃止属性)

<font color="red">赤文字</font>

新しい(正規)

<span style="color: red;">赤文字</span>

古い!(廃止属性)

<div align="center">センタリング</div>

新しい(正規)

<div style="text-align: center;">センタリング</div>

古い!(廃止属性)

<center>センタリング</center>

新しい(正規)

<div style="margin: auto;">センタリング</div>

とかほんともう… ダメよー ( ̄∀ ̄;)

最後に、「html構文ルールのことはある程度わかっている」という方はバリデータを利用してくださいね。

Related post

Comments  3

-
2021/09/26 (Sun) 14:23

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/26 (Sun) 18:37

To 雑談 内緒さん

もー何度見ても泣けるー ( ̄∀ ̄;)
私の場合声出して泣く(というか嗚咽)ので家族に引かれます。

私は伊之助の声優さんの声とても好きです。話変わってしまいますが、佐藤せつじさん(鬼滅には出ていません)、という声優さんの声が最初はすごく嫌いで。なんか変な声とか思ってたんだけども、今すっごい好きになった。なぜか知らないが(笑)

Macの日本語変換はアホな子ちゃんなのでGoogle日本語入力に変えた方が良いですよ。macの日本語アホ変換は伝統です(笑)

-
2021/09/26 (Sun) 19:41

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)