ウェブサイト作りに欠かせないHTMLとCSSとは何か

ウェブページは、HTMLとCSSというコンピュータ言語で書かれています。
アメリカ人やイギリス人と話をするのには、英語で話す必要があります。また、物理学で物理現象を表現するのには、数学という言語が必要です。
そしてそれらと同じように、コンピュータを通じてウェブサイトを作成したり閲覧したりするのには、この２種類の言語が必要となるのです。
では、そんなHTMLとCSSについて、具体的に説明していきましょう。

HTMLは文書本体を記述し、CSSはそれを装飾する

HTMLは「HyperText Markup Language」の略で、エイチティーエムエルと読みます。
HyperTextとは、通常のテキストではなく高機能なテキストという意味です。別ページへのリンクを貼ったり、画像を挿入したり、見出しをつけたりできるのが、ハイパーテキストなのです。
これは、Windowsの「メモ帳」などで作成できる「通常のテキスト」と比べるとわかりやすいでしょう。メモ帳の文書は、何の変哲もありませんね。ただ文字が羅列されているだけです。しかしハイパーテキストは、それ以上の要素を持っているのです。

そして「HyperText Markup Language」（HTML）は、日本語では「ハイパーテキストの目印をつける言語」といった意味になるでしょう。
これはウェブページを作成するために開発された言語であり、インターネットで閲覧できる各種のウェブページは、このHTMLで書かれているのです。

ただし、HTMLだけで書かれているウェブサイトはおそらくないでしょう。
HTMLは文書本体を記述する言語であり、それだけではデザインが整えられないからです。
そこで必要になってくるのが、CSSです。

CSSは「Cascading Style Sheets」の略で、「シーエスエス」と読みます。Cascadingが「滝のようになること」を意味しますので、日本語では「スタイルシートの（滝のような）連続」のようなニュアンスとなるでしょうか。
文書のスタイルを指定する技術全般をスタイルシートと呼ぶのですが、CSSはHTMLで書かれた文書に装飾を施し、そのスタイルを整えます。HTMLと組み合わせて、ウェブページが表示される際のレイアウトや、文字の色やサイズなどを指定するのです。

HTMLとCSSで書かれたウェブページが表示される仕組み

HTMLやCSSは、ルールに従った記述をすれば、Windowsの「メモ帳」などのテキストエディターで書くことができます。
そのままそのファイルを保存した場合はファイルの拡張子が「.txt」となるのですが、それを「.html」「.css」と変更することで、HTMLファイルとCSSファイルが完成します。

そして、これらの２種類のファイルをウェブページとして閲覧するには、「ブラウザ」というソフトが必要となります。Windowsの「インターネットエクスプローラー」やGoogleの「クローム」などが、それに当たります。
完成したファイルをブラウザで閲覧することで、リンクが貼られたり、見出しがつけられたり、レイアウトが整ったりして、通常のウェブページとして表示されます。冒頭の例えを用いるならば、「ブラウザ人と話をするためには、HTMLとCSSという言語が必要」といえるのです。

なお、一般的に公開されているウェブページは、作成されたHTMLとCSSファイルが、サーバーコンピュータに保存されています。
そしてそのページを見たい人は、自分のコンピュータのブラウザを介して、URLを入力することでその保存先にアクセスして、HTMLとCSSを一時的にダウンロードしてウェブページとして閲覧しているのです。
ですからウェブページを一般公開するには、HTMLファイルとCSSファイルを作成し、サーバーコンピュータを用意し、そこにその２種のファイルを転送する必要があります。
ちなみに、その際のサーバーコンピュータを提供している業者が、レンタルサーバー業者なのです。

HTMLとCSSの書き方の基本

HTMLは、「<>（タグ）」を用いて記述していきます。
たとえば、ページのタイトルを決めるときには、ページタイトルを「<title>○○○</title>」と囲みます。
また、大見出しは「<h1>○○○</h1>」、一段落は<p>と</p>で囲むなど、指定したい要素をタグで囲んでマークアップしていくのです。

一方のCSSは、どの要素を装飾するか選び、そのプロパティと値を書いていきます。
例えば「h1{color:red}」などと書くことがありますが、これは「h1の、色を（color）、赤にする（red）」という意味を持ちます。このように、「どの要素の、何を、どうするか」を指定していくのが、CSSの基本的な書き方なのです。

なお、HTMLのタグ内に直接CSSを記述することも可能です。
しかしながら、それぞれを別ファイルとして作成し、HTMLファイルにCSSファイルをリンクさせる方法が一般的です。なぜならば、デザインを大きく変更する際に、そちらの方がCSSの差し替えが容易だからです。

HTMLとCSSのまとめ

いかがでしたでしょうか？
まとめとしては、「ウェブページはHTMLとCSSという言語で書かれたファイルであり、ブラウザを介してそれらのファイルをウェブページとして閲覧することができる」「HTMLはウェブページの文書本体を記述する」「CSSはHTMLを装飾してウェブページのスタイルを整える」ということになるでしょう。
ですから、ウェブサイト作成に興味のある方にとってHTMLとCSSは、ぜひとも理解しておくべき言語だといえるのではないでしょうか。