雑学

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

よぉ、桜木建二だ。HTMLとCSSって知っているか?HTMLとCSSはWebサイト制作には欠かせないものだが、その違いについてまだよく分かっていない者もいるんじゃないか?今回はそんなHTMLとCSSの違いがどういうものなのかを紹介していく。HTMLとCSSの役割や書き方の違いなどを現役エンジニア兼ライターのモトキと一緒に解説していくぞ。

解説/桜木建二

「ドラゴン桜」主人公の桜木建二。物語内では落ちこぼれ高校・龍山高校を進学校に立て直した手腕を持つ。学生から社会人まで幅広く、学びのナビゲート役を務める。

ライター/モトキ

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

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

image by iStockphoto

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

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

違いその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ページを作ってみてくださいね。

no-img2″>
 <figcaption class=桜木建二

HTMLとCSSの役割や記述の仕方といった基礎的な部分を解説してきたが、次の章からはHTMLとCSSの実際どのように使うのかや紐付けの仕方などといった実践的な内容に触れていくぞ。

CSSはどこに記述する?

image by iStockphoto

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

\次のページで「HTMLファイルに直接CSSを記述する」を解説!/

次のページを読む
1 2
Share: