Webデザイン
3DCG・映像
グラフィックデザイン
Webマーケティング
Webプログラミング
アナログスキル
その他
最近はスマートフォンからWebサイトを閲覧するユーザーが増え、制作におけるスマートフォン対策は必須となりました。そのため、レスポンシブWebデザインを導入することも多くなり、HTML5とCSS3でのWebサイト制作の需要が高まっています。
今回は、最新のWebサイト制作に欠かせないHTML5・CSS3とはなにか、制作に必要な習得スキルにはどんなものがあるかを考えてみます。
ウェブ制作の基礎をおさえる。HTML/CSS/Dreamweaver講座
HTMLとは？CSS3とは？
最初にHTMLとCSSの概要を確認してから、HTML5とCSS3は以前のバージョンとどのような違いがあるのか見ていきましょう。
HTMLとは？
HTML（HyperText Markup Language）は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語です。例えば、段落（paragraph）を表すときは該当する部分を開始タグ<p>と終了タグ</p>で囲みます。
CSSとは？
一方、CSS（Cascading Style Sheets）は、HTMLで記述されたWebページの体裁（レイアウト）を指定するための言語です。コンテンツの配置位置や文字色・文字サイズ・フォントの種類などの指定が可能です。CSSでは、セレクタで指定した範囲のプロパティに値を指定します。例えば、段落の色を赤に指定する際はp{color: red;}と記述します（この場合はセレクタがp、プロパティがcolor、値がred）。
HTML5
HTML5回目の大幅な改訂にあたるHTML5では、セクションを表すsectionタグ、記事を表すarticleタグ、ナビゲーションを表すnavタグが導入されました。新たに導入されたタグを使うことによって、文章構造を厳密に指定することができます。
プラグインを利用することなく、JavaScriptでvideo要素やaudio要素を操作して動画やオーディオ再生ができるなど、マルチメディア機能も充実しました。
CSS3
背景画像を設定するbackground-imageプロパティは、CSS3では要素に複数の画像を指定できるようになりました。例えば、p{background-image: 画像1のURL, 画像2のURL, 画像3のURL;}と書けば、段落に3つの背景画像を表示させることができます。
また、文字に影を付けるtext-shadowプロパティとbox-shadowプロパティが追加されたことで、CSS3以前のように文字やボックスに影を付ける際に画像を利用する必要がなくなりました。
HTML5の特徴と書き方
HTML4からHTML5になって、どのような特徴が加わったのでしょうか。
まず、動画や音声が埋め込めるようになった点です。HTML4時代のように、専用プラグインは必要ありません。続いて、レスポンシブ対応した点も大きな進化として挙げられるでしょう。これによって、PCでも、スマートフォンでも、Webサイトが端末に合わせて最適な画面構成で処理されるようになり、ユーザビリティが大幅にアップしました。
また文書構造も簡易化されています。
それぞれについて詳しく解説します。
特徴1.動画や音声の埋め込みが簡単に
HTML4では、音声や動画を埋め込みたいときには、Flashなどの専用プラグインが必要でした。
しかし、HTML5からは、<video>や<audio>などのタグによって、埋め込みができるようになりました。
画像を埋め込む<image>タグと同じくらい手軽に対応できます。
特徴2.レスポンシブ対応
近年のスマートフォンやタブレットの普及にともなって、WebサイトをPC以外から閲覧するユーザーが増えています。
PCサイトをスマホ端末から見て、小さい画面からPC用サイトを見るために苦労されたことがある方も多いのではないでしょうか。
HTML5の登場によって、端末ごとに最適なフォーマットで画面表示がされる「レスポンシブ」対応がされるようになりました。
特徴3.文書構造の簡易化
HTML4からHTML5へと変わったことで、文書構造が大幅に簡易化されました。
たとえば、HTML4では、文書構造の先頭に以下のように長々と記述していました。
<!DOCTYPE >
これが、HTML5では以下のように変化しています。
<!DOCTYPE html>
このように、非常にシンプルな記述となりました。
特徴4.ウェブアプリケーションが作りやすくなった
HTML5になってから、HTML4以前は難しかった、ウェブアプリケーションが作りやすくなりました。
ドラッグアンドドロップ機能の追加や、位置情報の追加、ウェブサイトをオフラインでも閲覧可能にするなど、APIを活用することで簡単な記述によって機能を実現できるようになりました。
HTMLコーディングについては以下の記事を参考にしてください。
Webデザインと一緒にコーディングも学ぼう！HTMLコーディングの練習方法
HTML5での注意点とは？
HTML5はリリースされて10年ほどが経ちますが、常にアップデートがされていて、新たながタグが追加されていきます。
しかし、ブラウザによっては新しく生まれたタグは対応されていないこともあるので、その点は気をつけておきましょう。
そのタグがブラウザに対応しているかどうかは、「Can I use…」というWebサイトから確認できます。
気になる方は、指定のタグと対応しているブラウザを確認してみましょう。
Webサイト制作にHTML5とCSS3が必須である理由
PC向けに制作されたWebサイトは、スマートフォンでは見づらいことがあります。また、GoogleはWebサイトがモバイルフレンドリー（スマートフォンからの閲覧に適している）であるかどうかを検索エンジンの検索順位に反映させるため、SEO（検索エンジン最適化）の観点からもモバイルフレンドリーへの対応は必須です。
Webサイトをモバイルフレンドリーにするためによく用いられる方法が、HTML5とCSS3によるレスポンシブWebデザインの導入です。レスポンシブWebデザインでは、1つのHTMLに対して複数のCSSを用意しておき、ユーザーの端末の画面サイズに合わせてCSSを切り替えます。そのため、これからWebサイトを制作する場合はHTML5とCSS3のスキル習得が欠かせません。
HTML5の学習ステップ
実際にHTML5を学習するうえで、具体的にはどのようなフローで勉強していくのがいいのか、大まかな流れを解説したいと思います。
ステップ1.Webサイトについての概要をおさえる
これまでに、Webサイトの構築経験がない方は、具体的にHTML5のコーディングを覚えるより前に、Webサイトやインターネットがどのような仕組みで成り立っているのかを理解しておきましょう。
サーバーやドメインやWebサイトの関係、どのようにコーディングされて私たちが普段目にしているWebサイトが成立しているのかをまずは抑えましょう。
また、HTML5以外の言語も含めて、どのような言語が存在しているのかも知っておきましょう。
ステップ2.HTML5の書き方を学ぶ
Webサイトがどのように成り立っているのかを理解したあとは、教本や学習系サイトなどを用いて、実際にHTML5の書き方を学んでいきましょう。
ここで脱落する人が多いので、自分なりに勉強した後でどのようなサイトを作りたいのか、エンジニアとして食べていきたいのかなどの目標を決めた上で、計画を立てて学習に取り組みましょう。
ステップ3.Webサイトをトレースして練習を重ねる
ある程度、基礎となるHTML5の記述ができるようになってきたら、実際に存在しているWebサイトや、教本や講座などで配布される教材用サイトを自分の手で構築できるように練習しましょう。
デザインが秀逸！HTML5を使った素敵なサンプルサイトまとめ
ステップ4.自分のWebサイトを作ってみる
トレースにも慣れ、ある程度基礎をおさえたと思ったタイミングで、実際に自分のWebサイトを今コンセプトを立てるところからコーディングまで、すべて自分でやってみましょう。
Webサイト構築には、HTML5だけでなく、CSSなど他の言語も求められるので、そちらも学習しておきましょう。
ステップ5.クラウドソーシングなどを用いて、クライアント向けにWebサイトを作ってみる
自分のWebサイトが完成したら、Webサイトを作ってほしい人＝クライアント向けにサイト構築をやってみましょう。対価をいただく仕事なので、プロとして責任を持ったアウトプットが求められます。
知人の紹介や、クラウドソーシングによって、簡易なWebサイト制作の仕事を受注し、自身のポートフォリオとして書けるようにしていきましょう。
これらのプロセスを経て、本気でWebサイト構築で食べていきたいと感じた方は、過去のポートフォリオを用いてWebデザイナーとしての就職活動や転職活動につなげるのもよいでしょう。
最低限どんなツールのスキルを身に付けるべきか？
HTML5とCSS3の学習と並行して、Webサイト制作で利用するツールの使い方も身に付けましょう。ここではDreamweaverとWordPressの2つを取り上げます。
Dreamweaver
HTMLとCSSのコーディングは手打ちで行うことも可能ですが、アドビのDreamweaverなどのオーサリングツールを利用した方が効率良くコーディングできます。途中まで入力すると予測候補を出してくれるのでコーディングの手間を減らせる他、デバイスプレビュー機能を使えば編集中のHTMLをスマートフォンで確認することが可能です。
WordPress
Webサイトの更新の手間を考えて、WordPressなどのCMS（コンテンツマネジメントシステム）でWebサイトを構築する機会が増えているため、ぜひWordPressのインストールやテーマの設定方法、便利なプラグインについて知っておきましょう。
HTML5とCSS3を本格的に学びたい！
これからのWebサイト制作に必要となるHTML5とCSS3。仕事をしながら独学で勉強するのが難しい方や、Webデザイナー・コーダーとしてのスキルアップを目指したい方には、デジハリ・オンラインスクールの「HTML5マスター講座」がおすすめです。
本講座では、HTML5・CSS3の概要から今までとの相違点、コーディングスキルまでを学べるだけでなく、JavaScriptの基礎から応用までを幅広く勉強できます。
さらに、本講座の最大の魅力は「HTML5プロフェッショナル認定試験」の対策講座が含まれていることです。試験を運営する「LPI-JAPAN」との共同運営により開発された講座のため、合格率もグッと上がります。また、受講料に16,200円相当の受験チケットが付属しているため、資格の取得が必要な方には非常にお得な講座です。
HTML5マスター講座の詳細はこちら
https://online.dhw.co.jp/course/html5/
まとめ
Webサイト制作で求められるスキルは、ますます高度化・複雑化していますが、HTML5やCSSといった基本スキルと各種制作ツールの使い方をきちんと押さえることが重要です。忙しくて勉強のための時間が取れない社会人の方や、Webデザイナー・コーダーとしてのスキルアップを目指したい方は、ぜひオンライン講座の利用を検討してみてください。
この記事におすすめのオンライン講座
