HTML5及びCSS3時代で分かれたWebページ制作の考え方

Webページ制作の流れ

HTML5とCSS３が登場して10年ほどになりますが、Webページのレイアウト設計において、大きく分けて二通りのレイアウト設計があることが、表面化していることに気づきました。

HTML4の時代、Webページはテーブルレイアウトと呼ばれる設計方法が主流でした。タブレットやスマートフォン対応は無く、それ以前にInternet Explorer独自のCSS記述法などで頭を悩ませていた時代だと思います。現在は、Microsoft EdgeもChromium版となり、Webブラウザごとの違いに時間を要することは殆どなくなりました。

Gridレイアウト

Gridレイアウトは、列の長さが可変であるテーブルレイアウトの改良版とも言えると思います。昔から、Webページ制作をやってきている方は、テーブルレイアウトの知識を流用できる分、GridレイアウトでWebページを制作している方が多いと個人的に推測しています。また、かの有名なBootstrapも、GridレイアウトでWebページを制作していることもあり、大規模なプロジェクトであればあるほど、採用されることが多いと推測しています。

Flexboxレイアウト

Flexboxレイアウトは、HTML5とCSS3になって広がった、新しいWebページ制作の考え方です。Flexboxでは、ボックスを横に並べるか縦に並べるかを選択してWebページ制作を行うものです。CSS3で新たに追加されたプロパティであり、「display:flex;」と指定するとFlexboxの設定が有効になります。Flexboxを指定した場合、その他にも多くのプロパティを指定することが出来ます。個人的に、Flexboxは使いやすいのですが、レスポンシブを意識してWebページ制作を行う場合、Gridほど細かい指定の必要がなく、中小規模のプロジェクトで最適であると考えます。

結論：好みの方を使うべし

結局、どちらも向き不向きはあれ、馴れている方を使えば良いと思います。どちらも十分な知識があるのであれば、まぁ規模で選択したほうがいいと思いますが、馴れていない方を無理に使うほうが、詰む可能性がありますので好みで選べばいいと思います。

ちなみに、Webサイトつくり隊のメンバーでは、Flexbox派のほうが多いようです。

Follow me!