HTMLやCSSって一体何のことなのでしょうか？
ホームページについて調べたりブログに触ったことがある人なら、聞いたことがあるかもしれません。
ざっくりとHTMLやCSSを一言で表すとするならば、HTMLやCSSはホームページを表示するためのデータ形式のことです。
当記事を読めば、HTMLやCSSが一体何なのか、その違いや特徴まで理解できるようになります。
なぜHTMLやCSSのデータが必要なのか
あなたが見ることが出来ている様々なWebページにはいろいろな情報が詰まっていますが、表示されている状態の情報は人間には分かりやすくても、そのままではコンピュータには理解できません。
そのため、コンピュータにも分かる形でデータを作る必要があります。それがHTMLやCSSといったデータ形式なのです。
そして、私たちがページを閲覧するときには、ブラウザがこれらのコードを元に人間が見て分かる形で表示してくれるわけなのです。
HTMLとCSSがなぜ必要なのかお分かりいただけましたでしょうか。
ではここからは、HTMLとCSSがそれぞれどのようなものなのか、その特徴を見ていきましょう。
HTMLとは何か
HTML（エイチティーエムエル）は、言うなればホームページの骨格にあたります。どのような構造になっているかの情報が詰まっています。
例えばサイトの構成「ヘッダーにはメニューがあって、メインのコンテンツあって、文章はこうで、写真はこう、ここにはリンクのボタンが…」などの情報が詰まっています。
そしてHTMLはページには表示されないサイト自体の情報が書かれている部分と、実際にページに表示される部分に分かれています。
ここで注意したいのが、HTMLは基本的にはあくまで構造やサイトの情報だけを記しているという点です。見た目を整える役割は後述のCSSが担います。
そもそもHTMLはHyper Text Markup Languageの略で、日本語に訳すとするならば、「ハイパーテキストにマークアップする言語」となります。
訳せていませんね…もう少し詳しく説明します。
ハイパーテキストとは
ハイパーテキストはリンク機能を使うことが出来る高機能な文書のことです。クリックしたときに別の場所に移動することが出来るあのリンクです。
本来の文書はただの文字情報ですが、ホームページ内にはいろいろなリンクがあって、それらのリンクを踏むことでワープのごとくいろいろな情報にアクセスすることが出来ますよね？
これは、テキスト（文書）をハイパー（超越）したWeb上の特性とも言えますのでハイパーテキストと呼ばれています。
マークアップとは
マークアップを目印をつけていくことを意味します。「これは見出しですよ～、これは文章ですよ～、これは写真ですよ～」という風に目印をつけていきます。
こうすることで、コンピュータは内容を理解し、その情報を元にディスプレイに表示してくれるというわけですね。
まとめると、HTMLはホームページの構造を形作る骨格のようなもので、ハイパーテキストと呼ばれるリンクが可能な文書に目印をつけていくための言語と言えます。
データ形式でもあるので、HTMLのファイルの拡張子（ファイルの最後につく名前）も「.html」になります。
また、HTML5など最後に数字が付いているのを見かける場合がありますが、これはバージョンを表していました。しかし2021年１月２８日にHTML5が廃止され、現在では「HTML Living Standard」が標準規格となっています。今から勉強するならLiving Standardの記載があるものにすれば間違いありません。
ちなみに、見ているページのHTMLはPCであればF12キーを押すと見ることが出来ます（デベロッパーツールと言います）ので興味がある方はいろいろなサイトで試してみてくださいね。
CSSとは何か
CSS（シーエスエス）はCascading Style Sheetsの略で、単にスタイルシートと呼ばれることも多いです。
構造を指定するのがHTMLなのに対し、CSSではHTMLでマークアップした要素に装飾を施す役割を持っています。
例えば、「文字を大きくしたい、文字色を変えたい、リンクをボタンにしたい、余白を調整したい…」のように、私たちが実際にWebページを見た時の見た目に関する設定はCSSが担当します。
さらにボタンにポインタを置いたときに色が変わったり、画像をふわっと浮かび上がらせるなど、簡単な動きであればCSSで実現可能です。
HTMLとCSSを良く一緒に目にするのは、基本的にHTMLとセットで使われるためです。「HTMLで目印を付けたこの部分にこういう装飾を施してくださいね～」と指示するわけですね。
このようにCSSは装飾を担当しますが、デザインのすべてをCSSが担っているわけではありません。CSSでできる装飾には限界があるため、実際のデザインに関する部分は画像と使い分けているのが普通です。例えば、ロゴマークであったり、背景を花柄の模様を入れたいなどはCSSだけでは実現できないので画像を使います。
CSSの拡張子は「.css」、最新バージョンはCSS3です。バージョンが上がるごとに表現できる幅が広がってきました。
HTMLとCSSの実際のコードを見てみよう
HTMLとCSSの概要についてはざっくりとイメージ出来たかと思いますので、実際にとてもシンプルなサンプルコードを見てみることにしましょう。
内容についてはここでは詳しく解説しませんが、雰囲気だけでもつかんでもらえたらと思います。
「index.html」がHTMLファイル、「style.css」がCSSファイルになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ホームページのタイトル！</title>
</head>
<body>
<p class="sample">これはサンプルだよ。</p>
</body>
</html>.sample {
color: #ff3333;
font-weight: bold;
}そして上記のコードで実際に出力される文字は、HTMLのみの場合と、HTML＋CSSの場合とでそれぞれ以下のように表示されます。
HTMLのみ
これはサンプルだよ。
HTML+CSS
これはサンプルだよ。
HTMLだけではただ文字が表示されただけでしたが、CSSで文字に赤い色と太文字にする指定したのでこのように表示が変わりました。
これは非常に簡単な例ではありますが、「HTMLは構造」「CSSは装飾」と役割分担をしてサイトが表示されているということご理解いただけたのではないでしょうか。
HTMLとCSSが分かれている理由
ここまでHTMLとCSSでは役割が違うことを説明してきましたが、実はHTMLの中に装飾のためのコードを入れることも出来ます。
直接装飾したいところにスタイルをかけることができるため、特にHTMLとCSSを勉強したての初心者の方であったり、ブログで文字色を変えたりした経験のある人は、「わざわざファイルを分ける必要があるの？」と思うこともあるかもしれません。
▼前項のCSSでの装飾をHTML内でかけた例▼
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホームページのタイトル！</title>
</head>
<body>
<p style="color: #ff3333; font-weight: bold;">これはサンプルだよ。</p>
</body>
</html>わざわざ、ファイルを別にして記述する理由は次の通りです。
- コードが見やすくなり、管理がしやすくなる。
- 繰り返し使われる装飾などは使いまわしがきく。
- 変更をかける時も一か所の修正で済む
コードが見やすくなり、管理がしやすくなる
上記の例では簡単な装飾だけだったので問題に感じなかったかもしれませんが、実際にホームページを作る時にはもっと長くて構造も入り組んだHTMLになることがほとんどです。
そんな中ですべてのスタイルを直接HTMLの中に組み込んでいくとコードが煩雑になり、読みづらいコードになってしまいます。
コードの読みやすさは編集のミスを防いだり、管理のしやすさに直結するので、なるべく装飾はCSSファイルへと分けて記述するようにします。
繰り返し使われる装飾などは使いまわしがきく。
Webページを作っていく中で、同じような装飾を施すことは少なくありません。
例えば見出しなどはその典型です。そのような場面に出くわした時に毎回同じコードを書いていたのでは手間ですよね。
しかし、同じ装飾を使いたいところに同じ目印をつけておけば、一度のCSSの記述で同じ目印をつけていた箇所すべてに同じ装飾を適用することが出来ます。
これは後から何度でも同じスタイルを使いまわしできることになるので非常に使い勝手がいいのです。
変更をかける時も一か所の修正で済む
ページを作っている途中、もしくは完成した後に「やっぱりここの部分の見た目を変えたい！」ということもよくあります。
そんな時にもHTMLとCSSを分けて記述していれば、同じ見た目の部分はCSSの一部の変更のみで済みます。これがHTMLの各箇所に記述されていたとしたら全部直さなければいけないので大変です。
スタイルを使いまわしできるということは、同時に修正も一か所で済むということを示しているんですね。
このようなメリットがあるため、Webページ＝HTML＋CSSでの構成が基本となっています。
HTMLやCSS以外のファイルもある
ここまで、HTMLやCSSでホームページが作られているんだよーという話をしましたが、実際にはその他にJavaScript（JS）やPHPなどのプログラミング言語も使われることが少なくないので、その点についても軽く触れておきます。
ホームページは時代とともに進化してきており、今ではページ内にいろいろなアニメーションの動きがあったり、見るユーザーによって表示を変えたり、お問い合わせフォームが必要だったりと、それはもう様々な機能が付いているのも珍しくありませんよね。
これらの機能を実装するには、HTMLやCSSだけでは足りないため、プログラミング言語が導入されているのです。（たまに誤解される方がいるようですが、HTMLやCSSはプログラミング言語ではないとする考えが一般的です。）
サイト内のアニメーションのような動きについての処理はJavaScriptが使われていることが多いですし、PHPはお問い合わせフォームに使われたりしています。
PHPはプログラミング言語でありながらも、PHPファイル内にHTMLを組み込めるためWebサイトと相性が良く、WordPress（ワードプレス）のベースにもなっています。
このように、用途に合わせて様々な言語が使われることがあるものの、ホームページの基礎となっているのはHTMLとCSS、この二つであるということを押さえていただければと思います。