「HTML5、CSS3にバージョンアップして何が変わったの？」
「HTML5、CSS3の入門者だけどこれから学習してできることの幅を増やしたい！」
こう思ったことはありませんか？
まず簡単に
- HTML5
- CSS3
について解説すると、うしろの数字はそれぞれのバージョンに該当します！
「HTML」だと5回目のバージョンで、「CSS」だと3回目のバージョン、ということですね。
もちろん、バージョンの変化にともなってその仕様も変わっています。
今回の記事でバージョンの変化による仕様の変化や、できるようになったことについてまとめていきますのでぜひ参考にしてみてくださいね！
また、入門者がこれから学習していく上でのポイントなども解説していきます。
目次
入門者がHTML5/CSS3を学習する上での基礎知識
まずは、
- HTML
- CSS
について、それぞれどんな役割を持っているのか解説していきますね。
この基本を理解していないと、「HTML5」「CSS3」の解説で先に進めませんので、まずは基礎をしっかりと固めていきましょう！
HTMLの基礎知識
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）と呼ばれる「マークアップ言語」の一つで、Webページを作成する時に使用されます。
一般的なプログラミング言語は、「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算をすることができますが、マークアップ言語にはできません。
しかしプログラミング言語とは違い、「タグ」を使って「この部分がタイトルです」、「この部分が一つの段落でまとまっています」などの印をつけることができますので、視覚的に覚えやすい言語であると言えますね。
Webページを作成する際に必ず使用する言語ですので、覚えておきましょう。
CSSの基礎知識
CSSは、Cascating Style Sheets（カスケーティングスタイルシート）と呼ばれる “スタイルシート規格” の一種で、HTMLで記述されたWebページのスタイルを記述するために使用されます。
HTMLでWebページの枠組みを作り、CSSで該当する箇所を装飾するために使われるため、2つセットで使用される場合がほとんどです。
CSSは文字の色やサイズ、レイアウトなどの見た目を変更したり簡単なアニメーション作成をすることができますので、覚えると幅広いカスタマイズができるようになります。
【HTML5/CSS3】バージョンの変化で変わった特徴
ではHTMLは「HTML5」に、CSSは「CSS3」にバージョン変化したことで、どのようなことが変わったのでしょうか。
CSSはバージョンが「CSS3」に、HTMLは「HTML5」になり、アニメーションもウェブ上で動かせるようになりました。HTML5になるとユーザーがウェブページで何らかのアクションを起こすとそれに反応してリアクションを見せてくれるものになり、とても便利になりました。
先ほども記述しましたが、2つはセットで覚えるのが一般的です。
セットで使用して出来るようになった点は以下の通りです。
- アプリを作成できる
- 動画や音声データを扱える
- ダグで文章がかさばらない
アプリを作成できる
HTML5になったことで、アプリの作成ができるようになりました。
しかもインターネットに繋がっていない状態でも使用することのできるアプリを作成できるので、とても汎用性が高くなったと言えるのではないでしょうか。
HTML5で作られるアプリはハイブリッドアプリと呼ばれ、「Webアプリ」と「ネイティブアプリ」技術の2つを組み合わせたものとして「ハイブリッド」と呼ばれています。
Webアプリ：インターネットブラウザを経由してアプリケーションを使うもの。「食べログ」で予約したり、ネット販売の「ショッピングカート」機能が該当します
Webアプリの特徴として、アプリをインストールしなくてもブラウザ上で使用することができるところです。
運営側もファイルの更新などが簡単にできるメリットがありますが、その反面、サーバーとの通信手段がないと使えないことがデメリットと言えるでしょう。
ネイティブアプリ：スマートフォンなどの端末内の演算装置を使用して直接実行。インストールすればオフラインでも使用することができます
インストールすればオフラインでも使用することができますが、ダウンロードによる端末容量の使用や、アップデートを手動で行わなくてはいけないデメリットがあります。
この二つのアプリのいいとこ取りをしたのが、「ハイブリッドアプリ」ですね。
二つの技術を一つに合わせることで、iPhoneやAndroidなどの二つのプラットフォームの違いを意識することなくアプリ開発が可能です。それぞれのプラットフォーム固有の言語を押さえる必要もないということですね。
しかしネイティブアプリよりも処理速度が遅くなってしまうのがデメリットと言えます。このことから高速の処理を行っているゲームなどはハイブリッドアプリには向かないでしょう。
用途に合わせて、ウェブなのかネイティブなのかハイブリッドなのか使い分けることが大事ですね。
動画や音声データを扱える
HTML5では新たに「video要素」というものが追加されました。
これにより、従来よりもシンプルに動画を扱えるようになりました。Flashなどのプラグインなしでもブラウザの基本的な機能や環境のみで動画再生が可能となりました。
文書内に動画ファイルを埋め込む形にはなりますが、訪れてくれたユーザーを振り分けることもできるように、認証情報を求めることも可能です。
自動再生や動画ファイルの大きさなども指定することができるので幅広く活用ができそうです！
また、「video要素」と同じように音を再生できる「audio要素」と呼ばれるものもHTML5より追加されました。
活用例として、ユーザーがHPを開いてBGMが流れる、といったような演出も可能となったのでより印象に残るWebコンテンツの作成ができるようになったのではないでしょうか。
ダグで文章がかさばらない
従来の「HTML4」から「HTML5」の移行では、新たに追加されるタグや逆に廃止されるタグがあります。
タグとは目印をつける付箋をイメージするとわかりやすいのですが、コンピュータファイルに目印をつけて記述する感覚ですね。そのタグが「HTML5」では大きく簡素化されました。
代表的なものが、以下の要素ではないでしょうか。
HTML5からは、例えばヘッダーは<header>、フッタは<footer>、ナビは<nav>など要素の割り当てが明確になっています。
- <header>：ヘッダー要素
- <body>：記事の中身
- <footer>：フッター要素
- <nav>：ナビ要素
こういった要素が増えたことで、記述する容量も少なくなり見た目がすっきりし、修正もしやすくなりました。
まとめ：HTML5/CSS3で幅が広がりました
いかがでしたか？
今回は
入門者が覚えておきたい「HTML5/CSS3」の基礎知識
について、これから学習を進めていきたい入門者向けに解説をしてみました。
バージョンの変化によって、「CSS3」でかんたんなアニメーション実装できるようになったり、JavaScriptでvideo要素やaudio要素を操作して動画やオーディオ再生ができるなど、マルチメディア機能が充実した「HTML5」について理解していただけたでしょうか？
HTML・CSSはプログラミングを学習し始める入門者の方が学習しやすい言語ですので、「この機会に本格的に学習してみよう」と思えるような記事になっていればうれしいです。
