HTML5とCSS3基本講座 ５回｜HTMLの設計とCSSのスタイリング作業

ウェブページのデザインは、「CSSのスタイリング作業」と「HTMLのマークアップ作業」で作られています。ウェブページは、何故、構造と見た目のデザインを分けて作るのかの理由を紹介しながら、初心者にも分かるように説明しています。

ウェブページの組み立て方

ウェブサイトの作成では、「サイトの設計作業」と「ウェブページのデザイン作業（CSSのスタイリング作業）」を行います。

サイトの設計作業とは？

実際のウェブサイトを思い浮かべると分かりやすいでしょう。例えば、企業サイトでは、サイトの最上位にトップページがあって、その下の階層に新着情報や製品のページ、企業概要などのページがあります。別ページには製品分類ごとの詳細説明ページなどもあるでしょう。

このような階層構造を決めることを、「サイト設計作業」と言います。

ウェブページのデザイン作業とは？

ウェブページの「デザイン作業（CSSのスタイリング作業）」は、文書の構造を決めるHTMLのマークアップ作業と、見栄えを決める「スタイルシート（CSS）によるスタイリング作業」に分かれています。

CSSって何？

CSS は、Cascading Style Sheetsの頭文字のことです。つまり、CSSは、ウェブページの見た目を決めるためのデザインを指定する技術です。

尚、CSS（シー・エス・エス）は、スタイルシートと呼ばれることもあります。

HTMLでは、「見出し」や、「段落」の定義をしますが、見た目を決める「文字サイズ」や「余白」に関する記述はしません。

見た目を決める「文字サイズ」や「余白」などの見栄えに関するものは、HTMLではなくて、CSSが決定します。

ウェブデザインを作っているもの

ウェブデザインは、「CSSのスタイリング作業」と「HTMLのマークアップ作業」で作ります。つまり、ウェブページは、構造と見た目のデザインを分離して作られます。

「構造（HTML）」と「見た目のデザイン（CSS）」を分ける理由

「構造（HTML）」と「見た目のデザイン（CSS）」を分ける理由は、サイトが出来上がった後でも、写真やイラストを挿入して、見た目の印象を変更することなどが、簡単だからです。

もしも、「構造（HTML）」と「見た目のデザイン（CSS）」を分離しなければ、後でデザイン変更をしようとすると、ページを全て作り直さなければなりません。そう考えると構造と見た目を分けることは重要です。

CSSの種類

CSSにもHTMLと同じように複数のバージョンがあります。1996年12月が、CSSの最初のバージョンでしたが、普及が進まないためデザインの要素もHTMLで指定していました。CSSが使われるようになったのは、2002年以降です。

最新版のCSSバージョンは、CSS3です。それ以前のバージョンは、2011年6月に勧告されたCSS2.1です。

まとめ

ウェブサイトの作成では、「サイトの設計作業」と「ウェブページのデザイン作業（CSSのスタイリング作業）」が必要です。

ウェブデザインは、「CSSのスタイリング作業」と「HTMLのマークアップ作業」で作っています。つまり、構造と見た目のデザインは分離して作られています。

「構造（HTML）」と「見た目のデザイン（CSS）」を分ける理由は、サイトが出来上がった後でも、見た目の印象を簡単に変更できるからです。