menu

Webディレクターなら正しく理解しておきたい、HTML5の4つの特徴とは?

制作

2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHTML5で自社のWebサイトを構築している有力企業も少なくありません。現在ではほぼすべてのブラウザがHTML5に対応済みで、問題なく表示させることができます。

日ごろ携わっているクライアントのWebサイトがHTML4以前で構築されたものだったり、WordPressを利用したものだったりして、直接HTML5のコーディングを行う機会は少ないかもしれませんが、やはりWeb制作のプロフェッショナルである以上、デザインのトレンドやソリューション事例とともに最新のコードについても理解しておきたいもの。HTML5の具体的な4つの特徴をご紹介します。

・文章構造がよりシンプルに
HTML5では、記事であることを示す<article>やナビゲーションを示す<nav>や、1つのセクションとして規定する<section>といった新しい要素が追加されています。HTML4までのように、<div id=”content”>といったタグを記述する必要がないので文章構造がよりシンプルになり、必然的にソースのボリュームを抑えることができます。

・動画や音楽を簡単に埋め込める
HTML4以前のバージョンでは、Webサイトに動画や動的なコンテンツを埋め込むための方法はFlashが主流で、利用にはそれなりの知識が必要でした。それに対して、HTML5では<video>や<audio>といった動画・音声を埋め込むための専用タグが追加され、HTMLの知識だけで動画コンテンツなどをカタチにすることが可能です。

・CSS3との併用で手軽にアニメーションを作成
これまでアニメーションやフラットボタンを作成するためにはJavaScriptを用いる必要がありましたが、HTML5ではCSS3とあわせて利用することで、JavaScriptに頼らずに作成することが可能です。

・API追加によってウェブアプリケーションの構築が容易に
HTML4までは実現が難しかったさまざまなAPIが新たに追加されたのもHTML5の特徴です。これによって簡潔なスクリプトの記述だけでWebサイトにドラッグ&ドロップ機能や位置情報の取得機能を取り入れられるようになりました。同様にスマートフォンの加速度センサーの利用や、ローカルのファイル操作、マルチスレッドでのJavaScript実装もできるようになっています。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

WordPressの表示速度をアップさせるプラグイン5選

4段階のプッシュ通知で作品世界へ誘い込む。「X-MEN」プロモーション

関連記事

  1. 意外と知られていない?業務効率アップに役立つGoogle Chr…

    2016年に利用者数でInternet Explorerを上回り、ブラウザ利用シェアで世界1位に躍り…

  2. 外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

    的確な制作手順をふまえたうえで、自社の商材やブランドイメージに合わせてレイアウトやフォントを工夫する…

  3. Webディレクターが最低限知っておきたい著作権の3つのポイント

    昨年2015年に東京オリンピックのエンブレム問題が大きな騒動になったように、他人の作品を無断で流用し…

  4. Webサイトにひと味加えたい時に役立つ、イラスト&ピクトグラム素…

    一般的にWebサイトに掲載する写真は具体性や専門性が大切と言われています。たしかに企業のオウンドメデ…

  5. 表示速度を0.1秒改善して売上1%アップ?フラットデザインの具体…

    スマートフォンやSNSの普及によってコミュニケーションのスピードが速まり、キュレーションサイトやHo…

  6. 購買率が1.68倍UP。ECサイトに取り入れたい「短め」デモンス…

    企業のメッセージやブランドの価値観を伝えるブランディング動画とあわせて、動画マーケティングに取り組む…

  7. よりスピーディに分かりやすく。大手企業2社のインフォグラフィック…

    グラフ、文字、イラストを組み合わせることで、データを視覚化するインフォグラフィック。ビジュアルと数字…

  8. Photoshopの編集作業をより快適にする、ショートカットキー…

    メインの画像編集ソフトとしてPhotoshopを使っている場合、初期設定のカスタマイズとあわせて使い…

PICKUP

PAGE TOP