最近ふと思う、いつの間にかウェブサイト制作の方法が変わってているなと。
非常にざっくりだが、まとめてみた。
第１世代
単純な HTML に table タグを組み合わせて制作していた。ページ内の位置関係をすべて table タグで区切って設計する方式だ。そしてこの方法にフレームを追加する方式が主流になっていく。この時代は、html ファイルにコンテンツとデザインの両方を書いていた。
デザイン性もよくなく、フレームは扱いにくく、同一ファイルにコンテンツとデザインの両方が書かれていたため、制作・メンテナンスも大変だった。
第２世代
table タグやフレームを使う方式をやめ、div タグを使う方式になった。同時に css と組み合わせ、html ファイルにはコンテンツを、css ファイルにはデザインを書く方式になった。
第１世代の欠点は解消されたが、div タグで囲んだエリアの横並びか、縦並びかを指定したり、また設定した後に解除したりする場合、制作に大変苦労した。
HTML5 が登場した際、div タグを使わず、nav、header、section、article など専用のタグが出てこれからはこれを使おうという考えもある。しかし、結局のところ、div タグに意味を持たせた専用のタグのようなものなので、デザインには苦労することになる。
時を同じくして、パソコンだけではなく、スマートフォンやタブレットにも対応する必要があり、レスポンシブという考えが導入されたが、対応するにも大変な労力がかかるようになってきた。
第３世代
これまでの制作方法は、スクラッチの状態から全て書くことになるため、制作コストが大変なものとなっていた。それを解決するため、フリーや有償のテンプレートを使うこともあったが、オリジナリティが高いものを制作するにはやはりスクラッチから書くしかなかった。
この場合は、レスポンシブに対応するにも自分自身で書くことになる。これらの欠点を解決するため、CSS フレームワークによる開発が主流となる。CSS フレームワークは標準でレスポンシブにも対応しており、テーブルやボタンなどのデザインも既定のものが CSS として提供されているため、class 名を指定するだけで、デザインを決定できる。
CSS フレームワークを使うと、デザイン性のよいレスポンシブなウェブサイトを作ることができる。今後は、フリーや有償で、CSS フレームワークを使ったテンプレートが出現してくると予想される。
CSS フレームワークには以下のような種類がある。
Bootstrap
Foundation | The Most Advanced Responsive Front-end Framework from ZURB
UIkit
Pure
Kube — professional CSS-framework
HTML KickStart - Ultra–Lean HTML Building Blocks for Rapid Website Production