こんにちは、保守の担当をしておりますアウラスタッフです！
保守の業務ではいろいろなデザインのサイトに触れることができるので、大変楽しみながら日々業務をしております。

その中で長く使われてきた技術に触れたりして「昔こういうデザインが流行ったなー」と懐かしんで思い出し、最新のCSSが便利で進化していることを再認識する機会がありましたので、３つの例を交えて少しご紹介させていただきます。

 　純HTMLでも作れる！テーブルレイアウト

まず一つ目はテーブルレイアウトです。
こちらは本来、表などを作成するためのタグを利用して、ページ全体をデザイン・レイアウトするテクニック(?)です。
私はCSSを覚えるまではずっとこちらをレイアウトに使っておりました。

一部パーツへのテーブルタグ利用は問題ないのですが、全体をテーブルでレイアウトしてしまうと更新などが大変になってしまうため、特別なケース以外はレイアウトやデザインするのにテーブルタグを利用することはお勧めできません。

CSSを利用し、デザイン・レイアウトした場合以下のようなメリットがあります。
・ページの変更の手間が少なくなる
・レイアウトのコントロールがしやすい
・検索エンジンの評価が高くなる
・レイアウトが崩れにくい

しかしながらテーブルレイアウトが必要な場面もございます。私は最近テーブルレイアウトを使う機会がありその時に改めてCSSの便利さに感動しました。

 　手軽に画面分割！frameタグ

こちらは私が個人的にすごく好きだったタグです！

簡単に画面分割レイアウトが実現できるタグでして、目次とコンテンツを分割するようなデザインによく使われておりました。
また、現在ではよく使われている固定ヘッダーの代わりにもなり、色々と用途があったタグです。
しかしながら「ユーザビリティとアクセシビリティに悪影響」としてHTML5では廃止となってしまいました。

廃止されたとの情報見たときには残念に思いましたが、CSSを覚えてしまえば同じようにデザインすることも、もっと自由度の高いデザインをすることも可能になりました。

特にフレキシブルボックスレイアウトや、昨年より流行しているスプリットスクリーンレイアウトなどはレスポンシブデザインとも相性がよく、大胆で印象的かつ使い勝手がよくデザインも優れたページにすることができます。
その他にもブロークングリッドレイアウトという、綺麗に整えられたグリッドレイアウトをあえて崩すことでオリジナリティを高めるデザイン手法などもありますが、これらはCSSがあってこそ実現可能なデザインだと思えます。

 　サイトに動きを！marqueeタグ

こちらは画面を流れる文字を作るタグで、最新情報を電光掲示板のように流すのによく使われておりました。
たしかYahooのトップページでもニュースが流れていたような記憶があります。
（間違っていたらすみません。）
HTML5で廃止はされていないですが、非推奨とされております。

こちらのブログ記事のため「marquee html」と検索したところヒット件数が動きだしてビックリしました。

現在ではこちらのタグを利用したサイトはあまり見かけなくなりましたが、CSS3の進化によりアイコンやボタンが動いたりページ遷移をシームレスにしたり動きのあるデザインを多く見かけるようになりました。ページ遷移時やナビゲーション展開時の3D表現やマイクロインタラクションなんかはとてもかっこよくて、印象に残りやすいので個人的に凄く好きです。

このようなサイトが増えた背景にはCSS3アニメーションのプロパティが未対応であるIE9以下のシェアが低くなり、対応ブラウザが増加していることも後押ししていると言われております。
また、動きをつけることで視覚的にも楽しくなりサイトの魅力が増すだけでなく、動いたものは目に留まりやすくなるため情報や商品を見てもらいやすくなることも要因としてあります。

以上、簡単に３つほどの例を出してCSSの素晴らしさご紹介させていただきました。
文章では大変わかりづらかったかと思いますが、最新のWEBデザインや流行りのレイアウトを支えているHTML5やCSS3の進化と利便性が少しでも伝わっていたら幸いです。