今回はWebサイトを構成している「HTML」と「CSS」について解説していきます。
前回の記事（ホームページが表示される仕組み）と同じく、これからお店や会社のホームページを作成したいと考えている初心者や入門者が無理にHTMLやCSSについて学習する必要はありません。
なぜなら、簡単にホームページやブログを作れるツールやソフトが増えた現在では、HTMLやCSSの基礎知識を知らなくてもWebサイトを作成・運営できるからです。
もちろんHTMLタグやCSS（スタイルシート）の使い方を覚えるメリットもありますので、「どのような意味か知りたい」「使い方を勉強したい」という方だけ読み進めていただければと思います。
HTMLとは？
HTMLは文字の意味だけで言うと「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」の頭文字を取ったものです。とても簡単に訳すと「文書（＝テキスト）に目印を付けた（＝マークアップ）言語（＝ランゲージ）」という意味になります。
普段見ているホームページ（Webページ）はこのHTMLによって構築されています。ブラウザで閲覧しているだけではHTMLの存在を気にする必要はありませんが、裏では（仕組みとしては）ブラウザが自動的にHTMLのデータを私たちが見やすい表示に変換してくれているのです。
早速ですが実際にHTMLで書かれた文書を見てみましょう。
<h1>カフェのホームページ</h1>
<p>これは東京都港区にあるカフェのホームページです</p>
<ul>
<li>ホーム</li>
<li>メニュー</li>
<li>アクセス</li>
</ul>
上記がHTMLで書かれた文書になります。文字の前後に見慣れない<>で囲まれた記号があることに気づくと思います。これはHTMLタグと呼ばれるもので、先ほどの「目印を付けた（＝マークアップ）」の部分を意味します。
もう少し詳しく表現すると、HTMLタグは文書の内容を構造化（意味付け）するための目印のことを指します。
HTMLをブラウザで見ると…
それでは先ほどのHTMLをブラウザで見てみましょう。
少し見慣れた表示になりましたね！
なぜHTMLをブラウザで見ると上記のように見えるのでしょうか？
それはブラウザがHTMLの内容を解釈し、人間に分かりやすい表示に変換してくれているからになります。
上記の例で言うと、<h1>はページの中で「見出し」を意味するHTMLタグです。ブラウザで見た時に「カフェのホームページ」の部分が大きく表示されているのは、ブラウザが「見出しなので目立つように表示しよう」と判断したからです。
また<p>は「文章」に付ける目印、<ul>と<li>は「リスト項目」に付ける目印、というようにHTMLタグにはルールが決められています。逆に言うとそのルールのお陰でブラウザはHTMLの内容を理解し、HTMLタグごとに表示を変えることができるのです。
つまりホームページの内容（これが見出しで、これが文章で、これがリストで、これが画像で…）というのは、HTMLタグによって意味付けされ、ブラウザによって人間に分かりやすい表示に変換されているということです。
CSSとは？
次にCSSについて解説していきます。
こちらも文字の意味だけで言うと「Cascading Style Sheets（カスケーディング スタイル シート）」の頭文字を取ったものです。
ホームページを作る上での役割りとしては、HTMLがページの内容を意味付けするのに対し、CSSはページのデザインを担当します。
もう少し具体的に言うと、HTMLタグで囲まれた要素に対して、ブラウザで表示する際の大きさ・色・配置などのレイアウトを自由に変更することができます。
CSSでデザインしてみよう
それでは実際にCSSを使って、先ほどのHTMLをデザインしてみましょう。まずはもう一度HTMLの内容を確認しておきます。
HTMLとブラウザで表示した内容
<h1>カフェのホームページ</h1>
<p>これは東京都港区にあるカフェのホームページです</p>
<ul>
<li>ホーム</li>
<li>メニュー</li>
<li>アクセス</li>
</ul>
▼ブラウザで表示したHTML
これをCSSで装飾していきます。
文字の大きさ（フォントサイズ）を変える
ブラウザで見た時に「カフェのホームページ」という文字の大きさを少し小さくしたいので、<h1>タグのフォントサイズを変更するCSSを書いてみます。
h1 {
font-size: 20px;
}
↓
「カフェのホームページ」という文字が小さくなりましたね！
これは「H1タグで囲まれた要素のフォントサイズを20pxにする」というCSSを加えたからです。
文字の色を変える
次に「これは東京都港区にあるカフェのホームページです」という文字の色を赤色に変更してみます。
p {
color: #c00;
}
↓
赤色に変わりましたね！
これは「Pタグで囲まれた要素の文字の色を赤（#c00）にする」というCSSを加えたからです。
このように、CSSを使えばHTMLの内容を自由に装飾・デザインすることができるようになります。
学習におすすめの書籍（本）
これからHTMLやCSSを勉強したいという方におすすめの書籍（本）を紹介します。
実はHTMLやCSSの使い方はネットで検索すればいくらでも出てきますので、わざわざ本を買う必要はありません。しかし、ネットの情報は古いものと新しいものが入り混じっており、初心者や入門者がその中から自分に必要な情報だけを探すことは意外に難しいのです。
そのため、まず最初は1〜2冊の入門書で体系的に学習し、ある程度の知識を得てから、分からないことや調べたいことをネットで検索するという方法をおすすめします。
上記の2冊はどちらもこれからHTMLとCSSを学習したいという方におすすめの内容になっています。（逆に既に中級者以上の方には少し物足りないかもしれません）
HTMLやCSSが分からなくてもホームページは作れる！
一番最初にもお伝えしましたが、もう一度言います。
これからお店や会社のホームページを作りたいと思っている初心者や入門者の方が無理にHTMLやCSSについて覚える必要はありません。
なぜならホームページを作る方法はいくつもあって、直接HTML+CSSを書いてホームページを作ることは、その中の1つの手段でしかないからです。
色々あるホームページの作成方法
例えば「ホームページ制作会社」に依頼すれば、何も知らなくてもホームページを作ってもらえます。これも手段の1つです。
また「グーペ」などのホームページ作成サービスを利用すれば、HTMLやCSSの知識がない人でもキレイなデザインのWebサイトやブログを簡単に作成できます。もちろん、画像・リンク・レイアウトなども自由に変更できるようになっています。
他にもレンタルサーバーを借りてWordPress（サイト作成ツール）をインストールすれば、管理画面から簡単にページを追加したり変更することができます。
このように「ホームページを作る」ことだけが目的であれば、必ずしもHTMLやCSSの知識が必要という訳ではありません。
人気のホームページ作成サービス
- こんなに簡単！店舗向けホームページがすぐ始められる「グーペ」
- ホームページ作成サービス、おちゃのこさいさい
- ありえないほど簡単にホームページができる【Jimdo】
- カンタンなのに美しい【ホームページ作成サービス | BiNDクラウド】
格安レンタルサーバー一覧
HTMLやCSSを覚えるメリット
もちろんHTMLやCSSの使い方を覚えるメリットもあります。
ホームページ作成サービスなどで元々用意されているデザインテンプレートを更に自由にカスタマイズしたいという場合、CSSの知識が必要になります。
また、SEO対策（検索エンジン対策）によりサイトのアクセスアップを図りたいという場合、HTMLの知識があった方が有利です。
このように、ホームページを作るためというよりも「作ったサイトを自分の思うようにカスタマイズしたい」という場合に、HTMLやCSSの知識が役に立ってくるでしょう。
初心者におすすめの無料学習サイト3選
最後に、これから独学でHTMLやCSSについて学習したいという初心者や入門者に人気の無料学習サイトを3つご紹介します。
HTMLやCSSの学習サイトはネットで検索すると色々と出てくるのですが、実際に利用した経験からすると下記の3サイトがおすすめです！
ドットインストール
動画でプログラミングをマスターすることができる初心者向けの学習サイトです。各動画は約3分と短いので、隙間時間に合わせて勉強することができます。
Progate（プロゲート）
こちらは動画ではなく「スライド」を見たり、直接コードを「書いて」学べるタイプの学習サイトです。
シラバス（Cyllabus）
シラバスは「マネして学べる」がコンセプトのプログラミング学習サイトです。各ステップの説明がかなり詳しく、入門者でも分かりやすく勉強を進められます。
