【ドラクエ公式サイトに学ぶコーディングテクニック】

ゲームの公式サイトは、コーディングスキルがいっぱい詰まっていることをご存知でしたか？

例えば赤枠で囲ったボックスの４隅。よくありますよね、装飾付きのフレーム。
昔は掲示板サイト等でよく使われました。

<TABLE>タグでフレーム全体を９分割して、４隅のセルに１つずつ<IMG>タグで縁の画像を入れる方法が常套手段でした。

でも、よくご覧ください。

ここがテーブルデザインのテクニック！

<TABLE>ではなく<DIV>でレイアウトしてある点は近年の常識として、、、
４隅を表現するためにHTMLタグは一切使っていません。

疑似要素（:before、:after）を使って、<DIV>の前後に縁の画像をbackgroundに敷いたボックスを生成しています。

ブラウザはこのCSSを解釈して、あたかもフレームの４隅にボックスがあるかのように表示してくれます。

非常にHTMLがスッキリしますね。

本来４隅の装飾はデザインであって、文書構造を表すHTMLとは無関係。

疑似要素を使うことによって装飾をHTMLに含めずにCSSに担わせる。
非常に理にかなったテクニックです。

疑似要素の具体例

疑似要素（:before、:after）はよくfloatを自動的に解除するためにも使われています。

例：
--------------------------------------------
▼HTML

<div class="row">
<div class="col-md-6">画像</div>
<div class="col-md-6">画像</div>
</div>
▼CSS
.row:before, .row:after {
clear:both;
content: ' ';
height: 0;
}
.col-md-6 {
width: 50%;
float: left;
}
--------------------------------------------

LP等で横並びに画像を配置するとき、画面横幅を12等分した割合に応じたfloat付きのボックスで画像を囲み、ボックス全体を、”行” を示すクラス付きのボックスで囲みます。

”行” を示すクラス（ここでは.row）の前後で自動的にfloatが解除されるように疑似要素（:before、:after）で解除用のスタイルを入れておきます。

これなら、floatする場所に clearfix を入れる必要もありませんし、入れ忘れも起こりません。

ウェブページのコーディングにおいて全ての部分をボックスと見なすのです。
ボックスを並べるなら、必ずボックスの中に入れる習慣を付けると良いです。

WEBサイト専門プログラマーとるとる