【入門編】HTMLとCSSって何が違うの？両者の違い・おすすめの学習コンテンツなどを紹介していきます。

HTML・CSS

「HTML・CSSって何？」
「どうやってHTML・CSSの知識を付けていけばよいかわからない」

Web業界に入りたての方で、上記のような疑問を抱えている方はいらっしゃるのではないでしょうか？HTML・CSSどちらも、ホームページ制作に必要不可欠なプログラミング言語です。そんなHTML・CSSについて本記事では、

といったことを中心に解説していきます。HTML/CSSの基本を押さえることができるようになっていますので、ぜひ最後までご覧ください。

HTMLとは

HTMLとは、Webページの構造を作成するための言語。HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。

HyperText：特別な役割を持ったテキストデータ(リンクや表など)
Markup：目印をつける
Language ：言語

ホームページ制作

HTMLでテキスト部分を作成し、CSSでWebサイトのデザインやレイアウトを整えていきます。両者を組み合わせることによって、バリエーションに富んだWebサイトの構築が可能です。

HTMLメール

HTMLメールとは、文字の色やサイズを指定したり、画像や動画などを組み込んだりできるメールのことです。HTMLを使うことで、デザイン性豊かなメールの作成ができます。

Webアプリ作成

Webアプリで動きをつけているのは別のプログラミング言語ですが、骨組みにはHTMLが使われています。

文字化けする場合がある

Webコードの解釈の違いが原因となり、表示されたテキストが文字化けする場合があります。文字コードを正しく指定しましょう。

半角で記述する

全角でタグの指定をすると表示が崩れてしまうので、必ず半角で記述するようにしましょう。

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、Webページのスタイルを指定するための言語です。スタイルシートとも呼ばれています。

HTMLとCSSの関係を、イメージしやすいように人間の顔に例えたものが下の図です。

【初心者向け】HTML・CSSとは？プログラミングの基本をイチから分かりやすく解説

HTMLというベースにCSSを組み込むことで、装飾を施すことが可能になります。
Webページの構成は下記のように表すこともできます。

Webページ＝HTML（文章構造）＋CSS（見栄え）

デザイン性が上がる

CSSを使うことで、文字や背景の色を変えたり、カラフルなマーカーを引いたり、余白の調整などを行うことができます。

HTMLコードがシンプルになる

デザインに関するデータをHTMLで書く必要がなくなるため、シンプルにすることができます。HTMLはWebページの構造・CSSは装飾と役割分担をすることによって、

といったメリットも生まれます。

CSSでは、次の3つの要素を使ってWebページの見栄えを整えていきます。

この3つの要素はCSSの基本となるので必ず覚えておきましょう。

下記の表は、CSSを書く上でよく使われるプロパティをまとめたものです。