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

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

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

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

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

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

ウェブページの「デザイン作業（CSSのスタイリング作業）」は、次のように2つに分けられます。1つ目は、文書の構造を決めるHTMLのマークアップ作業です。そして2つ目は、見栄えを決める「スタイルシート（CSS）によるスタイリング作業」です。

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

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

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

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

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

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

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

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

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

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

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

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