ウェブページのデザインは、「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）」を分ける理由は、サイトが出来上がった後でも、見た目の印象を簡単に変更できるからです。
