5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

ライター／モトキ

HTMLやCSSをプログラミングスクールで学習してきたこともある現役エンジニア兼ライター。スクールで学んだHTMLとCSSの知識を噛み砕いて説明していく

Webサイト作成に必須のHTMLとCSSの違いとは？

image by iStockphoto

インターネットが普及している現代において、Webサイトを知らない見たことも聞いたこともないという方はいないと思います。そんなWebサイト制作に必要になってくるのが今回紹介するHTMLとCSSという2つの言語です。

このHTMLとCSSの違いについてよく知らない方も多いのではないでしょうか。HTMLとCSSの違いは役割にあります。その他に、記述の仕方やルールなど細かい違いもありますが、それらも含め一緒にHTMLとCSSの違いについて見ていきましょう。

httpsとhttpの違いはセキュリティ？安全なサイトの見分け方から変更のメリット・手順をWebディレクターがわかりやすく解説！

違いその1.役割

image by iStockphoto

先ほども少し触れましたがHTMLとCSSの大きな違いは役割です。HTMLとCSSでどんな役割の違いがあるのでしょうか？それぞれ詳しく解説していきます。

HTML：文章の骨組みをつくる

HTMLは『Hyper Text Markup Language』の頭文字をそれぞれとったもので、主に文章の骨組みをつくるために使用する言語です。文章の骨組みを作るとはどういうことか説明すると、Webページの構成として、

・タイトル
・画像
・見出し
・画像
・本文

上記のような構造になっているものが多くあります。ちなみにこのページも同じような構造になっているので確認してみてくださいね。Webページでこのような構造で表示させようとした場合、Wordやテキストなどに書くような普通の文章ではエラーが出てしまいうまく表示されません。

なぜエラーが出てしまうのか簡単に説明すると、Webページを表示させるためにはWebブラウザがWebページを読み込んで表示されるプロセスを踏んでいます。WebブラウザではHTMLで表記されていないと正しく読み込めません。そのためHTML以外で書かれたものだとエラーが出てしまい、うまく表示されないといったことが起きてしまいます。

以上の事情もあり、Webページでタイトルや見出し、画像、文章などを表示するには、HTMLで記述して文章の骨組みを作成しなければいけないのです。

CSS：ページの装飾や見た目を整える

CSSとは『カスケーディングスタイルシート』と呼ばれ、主にWebページの見た目を整えたり装飾したりといった役割を担っています。CSSでできる主なことは、

・文字のフォントや色、大きさなどを変える
・背景の色を変えたりグラデーションで色を表現できる
・余白などを設定して文章を見やすくする

といった装飾や見た目を整えられるため、CSSを極めればでオシャレで見やすいWebページも簡単に作ることができます。

違いその2.記述の仕方

HTMLとCSSを記述をするためにはテキストエディターと呼ばれるツールが必要になりますが、パソコンに標準でついているメモ帳やテキストエディットなどでも記述ができます。HTMLやCSSを使うためには、それぞれファイルを作る必要があり専用の拡張子を使用しなければいけません。

・HTMLの場合：ファイルの拡張子が「.html」
・CSSの場合：ファイルの拡張子が「.css」

またファイルの違い以外にも、HTMLとCSSでは記述の仕方も違いそれぞれルールが存在します。一体どのようなルールがあるのかを詳しくみていきましょう。

HTML：タグと要素

HTMLでは＜＞（タグ）と「要素」と呼ばれるものを使用して文章の骨組みを作っていきます。基本文と使い方の使用例として、

基本文：<要素>タグの間に文章を入れるとWebページに表示されます</要素>
使用例：<p>ここに書いた文章は段落表示されます</p>

タグは、＜開始タグ＞と＜/終了タグ＞のセットで使用し、終了タグには”／”（バッククォーテーション）をタグの頭に表記しましょう。タグの間には要素を入れます。要素とは、この文章は見出し、この文章は段落ですよ、といったWebブラウザが読み込む際めの目印になるもののことです。よく使われる要素には、

・段落で表示できる：p
・見出しを表示させる：h
・リンクを貼れる：a
・画像を表示できる：img

