コーダー必見！HTML5を活用した今時のクリエイティブなwebサイト

2018/10/3

WEB制作する際、今まではHTML4.01やXHTMLが標準的に利用されていましたが、HTML５が登場したことにより、HTML５が主流になってきています。HTML５が登場し、今までHTMLだけだと静的なWEBサイトしか組めなかった物が、HTMLだけで動的なWEBサイトを作成することができる様になりました。複雑な動的コンテンツ作成するにはHTML5、CSS３やjavascriptについての正しい知識と応用力が必要です。様々なウェブサイトを見ることでも良い勉強になりますので今回はデザインが優秀なHTML５を使ったウェブサイトを紹介しながらHTML５で良く利用する記述を紹介します。ぜひご覧ください。

HTML5とは

HTML5とはHTMLのバージョン５のことです。

HTML４以前では複雑だった処理が簡単に出来て、HTMLをより構造的（セマンティックコーディング）にかけるのはHTML５の特徴です。そのほかにプラグインを必要とせずに映像や音声を再生できることが有ります。

セマンティック要素

SEO的に強いWEBサイトを作成するためにはセマンティック要素でコーディング行います。

セマンティック要素とは、意味を持たせるということです。WEBサイトのコンテンツを作成する時はそれぞれコンテンツの意味があります。

質の高いコンテンツを用意していてもマークアップが倫理的に間違っていると、検索結果に表示されない可能性がありますので、WEBサイトをコーディングする際にもそれぞれのコンテンツの内容を分かりやすく検索エンジンに伝えるように正しい階層構造を意識したマークアップしなければなりません。

HTML５ではコンテンツの内容を分かりやすくする為にセマンティック要素が用意されています。例えば <header>（サイトのヘッダ部分）,<nav>（ナビゲーション）,<section>（汎用的なセクション）,<article>（単独で成立するコンテンツ）,<aside>（補足的なコンテンツ）,<footer>（サイトのフッタの部分）など。

検索エンジンは<section>タグを見て意味のある文書の区切りであることを認識して検索結果に表示される仕様になっています。

マルチメディア機能（Audio / Video）

HTML５以前までインターネットで動画を掲載するにはFLASH等を利用するのは一般的でした。FLASHで作られた動画を再生するにはFLASH PLAYERプラグインをインストールする必要がありました。HTML５からはプラグインをインストールすることなく、画像をWEBサイトに入れる様に、HTML５だけで簡単に動画も扱えるようになりました。

HTML５の<video>タグを活用して、WEBサイトを制作に参考できそうな例をご紹介します。

http://www.babybach.net/

このサイトはHTML５で作成したサイトになります。HTML５のマルチメディア機能<video>タグを利用してトップページのメイン部分に動画を自動再生されてインパクトのあるサイトに仕上げました。そのほかにHTML５とCSS３でいろいろな動きを実現していますので参考までに紹介いたします。

グラフィック機能（Canvas / SVG ）

Canvas

Canvas は、HTML５から追加された図形を描くための技術仕様です。HTML５とJavaScript コードと組み合わせて利用され、最新のすべてのブラウザで実行されます。

下記サイトはHTML５<canvas>を利用して作られたサイトです。

http://www.jojodesign.jp/

このサイトはJojoデザインのポートフォリオサイトです。全て1ページのコンテンツになっていて、背景では丸と線の動きをHTML５のcanvasを利用して実現しています。HTML５のグラフィック機能の<canvas>を利用してこのようなかっこいいポートフォーリオサイトやギャラリーなど、動的なサイトを簡単に作ることができます。

SVG（Scalable Vector Graphics）

SVGとは、ベクター・グラフィックスの事で、拡大しても画質の劣化を伴わないで表示される形式です。最近のWEBサイトにはHTML５でベクターグラフィックスを取り扱う時に時にSVG形式のファイルを利用しているWEBサイトが増えています。SVGをWEBページに使うことで、今までHTMLやCSS等実現出来なかったことは簡単にできる様になっています。SVGでアニメーションを実装する方法として、CSS３、javascript、動画作成ソフト等いろいろなやり方が有ります。