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だからこそ実現できることを
分かりやすく教えてもらえたらとても有難いです。
サンプルサイト付きで、なるべく詳しく教えて頂いた方に
ポイントを付与させていただきたいと考えております＾＾
どうぞ宜しくお願い致します！
お礼
ご回答ありがとうございます。 とりえあず100時間ほど勉強しようと思います。