などがあります。この他にも様々な要素や使い方などもあるため、HTMLを学習する際は様々な要素を覚えて自分オリジナルのWebページを作ってみましょう。

CSS：セレクタとプロパティ

続いてCSSの記述の仕方をみていきましょう。そもそもCSSはHTMLとセットで使われることを前提として作られている言語で、CSSの記述の仕方もHTMLの要素を指定して使います。CSSでは「セレクタ」と「プロパティ」「値」の3つを指定して使用しますが、文面では分かりづらいため基本文や使用例をみていきましょう。

・基本文：セレクタ｛プロパティ：値｝；
・使用例（CSSファイル）：p｛color：red｝；
・使用例（HTMLファイル）：<p>ここに書いた文字が赤色になります</p>

CSSでは上記の書き方で記述をしましょう。まずセレクタにはHTMLの要素などを入力し、プロパティにはどのような装飾を施すのかを指示し、値でプロパティの詳細を決めます。

上記の使用例では、HTMLファイル内にあったpタグを指定して使用しているケースです。セレクタには、HTMLファイルにあるp要素を。プロパティには文字の色を変える効果のある「color」を。そして値には文字を何色に変えるかの指定をしており、例では赤色に変える指示を出しているためHTMLにあるpタグの文字は全て赤色で表示されます。

CSSのプロパティには、例で紹介した「color」プロパティの他にも

・fontsize：文字の大きさを変える
・font weight：文字の太さを変える
・background-color：背景色を変える

などといったプロパティもあります。この他にもたくさんプロパティはあるため、HTML同様にCSSを学習する際には、数多くあるプロパティを学んでオシャレなWebページを作ってみてくださいね。

CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

CSSはどこに記述する？

image by iStockphoto

HTMLとCSSはセットで使用するものですが、どのようにHTMLとCSSを紐づければいいのかと疑問に持つ方もいるのではないでしょうか？この章ではHTMLとCSSの紐付けの仕方をご紹介します。CSSを記述する場所について

・HTMLファイルに直接CSSを記述する
・HTMLから外部CSSファイルを読み込む

主にこの2種類の方法があります。それぞれどんな特色やメリット・デメリットがあるのかなど詳しくみていきましょう。

HTMLファイルに直接CSSを記述する

HTMLファイル内に直接CSSの記述をしていく方法です。一見するとHTMLファイルが一つだけで済むから管理しやすいというメリットもありますが、一つにまとめたためにHTMLファイルが重くなってしまい、開くのに時間がかかってしまうといったデメリットも。

何だそんなことかという方もいらっしゃるかと思いますが、開くのに時間がかかってしまうと情報を見ようとしているユーザーはページが開くまで待てられず、別のページに推移してしまいます。せっかく作ったコンテンツも見てもらえる機会が減ってしまっては意味がありません。そのため、ページの開く速度というのもWebサイト制作において大切な要素となります。

CSSの記述が短ければ問題ありませんが、膨大な量の記述がある場合はHTMLファイルに直接CSSを記述する方法はあまりおすすめできません。

HTMLから外部CSSファイルを読み込む

次にHTMLファイルから外部に作成したCSSファイルを読み込む方法をご紹介します。外部のCSSファイルを読み込むメリットとして例え膨大なCSSの記述をしたとしても、HTMLファイルのデータ容量は変わらないためHTMLのデータは軽いままでCSSを適応させることが可能です。

つまり、HTMLファイルをWebブラウザ上で開いたとしても、開く時間に遅延があまりなくユーザーが離脱しにくいWebサイトが出来上がるということになります。

HTMLとCSSを紐づける際はこちらの外部CSSファイルを読み込む方法が主流となっているため、実際にHTMLとCSSを使用する際には、外部CSSファイルを読み込む方法がおすすめです。

HTMLとCSSは誰でも習得できる

HTMLとCSSは直感的で分かりやすいプログラミング言語です。そのためこれまでプログラムなんて組んだことがない。という方でも少し勉強すればすぐにWebサイトの1つや2つ簡単に作れてしまいます。私にはプログラミングなんて。と思わずぜひ試しにHTMLやCSSに触れて1からプログラムを組む面白さをぜひ体験してみてくださいね。