こんにちは！TKCです。

「ホームページを作ってるとHTMLとCSSが出てきたけどそれぞれの違いがわからない…」とお困りではありませんか？

僕もHTMLやCSSを勉強していた当時は明確な違いが分からず覚えるのに苦労しました。そこで今回はHTMLとCSSの違いについて初心者でも簡単に理解できるように噛み砕いて解説を行います。

以下のお悩みを持っている方におすすめな記事です。
・HTMLとCSSの違いを知りたい
・HTMLやCSSをすぐに使ってみたい
・HTMLでも装飾できるけどなんで？

HTMLとCSSの大まかな違いとは？

HTMLとCSSの大まかな違いとは？

まずはイメージをしやすいように大まかな違いとしてズバッと書いていきますと

  • HTMLはウェブ上にホームページを表示・設定するための言語
  • CSSは表示されているページを装飾をするための言語

です。簡単にこれだけだとHTMLとCSSがどういったものなのか想像が難しいと思いますのでHTMLとCSSをそれぞれ深掘りし具体例を出していきます。

HTMLはホームページの基盤

HTMLを書くことで文字や画像をホームページ上に表示したり、後ほど詳しくご紹介するCSSやプログラミングで用いられるJavaScriptなどを読み込むこともできます。また要素の表示だけでなく、ページのタイトルや説明文などを設定することもできます。

したがってHTMLの大まかなイメージとしては「ホームページの基盤（骨組み）」が近いと言えます。このHTMLはどのウェブサイトでも使われており、ホームページを作る上で必須の言語となります。

表示されているホームページのHTMLをPCで確認する場合、右クリックし「ページのソースを表示」をクリックすると現在表示されているページのHTMLが表示されます。

ちなみにHTMLとはHyperText Markup Languageの略です。

「ハイパーテキストって普通のテキストと何が違うの？」

と疑問に思われた方がいらっしゃるかと思いますので簡単に解説すると、通常のテキストとは違いハイパーテキストはテキストに画像を表示する機能やクリックをすると別ページに飛ぶことができるリンク機能などが含まれているものをハイパーテキストと呼びます。

HTMLでできることまとめ

ここまででHTMLでできることを簡単にまとめると

  • 文字や画像を表示
  • 文字や画像にリンクを設定
  • ページの公開や非公開を設定
  • ページのタイトルや説明文の記述

上記の特徴があります。HTMLを理解することでホームページ上の表示内容の変更やページの設定を行うことができるようになります。

CSSは表示されている要素を装飾

続いてCSSですが、CSSはHTMLと違い、表示されている要素に装飾を行う言語です。装飾の機能しか持っていないのでHTMLのようにページのタイトルを設定する機能やページの公開・非公開を設定する機能などはありません。従ってホームページの構造上、HTMLは必須ファイルですが、CSSは必須ではありません。

しかし近年ではHTMLだけでページを表示することはほとんどなく、どのページにも装飾を行うので基本的にHTMLとCSSはセットで使われます。

具体的な装飾内容をいくつかあげると、「文字色やサイズの変更」、「ページ全体のレイアウト」、「見出しをかっこよく表示」などCSSを使うことでページ内容が整理されて見やすくなるのでさまざまな場所でHTMLと組み合わせて使われています。

CSSでできることまとめ

CSSでできることをまとめると

  • 文字色やサイズの変更
  • ページのレイアウト
  • 見出しの装飾

といったことができます。CSSを使ってページを装飾することでユーザーが使いやすい（読みやすい）ページに装飾し、よりホームページの価値を高めることができます。

HTMLとCSSの書き方の違いとは？

HTMLとCSSの書き方の違いとは？

続いてHTMLとCSSの書き方の違いを解説していきます。ここからはHTMLやCSSを書いていきますのでまだテキストエディターを持っていない方は以下を参考にダウンロードしてみてください。

HTMLの書き方

まずはHTMLの書き方からみていきましょう。

HTMLの書き方の大きな特徴として表示したい内容をHTMLタグで囲むという特徴があります。実際に見ていただいた方が早いかと思いますので簡単なHTMLを用意しました。

HTMLで表示されているコードが今回書いたHTMLでResultは実際に表示されるページ内容です。

コードを全て解説すると長くなってしまうので今回は簡単に解説しますが、8行目のh2（見出しタグ）や9行目のp（段落タグ）などで表示したい文字を囲むことでResultに囲んだ内容が反映されていることがわかるかと思います。

CSSの書き方

次にCSSの書き方を見ていきましょう。

CSSは装飾を行いたいHTMLの要素を指定し装飾内容を書いていきます。今回は先ほど書いたHTMLをそのまま使って見出しをこのブログと同じように装飾してみようと思います。

CSSを見ていただくとh2のカッコ内に装飾が書かれているのが確認できます。こちらも簡単に解説するとborder-leftは左に線を追加し、paddingとmarginはそれぞれ余白を調整しています。

HTMLとCSSの勉強法

HTMLとCSSの勉強法

HTMLとCSSの違いは少しイメージできたけどどうやって勉強すればいいの？と言う方向けに低コスパで効率的に勉強できるおすすめの勉強方法をご紹介します。

Udemy

Udemy

Udemyはベネッセが運営している勉強動画プラットフォームで配信している講師はプロのWebデザイナーやエンジニアが多く、HTMLやCSSをこれから始めたい初心者の方用の入門動画も多数用意されています。

またUdemyの動画は全て買い切りで無駄な月々の料金もかからず、一本購入すれば数十時間の動画を何度でも見ることができるためコスパが高いものが多く、1本あたりの値段も1500円~2000円程度と書籍を買うよりお買い得な値段ですぐに勉強を始められます。

次にご紹介する動画はUdemyの中でも非常に評価がよく、コスパもいい動画でして正直こちらを購入すれば他は必要ないぐらいの内容となっています。

未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース

この動画は2,000円程度で購入できる動画ですが、丁寧な動画内容に加え、圧倒的ボリュームでHTML、CSS以外にも

  • Web知識
  • Photoshop
  • Webグラフィックデザイン

などWeb周りの知識を全て学ぶことができます。Web制作の書籍を購入すると2000~3000円程度のものが多いですが、それより値段が安くこれだけの内容が学べるので正直これ以上にコスパがいい勉強方法はないと思います。

未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース

書籍で勉強

動画学習サイトは既に知っている方やどうしても手元に書籍を残したい方向けにHTMLとCSSを勉強できるおすすめの書籍も2点あげておきます。

作りながら学ぶ HTML/CSSデザインの教科書

こちらは僕がHTMLとCSSを勉強した際に一番最初に購入した書籍です。300ページ以上あり他の書籍に比べボリュームがかなり多いですが、その分コスパは高く一冊でかなりの量を勉強できるかなと思います。2013年に発売された書籍なので記述内容に少し古い部分がありますが基礎は変わっていないのでそのまま使用することができます。

また書籍内で解説されているサンプルサイトのコーディングに関してもデザインが整っており作っていてコーディングの楽しさが実感できる内容となっています。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

人気ブログWebクリエイターボックスのManaさんが書いているこちらの書籍もボリュームが多くとても人気のある書籍です。こちらは2019年に発売されており、比較的新しいので2021年現在と比較しても古さは感じられずそのまま使える内容となっています。

僕の体感ではありますが「作りながら学ぶ HTML/CSSデザインの教科書」に比べて図や写真が多いのですぐに手を動かしたい人にはこちらをおすすめしたいです。

サンプルで制作するサイトのデザインはこちらもオシャレで作っていてサイト制作の楽しさを感じられる一冊と言えます。