ホームページ作成って調べるとHTMLとCSSと出るけど、これって一体何なの？
それなら俺に任せてよ！HTMLとCSSの違いについて説明するよ
世界中にあるほぼすべてのウェブサイトは、「HTML」から成り立っています。「HTML」とは、Webサイトの根幹を担う言語です。今からWebサイトを作りたい方やホームページを作りたい方に必見です。基本を一から解説していきます。
HTML
HTMLとは？
HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webサイトの土台を作る言語です。すべてのほとんどのサイトがこのHTMLを使っています。今このサイトもHTMLを用いて構成されています。
Webサイトを作る上で欠かせないってのは分かったけど、実際どんな風に書かれているの？
じゃあ実際にコードを見てみようか！
このプログラムは右のサイトの一部です。「画像のサイト」
わぁ、何が何だか分かんないよ…
ちょっと難しいね…
もう少し簡単なコードを見てみよう！HTMLは< >で囲まれたもので示すことが多いんだ！
HTMLはWebページに表示したい文章を、< > で囲まれた「タグ」と呼ばれる文字列で囲んで書いていきます。
例えば、以下のようなHTMLを記述したとします。
<html>
<h1>ここにタイトルを書く</h1>
<p>ここに文章を書く</p>
</html>これを実行すると、以下のような表示になります。
他にもたくさんのタグの種類がありますが、タグで文字列を囲むことで、様々な指示を与えています。
例えば、画像を貼る「img」タグや、リンクを貼る「a」タグなど、様々な種類のタグがあります。そのように、コンピュータにページの構造を理解させるのがＨＴＭＬの役目です。
ハイパーテキストとは
ハイパーテキストとは、複数のファイルとファイルを関連付け、行き来できるようにする仕組みのことです。例えば、下のボタンを押すとGoogleのサイトに移ります。
このように、リンクをいくつも組み合わせてできているものを、ハイパーテキストと言います。
CSS
CSSとは？
CSSとは「Cascading Style Sheets」の略で、文書の見た目を装飾したり、デザインを設定したりすることができる言語です。Webサイトは、HTMLとCSSがセットで作られていることがほとんどです。
HTMLだけだと簡素な見た目になりがちですが、CSSを適用することで、デザイン性のあるサイトに仕上がります。CSSのプログラムを見てみましょう。
このように、HTMLと表記も異なります。初めのうちは、難しいかもしれませんが、慣れてくるとスラスラ書けるようになると思います。
HTMLとCSSの違い
今までHTMLとCSSのそれぞれの役割について説明しました。では具体的にCSSが適用されていた場合のサイトと、HTMLのみで作ったサイトを、同じサイトで比較してみましょう。
上はCSSを適用したサイトです。では、ここから同じサイトでCSSの適用を外し、HTMLのみのサイトを見てみましょう。
どうでしょうか。上の画像と下の画像では一目瞭然だと思います。画像の位置やレイアウト、文字の大きさや色などを調整するのがCSSの役割です。
CSSはデザインを構成するにあたって欠かせないのです。
まとめ
HTMLとCSSの違いでよく例えられるのが、「HTMLは教室の椅子や机を用意するだけのもの、CSSはHTMLで用意された椅子や机の配置やデザインなどを構成するもの」と言われます。そうイメージしておくと、とても分かりやすいと思います。
HTMLとCSSはもっと詳しく知りたいと思う方は、実際に少しコードを書いてみてください。まずは、試すことが大事だと思いまず。
