はじめに

こんにちは。東京アプリケーションシステム第三ソリューション部のT.Kです。
業務に置いて知らなくてはならないHTMLのタグに関して語ろうと思いましたが、その前にHTMLは何なのかを最新バージョンであるHTML5を通してみて行きたいと思います。
おまけでCSSもCSS3を通してみてみましょう。

HTML5

HTMLは「HyperText Markup Language」の略しています。
Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のことです。

HTML5回目の大幅な改訂にあたるHTML5では、セクションを表すsectionタグ、記事を表すarticleタグ、ナビゲーションを表すnavタグが導入されました。
新たに導入されたタグを使うことによって、文章構造を厳密に指定することができます。

HTML5の特徴
１．動画や音声の埋め込みが簡単になった
HTML5以前では音声や動画を埋め込みたいときには、Flashなどの専用プラグインが必要でした。
しかし、HTML5からは、「video」タグや「audio」タグなどのタグによって、埋め込みができるようになりました。

２．レスポンシブ対応
PCサイトをスマホ端末から見て、小さい画面からPC用サイトを見るために苦労されたことがある方も多いのではないでしょうか。
HTML5の登場によって、端末ごとに最適なフォーマットで画面表示がされる「レスポンシブ」対応がされるようになりました。

３．文書構造の簡易化
HTML5へと変わったことで、文書構造が大幅に簡易化されました。
例として下記Aの形式をBのように、非常にシンプルな記述となりました。
A.「!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//JP” “http://adc.de.fgh/hi/jkl/mno/pqrstu-vwxyz.com”」
B.「!DOCTYPE html」

４．ウェブアプリケーションが作りやすくなった
HTML5になってから、HTML4以前は難しかった、ウェブアプリケーションが作りやすくなりました。
ドラッグアンドドロップ機能の追加や、位置情報の追加、ウェブサイトをオフラインでも閲覧可能にするなど、APIを活用することで簡単な記述によって機能を実現できるようになりました。

HTML5の注意点
HTML5はリリースされて10年ほどが経ちますが、常にアップデートがされていて、新たながタグが追加されていきます。
しかし、ブラウザによっては新しく生まれたタグは対応されていないこともあるので、その点は気をつけておきましょう。

CSS

CSSは「Cascading Style Sheets」を略しています。HTMLで記述されたWebページの体裁（レイアウト）を指定するための言語です。
CSSでは、セレクタで指定した範囲のプロパティに値を指定します。コンテンツの配置位置や文字色・文字サイズ・フォントの種類などの指定が可能です。

CSS3では背景画像を設定するbackground-imageプロパティにて要素に複数の画像を指定できるようになりました。
また、文字に影を付けるtext-shadowプロパティとbox-shadowプロパティが追加されたことで、CSS3以前のように文字やボックスに影を付ける際に画像を利用する必要がなくなりました。

まとめ

Webサイト制作で求められるスキルは、ますます高度化・複雑化していますが、HTML5やCSSといった基本スキルと各種制作ツールの使い方をきちんと押さえることが重要だと思われます。
基礎の故に詳しい説明を聞いていない方も多いと思います。（私がそうでした。）
しかし、業務に置いてこの基礎をしっかり整えていないと考えて作業を行っている自分ではなく、考えずに真似して作業をしている自分を見るかもしれません。
これで後悔する人は私だけで十分と思います。
今日の記事をここで終わらせたいと思います。ご覧いただきありがとうございました。