タグがエラー｜html｜入れ子｜要素｜参考にした本
後日、参考にならなかった本についても追記しました。
エラーのタグについて調べた事、html タグでエラーの場合に
要素が入れ子などでややこしい場合に見付ける方法（目視と手動）などです。
チェックツールや拡張機能が簡単なので、沼にお気を付けください。
私と同じくあまり詳しくない人に・・、参考になりましたら幸いです。
目次 |
１： タグのエラーの例と解決したときの方法
bloggerで、html モードから作成モードに切り替えようとして、エラーで切替出来ない場合がありますが、
ツール・拡張機能で探すのも勿論いいと思いましたが、自分はＤＬや重要な権限を持たれたくないので保留。
タグの間違いを理解したいなど、目視と手動で行う他の方法です。
- 1-1 原因は？｜最初に確認｜いくつかの例
- 1-2 タグの親・子の要素が入れ子になっている場合の確認について
- ＨＴＭＬモードの場合に＜ol＞と＜ul＞で、入れ子になっていることと、
- ＜ul＞や＜ol＞の中に＜ｂｒ＞を入れてはいけないとか
- ＜ｐ＞の中に＜ol＞と＜ul＞を入れてはいけないという決まりがあり
- 1-3 ほかの原因｜確認とエラー解消法（目視と手動ほか）
一番後ろ（下）に＜/ｄｉｖ＞などと閉じるタグが引っ付いていたり、
エラーのタグが赤い文字になっていて直ぐにわかる場合もありますが、
いくら確認しても全然分からない時があります。エラーで文字の色が変わらない、不足のタグが足されていない場合です。
そのパターンでの原因は、「タグの親・子の要素が入れ子になっている場合」がある様でした。
以来、気にしてチェックしていたのですが随分と探すのに時間かけている気がして、見付ける方法（ルール）を調べました。
それらのせいでエラーになっている様でした。
ｈｔｍｌモードの画面左上の虫メガネマークで、怪しいタグ（例：＜ｄｉｖ＞、＜ｐ＞、＜ｏｌ＞、＜ｕｌ＞、＜ａ＞＜ｔａｂｌｅ＞など）を検索します。
すると、該当するタグは色のついたマーカーで引いたように分かり易く出てくるので、
＜ａ＞のタグ１つに対して＜／ａ＞のタグが１つ足りない・・などのチェックが出来ます。
簡単に解決したい場合、チェックツールやプラグインなどの拡張機能を使うと「秒」で解決するそうですが。。
更にほかの方法ですが、画像の挿入タグで長い記号の入ったものを一旦、削除してアップロードし直すと良くなるかもです。
（コピーや貼り付けで記号がずれたり、リンク切れを起こしているのに分からない場合があるので）
２： タグの親・子の要素が入れ子｜ｏｌとｕｌ
上記で並べましたが、少し掘り下げてみました。一番上の要素（祖先）は、＜ｈｔｍｌ＞で、次に＜ｂｏｄｙ＞や＜ｈｅａｄ＞、それらの下に＜ＴＩＴＬＥ＞、＜ｈ１＞、＜ｕｌ＞、＜ｐ＞などが使われます。下にも説明入れます。
ＨＴＭＬモードの場合に＜ol＞と＜ul＞で、入れ子になっているときに、特に注意が必要なことです。
- 2-1 ＜ul＞の中に＜ol＞ を入れ子にしたい場合、
- 2-2 ＜ol＞と＜ul＞についてのいろいろ：エラーの例
- 2-3 ＜ul＞や＜ol＞の中に入れてはいけない
- 2-4 サイトによって違う場合
- 2-5 ＜ｐ＞の中に＜ol＞と＜ul＞を入れてはいけない
＜ul＞の中に＜ol＞ を入れ子にしたい場合、 ＜ｕｌ＞は親要素なので
＜／ｏｌ＞と、＜ｏｌ＞を一旦閉じてから＜／ｕｌ＞と、＜ｕｌ＞を閉じます。
ブログサービスなどに因るのかも知れませんが、＜ol＞を＜ul＞に入れようとした時にどうしても出来ず、一旦は＜／ｕｌ＞を閉じて、＜ｏｌ＞～～＜／ｏｌ＞と、しなければならない時がありました。
何故かは今もって分からないのですが、こういう場合もありましたという話です。
バージョンアップしたりすると変わった気がします。
＜ul＞や＜ol＞の中に＜ｂｒ＞を入れてはいけないとありました。
＜ｕｌ＞や＜ｏｌ＞のリストタグは入れ子にすると反映出来ない（何も印や番号が付かない）時があります。
これも、サービスによって違いました。何ならタグが全く反映されず、勝手に消えている事もあります。（無料のブログサービスなど。）
＜ｐ＞の中に＜ol＞と＜ul＞を入れないという決まりがありました。
＜ｐ＞タグを使った場合、必ず＜／ｐ＞で閉じてから＜ｕｌ＞や＜ｏｌ＞のリストタグを使います。
３： ＜ＢＲ＞改行のタグについて｜
アメブロや楽天・ジュゲムなどの無料ブログのサービスだと、ｈｔｍｌではない編集画面で「ｅｎｔｅｒ」押すといくつでも改行が出来て
たくさん改行してスペースが空いていると画面も白っぽくてスッキリしていますし、文字が少なくてとても読み易い感じがします。
しかしながら、これをこのままでは他のブログサービスに引っ越すときに大変な場合があります。
例えば、普通に
改行するときには「＜ｂｒ＞や＜/ ｂｒ＞の改行タグ」を使うのですが、その＜ｂｒ＞について実際に行ったりして分かったこと。。
＜ＢＲ＞の改行タグが２つ並んでいるとエラーになるという説明もあり、
「＜ｂｒ＞＜ｂｒ＞」のように＜ｂｒ＞や＜／ｂｒ＞の２つ以上並んだものを１つになるように削除すると解決しました。
これもサービス（無料ブログなど）に拠って違うのか謎ですが。
怪しいときは削除するとスッキリしますし、原因がそれだったらエラーが直ります。
４： 大文字と小文字は区別されない｜要素の詳細
- 4-1 大文字と小文字は区別されない
- 4-2 要素の詳細
- 4-3 他の呼び方｜初心者に向けて
例えば、＜ＨＴＭＬ＝＞でも、＜ｈｔｍｌ＝＞でも、大文字と小文字はどちらでもよくて混ざっても関係ないそうです。半角であることは必要ですが。
上記で少し表記しましたが、
一番上の要素（祖先？）は、＜ｈｔｍｌ＞で、
次に（親要素？）＜ｂｏｄｙ＞や＜ｈｅａｄ＞、
それらの下に（要素・・起点）＜ＴＩＴＬＥ＞、＜ｈ１＞＜ｈ２＞、＜ｕｌ＞＜ｏｌ＞、＜ｐ＞、＜ｄｉｖ＞
その下（子孫要素）は＜ｌｉ＞、＜ｓｔｏｒｏｎｇ＞などが使われます。
横に並んでいるのは兄弟要素となります。
ＣＳＳの「包含ブロック」や、「継承」などといった「性質」という説明がありましたが、
専門用語みたいな感じがするので、見付けるのが難しいです。
初心者向けの表現を考えると
ほかの言い回しは、「内包」とか、「含まれる」「含む」になると思います。
５： 本を購入する時の選び方｜初心者向けに参考にならないと思った本
- 子 親 要素 入れ子
本が古いからなのか分かりませんが、索引で調べても載っていないものがあったり、全く分からなかったりします。
この本は買う価値がなかった（高額なのに）と思ったので、それを購入の時のチェック項目にしようと思います。
「ホームページ辞典」という本でしたが、「辞典」なので以下の単語もどこか（廃止された属性とかいうページなど）に載せて欲しかったというか、同類のタグがありますとか少し書いてくれても良かったです。次はそういう点で網羅された本を探します。以下が探して見付からず困ったタグなどです。
＜strike＞タグ（取り消し線）が、索引で載っていない・・（代わりに＜ｄｅｌ＞や＜Ｓ＞を使うページ、ＣＳＳでｌｉｎｅ－ｔｈｒｏｕｇｈという取消線の方法 は見付けた）
「入れ子」という言葉がない・・但し、親要素・子要素・兄弟・子孫・類似・祖先などの細かい索引はあったが、ｗｅｂ検索では「入れ子」という説明が多かったので、そういう誰でも分かり易い言葉も入れて欲しい（というか、分かる人に向けた本みたいなので、初心者向けで探すしかないかも）。
６： 参考・終わり
ここまで読んで頂きありがとうございました。
いかがでしたでしょうか。
何か少しでも参考になれば幸いです。
良かったら気が向いた時にでもまた覗いてやってくださいませ。
よろしくお願い致します。
コメント
コメントを投稿
読んで頂きありがとうございます。
お気軽にコメントして頂けると嬉しいです。
返事は９０％くらいお返ししますが、めちゃくちゃ遅い場合があります。
気長にお待ちください。