CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！

と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。

ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。

もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。
何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。

ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。
楽しんでナンボっす。

で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅力ばかりに目が言ってる人（ボクとか）辺りでしょうか。

その辺りの方々が陥りやすい部分についてチョコっと書きたいと思います。

---- こっから続き

HTMLなのに<br />と空要素タグを閉じている。（ /を入れている）

勿論この逆も頻繁に見ます。
XHTMLで書いてるはずなのに、<br>とか大文字使っているとか。
XHTMLでは、要素名は小文字で書くよう決まってます。

空の要素で見た目を制御する。

CSSを使えば、

<ul>
<li><a href="/"></a></li>
</ul>

などのように要素が空でも、画像置換テクなどを使えば見た目上はキレイになったりします。
画像置換自体も色々言われてますが、ちょっとコレは問題有りです。

全く情報が無いのと変わらないので、SEO的にも価値が見出せないです。
手間とか思ったとしても、メニューならメニューの内容などをきちっと入れましょ。

見た目の制御の為だけに画像を使う

コレはCSSを覚え始めな時や、面倒な時に使う可能性があるんですが、よろしくないと思われます。
代表的なのなら、角丸を再現する為だけに画像を配置とか。
hr代わりに画像を並べるとか。

h1要素がページ内に何度も出てくる

コレはHTMLやXHTMLの仕様書じゃ、「ダメーっ」とは書いてないですが、ISO-HTMLのガイドの方には望ましくないと書かれております。
User's Guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML)の13.11 ? The H1 element type—Major section headerこの辺りに。

ココは英語なんで、読めないボクとかに非常に助けになるんが、The Web KANZAKIさんの、見出しの順序について辺りが分かりやすいです。

見出し要素が飛んだりする

13.11.4 ? Example of structured headingsの図が分かりやすいですが、h2からh4に飛んだりしちゃダメなんす。
h2が来たら、当然次に来る見出しはh3なんす。

h4に指定したスタイルをデザイン的に当てたいとかも、サイトの構造的には相当不自然だったりする訳で。（すんげーやりたくなる時とか有りますが…そういうデザインが上がってこなければいいんだけど）

感覚的に分かりやすいと思うのでさして難しい事じゃないと思うです。

段落に見せかけた改行

こういうヤツ↓

<br />
<br />
<br />
<br />
<br />

やっちゃダメよ。

…いやーでもホント、段落の高さ調整毎にイチイチclass指定するとか思うと、すげー面倒やなぁ～って思ったりもすると思うけど、ソコはグッとこらえましょう。

インライン要素内にブロック要素がある

こんな感じのヤツ↓

<ul>
<a href="/"><li>テキスト</li></a>
</ul>

見出しとかなら明らかな気がするけど、タグによっては「何となく」だとやっちゃいがちだったりするので、注意っす。

clear専用の要素の乱用

<br class="clear" />とか<div class="clear"></div>とかで、回り込みを解除するのも好ましくないですね。
とは言うもののイッパイ使ってた時期もありました。

むしろ無きゃクロスブラウザな環境の実現なんて出来ないんじゃないか！？とか思ってた程に。
でも今はとっても素敵なclearfixっていうテクが有る訳ですから、そういったので対応しちゃいましょう。

ココまでは、取りあえず最低限な部分なんで「ドキッ」とした方は、ひっそりと対応した方がいいと思います。

次からは、別に絶対的なアレじゃなくて、その方がいいんじゃん程度の事について。

「閉じタグだよ」のコメントを要素の外に入れる

</ul>
</div><!-- ] entryTitle END -->

コレに関しては去年の夏頃から意識し出したので偉そうな事言えませんが、上記のようなコメントの書き方は個人的に好きじゃありません。

</ul>
<!-- ] entryTitle END --></div>

こんな感じで要素の中にコメントを入れてあげると親切です。
理由に関しては丁度良いエントリーがあったので、良ければ見てみて下さい。
我的春秋: (X)HTML, XML のコメント記述位置

我的春秋さんでは特に触れていなかった（と思う）けど、Dreamweaver使いが多いこの業界でも同じで、Dreamweaverの特性上（というか要素の外を拾ったらすごいけど）、タグを選択した時にコメントが置いてかれます。
すると、後からいぢった人は謎のコメントに脳内「？」でイッパイになります。
嫌がらせでやるならオススメですが、ソレ以外では要素の中にコメントしてあげましょう。

人様のコメントの書き方にまでとやかく言う筋合いなんて無いかも知れませんが、仕事だったら色んな人が触る可能性が有るので、配慮が必要だと思います。

テーブル＝ダメという認識

コレはまぁ、、、自分がそうでした。
いかにしてテーブルを使わないか。ソレがカッコいいとか馬鹿な事を思ってました。

一番代表的なのが、フォーム周りでしょうか。
フォームをテーブルタグを使わないとカッコいいみたいな。

フォームに関しては、テーブルでも問題ありません。
td要素のみとかダメですが。
ソコはちゃんと、th要素も使って上げましょう。

あ、だからって定義リストがダメとかって言う話じゃないよ。

取りあえず最後に。

何となく最近気になった部分を上げてみました。
上げだしたらイッパイ有るんですが、今回は重要な割に多いなーって思ったことです。

チェッカーとかが全てじゃないですが、一つの指針としてAnother HTML-lint gatewayは一度くらい使ってみましょう。

随分席の近い雲の上の人も、はるか昔にlint通して愕然としてマジで勉強したって言う事例もあるんで、使ったことない人は自分で組んだサイトをチェックして愕然とするのも良い勉強だと思います。

と偉そうなこと言ってるけど、ココも大した点数じゃないっていうのは穏便に。

（3/8に細々と修正有り）

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•