Info Tech

HTML5とCSS3基本講座 5回|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)」を分ける理由は、サイトが出来上がった後でも、見た目の印象を簡単に変更できるからです。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。