HTML5＋CSS3 でしかできないこと

質問

長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。
数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため
javascriptを導入してサイト作成を楽しんでいたりもします。

言語も html css javascript jquery php　など、色々楽しみながら勉強してきました。

ほんの数年前から、HTML５＋CSS３　が登場しましたが、
様子を見ていると、どんどん独創的なサイトが出てきています。

スマートフォン用のサイトも作れるようになりたいな、と思っていましたが
ようやく重い腰を上げて作業に取り掛かろうと思っています。

そこで質問なのですが、HTML5＋CSS3で作られたサイトで
まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。
こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか
判別がつきません。

HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。
例えば、リンクタグをブロック要素化することが簡単になったとか、
角が丸い四角形を充てることができるようになったとか、電話番号をタップすると
「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。

しかし、「HTML5+CSS3で作られたサイト全体」で見ると、
いまいちピンと来ないのです。

そこで、お詳しい方に是非、以下のような形で
教えてもらえたらと思い、投稿しました。

-------------------------------------
実際にHTML5+CSS3で作られたサイトを基に、
どこをどのように設定したのかを見せて欲しい
-------------------------------------

例えば、
http://www.hotakubo-seikei.com/
は、ソースを見るとHTML５で作られていますが（section タグや　header タグがありますね）
XHTML+CSSでサイトを長年作ってきた人間からすると、
どうしてこんなサイトができるのか全く分からないのです。
javascriptもいくつか利用されていますが、どれがjavascriptによるもので
どれがHTML5+CSS3によるものなのかわかりません。

また、一番驚いたのが、サイトの構成です。
サイト全体の横幅が無く全画面表示になっており、
３カラムで、縦スクロールするとディレクトリが変わるなんて
XHTML+CSSの常識では考えられません。

もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、
それを実装できていることに感動しているのです。

↑↑↑
こんな感じで、何かサンプルサイトを基に
XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを
分かりやすく教えてもらえたらとても有難いです。

サンプルサイト付きで、なるべく詳しく教えて頂いた方に
ポイントを付与させていただきたいと考えております＾＾

どうぞ宜しくお願い致します！

回答No.1

kaisinjuku04 · ベストアンサー

HTML5とCSS3はセットで使われることが多いのですが、使わなければならないものではありません。

HTML5とCSS2の組み合わせでも、XHTMLとCSS3の組み合わせでも構いません。
つまり、XHTMLでもCSS3でボックスの角を丸めたり、ボックス内部をグラデーションで塗りつぶしたりと言ったことはできます。

下記サイトから、HTML4と5のテンプレートをダウンロードして見比べてみてはいかがでしょうか?
http://spica.xtr.jp/ere.php?vt=ca&keyword=top-page%20design

その他
http://design-develop.net/web-design/32-javascript-alternatives-with-pure-css.html
http://case-mobile-design.com/css-appearance/
http://coliss.com/articles/build-websites/operation/css/css-only-pinterest-style-by-kushagra.html
この３つに関しては、あるキーワードにお気づきになると思います。