初心者がXHTMLを上達するためのポイント
初心者がXHTMLのマークアップを覚えるときに、
『コレをおさえておけば大丈夫！』
というポイントをまとめてみました。
マークアップするための基本も含めて、
上達するためのポイントは以下の通り。
１．２．７．10は最初はありがちな間違えだ。
僕も最初はかなりの頻度で間違っていた。
今でもimgやmetaの最後のスラッシュを忘れたりする。
作るときに最初から間違えない人はいないのだから、
作り終えたときに必ずチェックして直すようにすればいい。
最後のimgの例を３つ挙げたが、
スラッシュの前には必ず半角スペースを一つ入れるようにしよう。
入れないとエラーだ。
３については単にしなければいい。
テーブルレイアウトはHTMLに表示指定を組み込んで、
本来のテーブルの役割をしていないつくりをしているし、
ユーザビリティ的にも向いていない。
フレームを使ってのつくりは、
同じ表示しているページの中に別なページが存在していたりするし、
ユーザーの混乱を招く可能性があるので、今は使われていない。
しかし、少し古いオーサリングソフトとかを使うと
フレームレイアウトを使ったり、
テーブルレイアウトで作成してしまう場合があるので、
必ずソースコードを見直すようにしてほしい。
４と５は、たとえばfontのタグを使ったり、
<div></div>と中身を何も入れずに書いたりすること。
HTMLの本来の意味では用いるべきではないでしょう。
６は初心者は特にいろんな文法など覚えていないのなら、
すんなりStrictの文法を覚えることができると思う。
基本的な構造がStrictなのであるから、
最初から覚えるのが一番だ！
８と９は、タグに迷ったときに使ったり、
CSSをつける上で徐々に安易につける場合が多いが、
多用はしないほうがいい。
構造がより複雑になってしまう場合もあるので、
なるべく使わないほうがいいだろう。
11、12は、ソースを書いていく上で、
ミスを少なくするためである。
他の人が見ても、わかるようにインデントを入れたり
必要部分にコメントを入れて、ソースをわかりやすくしよう。
13は必ず行うようにして欲しい。
もちろん作っている最中からわかるようなソフトもあるので、
そういうのを導入しておいて、チェックしやすいようにしよう。
Firefoxのアドオンで、『Html Validator』というのもあるので、
ぜひ導入しておくといい。
説明が不十分かもしれないが、
これから勉強するという人は参考にして欲しい。
しかし、１〜10までの項目に関しては、
全部クリアしておくことで
だいたいの事がStrictの文法につながっていくことなので、
気をつけながら制作するといいでしょう。
『コレをおさえておけば大丈夫！』
というポイントをまとめてみました。
上達するためのポイント
マークアップするための基本も含めて、
上達するためのポイントは以下の通り。
- １．タグは小文字で書く
- ２．終了タグを入れ忘れない
- ３．テーブルレイアウトやフレーム仕様にしない
- ４．表示の指定を直接組み込まない
- ５．表示の指定を目的に空の要素を使わない
- ６．作るときはXHTML1.0 Strictの文法で
- ７．入れ子にしたときはタグの終了順序を間違えない
- ８．divの入れ子はなるべくしない
- ９．divやspanを乱用しない。
- 10．空要素の最後のスラッシュ(/)を入れ忘れない
- 11．インデントなどを使い読みやすいソースにコードにする
- 12．適度にコメントを入れておく
- 13．最後に必ずバリデートしてみる
１．２．７．10は最初はありがちな間違えだ。
×→<BODY> ○→<body>
×→<p>あいうえお ○→<p>あいうえお</p>
×→<div><p><strong>あいうえお<p><strong><div>
○→<div><p><strong>あいうえお<strong><p><div>
×→<img src="###"> ×→<img src="###"/>
○→<img src="###" />僕も最初はかなりの頻度で間違っていた。
今でもimgやmetaの最後のスラッシュを忘れたりする。
作るときに最初から間違えない人はいないのだから、
作り終えたときに必ずチェックして直すようにすればいい。
最後のimgの例を３つ挙げたが、
スラッシュの前には必ず半角スペースを一つ入れるようにしよう。
入れないとエラーだ。
３については単にしなければいい。
テーブルレイアウトはHTMLに表示指定を組み込んで、
本来のテーブルの役割をしていないつくりをしているし、
ユーザビリティ的にも向いていない。
フレームを使ってのつくりは、
同じ表示しているページの中に別なページが存在していたりするし、
ユーザーの混乱を招く可能性があるので、今は使われていない。
しかし、少し古いオーサリングソフトとかを使うと
フレームレイアウトを使ったり、
テーブルレイアウトで作成してしまう場合があるので、
必ずソースコードを見直すようにしてほしい。
４と５は、たとえばfontのタグを使ったり、
<div></div>と中身を何も入れずに書いたりすること。
HTMLの本来の意味では用いるべきではないでしょう。
６は初心者は特にいろんな文法など覚えていないのなら、
すんなりStrictの文法を覚えることができると思う。
基本的な構造がStrictなのであるから、
最初から覚えるのが一番だ！
８と９は、タグに迷ったときに使ったり、
CSSをつける上で徐々に安易につける場合が多いが、
多用はしないほうがいい。
構造がより複雑になってしまう場合もあるので、
なるべく使わないほうがいいだろう。
11、12は、ソースを書いていく上で、
ミスを少なくするためである。
他の人が見ても、わかるようにインデントを入れたり
必要部分にコメントを入れて、ソースをわかりやすくしよう。
13は必ず行うようにして欲しい。
もちろん作っている最中からわかるようなソフトもあるので、
そういうのを導入しておいて、チェックしやすいようにしよう。
Firefoxのアドオンで、『Html Validator』というのもあるので、
ぜひ導入しておくといい。
説明が不十分かもしれないが、
これから勉強するという人は参考にして欲しい。
しかし、１〜10までの項目に関しては、
全部クリアしておくことで
だいたいの事がStrictの文法につながっていくことなので、
気をつけながら制作するといいでしょう。
参考サイト：
