【4分で解る】WEBサイトの歴史♪テーブルレイアウトからワードプレスまで

こんにちはみっくです。

今回はWEBサイトの歴史を見て行きましょう♪

みっぴー
みっぴー

知らない事が多そうなので、楽しみです♪

まずは全体の流れ

みっく
みっく

以下が知る限りのWEBサイトの歴史です

テーブルレイアウト

表を組み合わせて作る簡単レイアウト

HTMLとCSSを使ったフルCSSデザイン

WEBプログラミングで作る本格WEBサイト

スマートフォンサイト

スマートフォンから見やすい専用WEBサイト

レスポンシブWEBデザイン

どの端末からも見やすいWEBサイト

ワードプレス

ブログ感覚で作れる本格WEBサイト

みっく
みっく

それでは詳しくご紹介しましょう♪

テーブルレイアウト

文字通り表を使ったレイアウトです。

ワードの表の機能にそっくりで、その表を組み合わせてレイアウトを作っていきます。

シンプルでしたらHTMLのみでも作る事ができますが、複雑なデザインはかなり難しくなりますので、一般的にはホームページビルダーというソフトがよく使われました。

実のところ、ソフトを使うとあまりHTMLとCSSの文法を知らなくても作れてしまっていました。

みっく
みっく

私が初めてWEBサイトを作ったのは、このテーブルレイアウトでした♪

HTMLとCSSを使ったフルCSSデザイン

WEBプログラミング言語のHTMLとCSSを分けて記述し、スマートに更新管理がしやすいデザインです。

しっかりと文法を理解して記述する必要があり、作っているとプログラミングをしていると実感できます。

Dreamweaverなどのソフトを利用すると、入力を補助してくれますので時短になり、記述のミスも色分けしてくれたりします。

今では旧型となったHTML4.01で作る事が多く、divタグを多用するような記述方法です。

みっく
みっく

この頃はWEBサイトはPC向けに作っていた時代ですね

スマートフォンサイト

いよいよスマートフォンが登場し、WEBサイト業界も慌ただしくなってきました。

それはなぜか・・・

みっく
みっく

スマートフォンからPC用のWEBサイトを見ると、見づらかったからです!!

画面も指で拡大しないと文字が読めない事も多く、今のように電話番号はタップできない場合もありました。

当時はそれが当たり前でもありましたね(笑)

そこで、登場したのがスマートフォン専用サイトです。

今でも一部残っていますが、PC用のWEBサイトとスマートフォン用のWEBサイトを2つ用意して、端末に合わせて表示させる手法です。

作る側として2個WEBサイト作る必要がありますので、作業量が大幅に増えておりました。(更新がある場合も2倍ですね)

メモ

この頃は、「御社のWEBサイトはスマートフォンから見ると電話番号がタップできませんよ」という内容の営業電話が頻繁にかかっていたとか(笑)

レスポンシブWEBデザイン

スマートフォンサイト自体は見やすく画期的でしたが、制作や更新の煩雑さやなどの問題を抱えていました。

そして、そこにさらなる問題が・・・

みっく
みっく

端末の多様化が起こってきたのです。

大きいサイズのスマートフォンやタブレットなどが普及してきました。

それまでは、「スマートフォンはだいたいこのくらい」というサイズ感で作ってきましたが、それも限界を迎えてきました。

そこで、登場したのが「レスポンシブWEBデザイン」という手法です。

一つのHTMLでできたWEBサイトをCSSの記述で端末に合わせて表示を振り分けるというものです。

最新版のHTML5とCSS3を使って記述します。

1つのWEBサイトで完結するので、更新の煩雑さはありません。

基本的に、どの端末のサイズで見ても適切に表示されますので、とても画期的な方法だと思います。

但し高度な文法や、複雑なテクニックが必要となりました。

みっく
みっく

レスポンシブWEBデザインは今でも主流の一つであり、私も使っています♪

ワードプレス

端末の多様化により登場した「レスポンシブWEBデザイン」ですが、高度な文法や、複雑なテクニックが使われておりました。

「ホームページを作ってみようかなぁ」という方には敷居が高い内容も含まれていると思います。

ホームページビルダーでテーブルレイアウトをしていた方からは、「ホームページって難しくなったのねぇ」なんていう話もしておりました。

そんな中、ワードプレスというものが進化し、普及してきました。

元々ワードプレスはブログを作る事が主でしたが、ブログ感覚で店舗用のかっこいいWEBサイトまで作れるようになりました。

みっく
みっく

始めてワードプレスを使った時は、あまりに簡単にWEBサイトができて感動でした!!

ワードプレスは画期的で「これからホームページを作ってみようかなぁ」という方にもチャレンジ頂ける内容だと思います。

当サイトでもワードプレスの記事を多数公開していますので、よろしければご覧ください♪

ワードプレスをかんたんクイックスタートで始めよう 【図解】ワードプレスをエックスサーバーのクイックスタートで申し込む
さっぴー
さっぴー

こういう時代の流れで今はワードプレスが普及しているんですね!!

みっぴー
みっぴー

ワードプレスなら、ブログ感覚なので私も作れそうな気がします♪

まとめ

今回は私が知る限りのWEB制作の大まかな流れです。

テーブルレイアウト

表を組みわせたデザインで、主にホームページビルダーなどを利用して作ります。

HTMLとCSSを使ったフルCSSデザイン

WEBプラグラミング言語を使って本格的なPC用のWEBサイトを作ります。

スマートフォンサイト

スマートフォンが普及し、スマートフォンから見やすいWEBサイトを作ります。

レスポンシブWEBデザイン

WEBサイトを見る端末の多角化の為、どの端末からも見やすいWEBサイトを作ります。

ワードプレス

ブログ感覚で本格的なWEBサイトが作れます。

みっく
みっく

時代を知ることで、WEBサイト制作にも取り組みやすくなりますね♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です