HTMLとCSSって、どこが違うの？
ウェブサイトを作成したいけど、難しいの？
ウェブサイトを作成してみたいけど、自分にできるかな？
ウェブサイト作成に興味があれば、HTMLとCSSの習得は避けて通ることはできないでしょう。
この記事では、HTMLとCSSの特徴と違い、そしてサンプルコードで簡単なウェブサイトを作ってみます。
初めて、HTMLとCSSに触れる方にとって、ウェブサイトがどのようにして、コーディングされているのか、理解していただけると思います。
HTMLとCSSの違い
HTMLとCSSは、どちらもウェブサイト制作やウェブ開発に欠かせないものです。
HTMLの役割、CSSの役割は全く違うものです。
HTMLだけでも、ある程度は機能するものの、CSSがないと思い通りのデザインに仕上げることは難しいでしょう。
また、CSS単体では全く機能せず、CSSはHTMLがあってこそ、その役割を発揮できます。
そんなHTMLとCSSについて、まずはしっかりと理解しましょう。
HTMLとは
ウェブサイトを制作するための言語として、HTML（Hyper Text Markup Language）は1990年代初めに開発されました。
最初のバージョンでもあるHTML1.0は1993年にリリース、また現在のバージョンであるHTML5は2014年にリリースされ、それに至るまで目まぐるしい進化を遂げてきました。
HTMLは、ウェブサイトばかりでなく、ウェブ開発にも欠かすことができない技術であることは言うまでもなく、今や私たちの生活になくてはならない存在になっています。
1994年に設立されたW3C（World Wide Web Consortium、ウェブ技術の標準化を目指す非営利団体）は、今も新しいHTMLの開発を続けており、未来のウェブ技術の進歩に大きく貢献しています。
HTMLは、それぞれのコンテンツに意味を持たせるためのマークでもある「タグ」を用いて、文章の構造を整えていきます。
ウェブサイトでは、タイトルや見出し、それに対応する段落や写真、画像などを体系的に記述していくことがとても重要なのです。
CSSとは
HTMLは、ウェブサイトの土台を作成するものでした。
一方、CSS（Cascading Style Sheets）はHTMLで記述されたウェブサイトのデザインを整えたり、変更したりするための言語です。
HTMLを使ってデザインを整えたり、変更したりすることはできますが、非常に複雑になってしまい、メンテナンスもとても面倒なものになってしまいます。
今やCSSは、HTMLと同様、ウェブサイトやウェブ開発になくてはならない技術に、進歩を遂げてきました。
1996年に、最初のバージョンであるCSS1がリリース。
最新のバージョンであるCSS3は2011年にリリースされました。
スマートフォンの普及に伴うレスポンシブデザインなど、より柔軟なレイアウトに対応できる機能が充実しています。
現在のウェブサイトはコンテンツばかりでなく、デザイン、見た目も重視する傾向にあります。
CSSはウェブ技術を支える必要不可欠な役割を果たしていると言えるでしょう。
SEO対策の重要性
SEO対策（Search Engine Optimization）とは、検索エンジンで上位表示させるための施策のことを指します。
検索エンジンでより上位表示させた方が、見てもらえる可能性が高くなるため、ウェブサイトを制作する際は、このSEO対策を念頭に置く必要があります。
せっかくウェブサイトを作成するわけですから、少しでも多くの人に見てもらいたいですからね。
会社のウェブサイトに関していえば、SEO対策の良し悪しが売上を左右すると言っても過言ではないでしょう。
では、検索エンジンの順位はどのようにして決められているのでしょうか？
ネット上を巡回するプログラム、Googleクローラー（Googlebot）が収集した情報をもとに、検索エンジンの順位は決められています。
順位を決めるための評価基準の詳細については、公開されていないので、わかりません。
ただ、少しでも良い評価を得るために、基本的なルールに基づき、HTMLとCSSを体系的に記述していく必要があるのです。
HTMLとCSSの書き方をしっかりマスターして、SEO対策にも強いウェブサイトを作れるウェブデザイナーを目指しましょう。
簡単なウェブサイトを作ってみる
HTMLとCSSを使って簡単なウェブサイトを作ってみることにします。
特別な開発環境が必要なわけではありませんので、お時間があるようなら、ぜひ手を動かして、実際に作ってみてください。
HTMLを書こう
まず、メモ帳を起動させます。
以下のHTMLを入力してみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルウェブサイト</title>
</head>
<body>
<h1>見出し</h1>
<p>サンプルです。</p>
</body>
</html>サンプルコードの「<」と「>」で囲まれているのが「タグ」です。
文字などの最初と最後にタグを書き、囲んでいきます。
文字などの前のタグは「<～>」、また、文字などの後のタグは、「/（スラッシュ）」をつけて、「</～>」とします。
ウェブサイト内で、タグは、囲んだ文字などに意味を与えているのです。
例えば、titleタグは文字通り、ウェブサイトのタイトルとなるタグです。
上のサンプルコードだと、「サンプルウェブサイト」がこのウェブサイトのタイトルとなります。
また、h1タグの「h」は「heading」の略で、見出しを意味します。
pタグの「p」は「paragraph」の略で、段落を意味します。
このように、タグは、囲んだ文字などの種類を分類したり、役割を明確にするために必要なものなのです。
ウェブサイトを作成する上で、必ず記述する必要があるタグもありますので、一部ご紹介します。
まずは、HTMLを書き始めることを宣言する時に使う1行目の「<!doctype html>」。
次に、日本語のウェブサイトであることを記述する2行目の「<html lang=”ja”>」。
そして、文字化けを防ぐために使う4行目の「<meta charset=”utf-8″>」は必ずheadタグの中で使います。
他詳細については、この記事では割愛しますが、これら必ず必要なタグは、ないとウェブサイトとして機能しませんので、注意が必要です。
メモ帳に先ほどのサンプルコードを入力したら、ファイル名を「sample.html」とし、デスクトップに保存してみます。
出来上がったファイルが既存のウェブブラウザのアイコンになっていることに気づくと思います。
さっそく、「sample.html」をダブルクリックしてみましょう。
以下のように表示されれば、完成です。
見出し
サンプルです。
CSSで加工してみる
次に、CSSでちょっとした加工、装飾をしてみます。
先ほどのファイル「sample.html」をメモ帳で開き、以下のように変更してみます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルウェブサイト</title>
</head>
<body>
<h1 style="background-color: #0000FF; color: #FFFFFF;">見出し</h1>
<p style="color: #FF0000;">サンプルです。</p>
</body>
</html>h1タグとpタグの「<」と「>」の中が変わったことに気がつくと思います。
各タグに「style=」があり、そこでCSSを記述し、ウェブサイトをどのように装飾していくかを決めていきます。
「background-color」は背景色、「color」は文字色を意味しています。
今回、色を16進数で表現していてわかりにくいですが、h1タグの背景色は「青（#0000FF）」、文字色は「白（#FFFFFF）」、またpタグの文字色は「赤（#FF0000）」としています。
変更したら、上書き保存して、「sample.html」をダブルクリックします。
以下のように表示されれば、完成です。
見出し
サンプルです。
HTMLは、タグの種類と基本的な書き方を覚えるだけですので、決して難しいわけではありません。
ただ、少し凝ったウェブサイトを制作しようとすればするほど、CSSが複雑になり難しくなっていきます。
したがって、HTMLと比較すると、CSSの方が難しいと言っていいでしょう。
まとめ
HTMLとCSSはウェブサイトを作成する時に必要となる、基本的な知識であることはおわかりいただけたと思います。
HTMLに関しては、タグの種類を目的に応じて、使いこなすことができれば、決して難しくありません。
気にいったウェブサイトがあれば、それを真似て少しでも近づける練習をしてみると良いでしょう。
その時にCSSの知識も必要になりますので、試行錯誤しながら、慣れていくことが重要です。
わからないことがあれば、調べてみて、やってみる。
HTMLとCSSをマスターするためには、その繰り返しだと思います。
自分の思い通りのオリジナルのウェブサイトを作成するには、最初は時間がかかりますが、その分、達成感もひとしおでしょう。
この記事が、ウェブサイト作成のきっかけになれば幸いです。
