読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

コーディングテクニック

f:id:wp-lesson:20150822175754j:plain

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

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

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

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

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

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

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

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

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


本来4隅の装飾はデザインであって、文書構造を表す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サイト専門プログラマーとるとる