こんにちは、OneStepです。

最近若い方々のコーディングを見ていて大変気になることがあり、いろいろヒアリングしてみた結果、面白いことが分かってきました。
どういうことかというと、HTMLやCSSを見た目で判断する傾向が非常に強くなってきているように感じます。

具体的にどのような形でコーディングをしているのか見てみましょう。
例えば、下記のようなレイアウトのコーディングを行いたいとします。

この場合、若い方が組むと以下のようにHTMLとCSSをコーディングされる方をちらほら見かけます。

■HTML

<div id="contents">
    <ul>
        <li>Red</li>
        <li>Blue</li>
    </ul>
</div>

■CSS

#contents li {
    float: right;
    (…marginなどは省略…)
}

このように記述しているのだが、普通はおかしいと判断すべきと考えます。

というのはそもそも現代の人間の目は、文字を読むときには必ず左から右へ読む習慣がありますね。
ならば、HTML文書は理由が無い限り、左に配置されているものほど上側へ記述されなければならないのが一般的と考えます。

しかし上記の例だと右に配置されている「Red」がHTML上では先に記述されています。
これがおかしいという点です。

ただし<ul>タグで囲ったリストの場合は順番に意味が存在しないため、これでも意図は通らなくもありません。
しかし左にあるものほど基本的に先に記述する、という意味ではやはり文書構造はおかしなことになっているはずです。

また、リストが順番を変更してはならない場合は<ul>タグではなく、<ol>タグを使用します。
この場合はまさしく順番を変更してはならないため、かならず左から右にあるものを、HTML上で上から下へ記述しなければなりませんね。

正しくは以下のように書くのが正解と考えられます。

■HTML

<div id="contents">
    <ul>
        <li>Blue</li>
        <li>Red</li>
    </ul>
</div>

■CSS

#contents ul {
    float: right; // margin-leftなどを使用しても問題はない。
    width: ○○px;
}
#contents li {
    float: left;
    (…marginなどは省略…)
}

これで文書構造的にも正しい記述となるのではないでしょうか。

また余談ですが、HTMLとCSSを習い立ての方は<ul>,<dl>,<ol>などのリスト系の使い分け、<strong><em>の使い分けがあまり分かっていない方が多いようです。
CSSのfloatとclearのタイミングは昔より難所とよく言われていましたが、文書構造を理解する上では上記のこともぜひ理解しておいてほしいなと感じている所存です。