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. Webディレクターが最低限知っておきたい著作権の3つのポイント

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

  2. 日常的に使うPhotoshopだからこそ知っておきたい、初期設定…

    画像のレタッチやリサイズなど、Webディレクター業務でも何かと使う機会の多いPhotoshop。Ph…

  3. 誰でも簡単にインフォグラフィックを作成できる無料ツール

    数値とイラスト、図形、グラフなどを組み合わせビジュアル化することによって、複雑な情報も直感的に伝える…

  4. CTRが約300%UPしたオウンドメディアも。SNSシェアボタン…

    多くのWebサイトに設置されているFacebookやTwitterといったSNSのシェアボタン。ペー…

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

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

  6. Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  7. ハイクオリティな動画素材を無料でダウンロードできるWebサイト3…

    従来のリスティング広告やバナーに対して圧倒的に多くの情報量を伝えられ、商品開発の陰に隠れたストーリー…

  8. マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

PICKUP

PAGE TOP