最近はスマートフォンからWebサイトを閲覧するユーザーが増え、制作におけるスマートフォン対策は必須となりました。そのため、レスポンシブWebデザインを導入することも多くなり、HTML5とCSS3でのWebサイト制作の需要が高まっています。

今回は、最新のWebサイト制作に欠かせないHTML5・CSS3とはなにか、制作に必要な習得スキルにはどんなものがあるかを考えてみます。

 

HTML5、CSS3とは?

最初にHTMLとCSSの概要を確認してから、HTML5とCSS3は以前のバージョンとどのような違いがあるのか見ていきましょう。

HTMLとCSS

HTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語です。例えば、段落(paragraph)を表すときは該当する部分を開始タグ<p>と終了タグ</p>で囲みます。

一方、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以前のように文字やボックスに影を付ける際に画像を利用する必要がなくなりました。

 

Webサイト制作にHTML5とCSS3が必須である理由

HTML5とCSS3が必須である理由
PC向けに制作されたWebサイトは、スマートフォンでは見づらいことがあります。また、GoogleはWebサイトがモバイルフレンドリー(スマートフォンからの閲覧に適している)であるかどうかを検索エンジンの検索順位に反映させるため、SEO(検索エンジン最適化)の観点からもモバイルフレンドリーへの対応は必須です。

Webサイトをモバイルフレンドリーにするためによく用いられる方法が、HTML5とCSS3によるレスポンシブWebデザインの導入です。レスポンシブWebデザインでは、1つのHTMLに対して複数のCSSを用意しておき、ユーザーの端末の画面サイズに合わせてCSSを切り替えます。そのため、これからWebサイトを制作する場合はHTML5とCSS3のスキル習得が欠かせません。

 

最低限どんなツールのスキルを身に付けるべきか?

どんなスキルを身に付けるべきか?
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マスター講座の詳細はこちら

http://online.dhw.co.jp/course/html5/

 

まとめ

Webサイト制作で求められるスキルは、ますます高度化・複雑化していますが、HTML5やCSSといった基本スキルと各種制作ツールの使い方をきちんと押さえることが重要です。忙しくて勉強のための時間が取れない社会人の方や、Webデザイナー・コーダーとしてのスキルアップを目指したい方は、ぜひオンライン講座の利用を検討してみてください。