2016.10.30

HTML構造の想像

デザインを見て、どう組むかを考え、ソースに書いていく。

「どう組むかを考える」ことが、コーディングする上で1番重要な部分だと思います。
どれだけ正確無駄の少ないHTML構造を短時間で考えることができるかが、
コーディング全体のクオリティやスピードに繋がってきます。

例えば、このようなブロックがあったとき

html_imagination_1

どのタグを使って、どのように組めばよいかを考えます。

自分ならこんな感じです(実際もこんな感じになってます)。

html_imagination_2

タグはul+liを使い(黄色い部分がli)、リンクを全体に設定するためにliの直下はaを配置しています。
floatでliを2列にしてネガティブマージンをulに設定しています。
ネガティブマージンを使って要素を並べる方法はこちらで説明してます。

あとは画像とテキストをli内でさらに左右に分け、枠や余白、フォントサイズなど設定すれば完了です。

これはかなり簡単な例ですが、こんな感じでHTMLやCSS、JavaScriptの組み方を考えてコーディングを進めています。
時には想像した通りに組んでも デザイン通りにならないこともありますが(そのときはまた別のアプローチから想像します)、
この作業があるのとないのとでは雲泥の差です。

そして、この作業をどれだけ正確に、素早くできるかが重要です。