HTMLとCSSの違いとは?特徴と作成法方など基礎知識をすべて解説！

HTMLとCSSは、Webページを構成する際に使用される言語です。HTMLでWebページの骨組みを作り、CSSでデザインを整えていくことで、Webサイトが作成できます。

見栄えのいいWebページを作るために、それぞれの基礎知識や違いを理解しておきましょう。 HTMLとCSSの基本知識とそれぞれの違い、書き方、HTMLとCSSを使ったWebページを作成する基本の流れなどをご紹介します。

HTML・CSSとはWebページを構成する言語

HTMLとCSSは、Webページを構築する言語で、Webページ作成の基本となるものです。この2つはは同じ場面で使われることが多いですが、役割には明確な違いがあります。

HTMLはWebページの内容を作る骨組みになる言語です。 文字列はテキストだけでなく、「見出し」や、「太文字」や「文字の色」を変更・強調することができます。

一方、CSSはHTMLの表示レイアウトを装飾するための言語です。装飾や画面のレイアウトを整えて見栄えの良いWebページにするにはCSSが必要です。

HTMLとCSSの知識を理解して、書き方を身につけることで、幅広いWebページを作ることができます。CMSなどを使ったり、分業化でこの言語に触れない方も多いと思います。しかし、ホームページの運用をするのであれば、HTMLとCSSの基礎知識を理解しておけば、社内のコミュニケーションがスムーズになるなど損はありません。

HTML・CSSのそれぞれの基礎知識と違いとは？

HTMLとは「Webページの骨組み」になる言語

HTMLは、「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略語で、Webページの骨組みになる言語です。マークアップ言語とも呼ばれ、見出しや段落、リンク、表などがWebページのどこに何が表示されるかを指定します。つまりWebページに表示されているテキストがHTMLだと考えて良いでしょう。

HTMLは、Webページの通常のテキスト以外にも、見出しの設定や、色や太さでの強調、下線などの装飾の指定もできます。HTMLは、<div>や<title>などのを使って文字列（要素）を囲むだけでできるので初心者にも分かりやすい言語です。

またHTMLは、ホームページだけでなくメールにも使えるのが特徴です。メール内にHTMLを使うことで、文字サイズや色を変えたり、画像を挿入したりすることができます。メルマガなどに活用することで、ビジュアルで訴求できたり、ユーザーが見やすくなったり、効果測定が可能となるでしょうす。とくにメルマガでは、メールの開封率やクリック率などの測定が、今後の配信メールの改善に役立ちます。

HTMLの最新バーション「HTML Living Standard」

HTMLは、1989年にCERN（スイスの欧州原子核研究機構）によって開発され、1990年にコード化されました。1993年にバージョン1.0として正式に勧告され、現在もバージョンアップされながら使われ続けています。

HTMLには複数のバージョンがありますが、使える要素や記述のルールなどが異なります。HTMLファイルとして主に使われている種類は、以下のとおりです。

【主に使われているHTMLファイル】

• HTML 4.01：1999年に発表されたバージョンで、文章構造のみを記すもの
• XHTML 1.0：2000年に発表されたバージョンで、タグを小文字で記述するなどルールが厳格になった
•  HTML5：2014年に発表されたバージョンで、動画や音声の掲載や、フォーム入力・送信の簡略化などWebアプリを作成するための仕様が新たに追加される
• HTML Living Standard： 2021年に発表されたバージョンで最新版で、HTML5で適用されていたタグのルールが一部変更し、よりタグの役割が細分化される

なお、2022年現在の最新版は、HTML Living Standardと呼ばれるバージョンです。

HTMLの書き方

HTMLは、テキストエディタにタグを使用して書くことで作成できます。HTMLは、文字の装飾やボックス、画像の挿入などの指定ができます。開きタグ（<>）と閉じタグ（）で囲み、タグで囲んだものがひとつの要素です。複数の要素を組み合わせることで、ひとつのWebページを作成することができます。

基本的にHTMLは、以下の5つのタグで構成されています。

bodyタグの中で使うタグには、以下のようなものがあります。

【bodyタグの中で使うタグの一例】

• <h>見出し</h> （※<h1><h2><h3><h4>と見出しによって、数字が付く）
• <p>段落</p>
• <ul>リスト</ul>
• <table>表<table>
• <strong>強調</strong>
• <a>リンク</a>
• <img src="画像の場所"> （※閉じタグ不要）

タグは一部を除いて閉じタグが必要になるので、「/」を付け忘れないように注意しましょう。閉じタグを忘れると、適切に表示されなかったり、変な挙動を起こしたりしてしまいます。 HTMLを書き終わったら、Ctrl+Sで保存してブラウザで確認します。初めのうちは、ひたすらHTMLを書いては、表示して確認することを繰り返すことが上達の一番の近道です。

CSSとは「WebページのHTMLを装飾し、見栄えをよくする」言語

CSSは、「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、スタイルシートとも呼ばれます。HTMLで作成したWebページのデザインを設定する言語です。

CSSだけではWebページを作ることはできず、HTMLと組み合わせて使います。HTMLはWebページの骨組みを作るものに対して、CSSは指定したタグにどのようにどのくらいのデザインを施すのかを指定します。 CSSの基本的なかたちは、以下のとおりです。

【CSSの基本形】
セレクタ{ プロパティ : 値 }

【言葉の意味】

• セレクタ：HTMLタグと連動させて、どこのテキストや要素を調整するかを指定するもの
•  プロパティ：HTMLのテキストや要素に対して、フォントサイズや文字色、背景色など、何のデザインを施すかを指定するもの。
• 値：プロパティで指定した場所どのようにするのか、どれくらい反映させるかを指摘するもの。

CSS を活用することで、HTMLで指定した見出しや文章の色や大きさ、上下左右の余白などを細かく指定することが可能となります。さらにパソコンやスマートフォン、タブレットなど端末ごとの設定も変えることができます。

またHTMLだけでもWebページを作ることはできますが、HTMLとCSSを組み合わせることで、さまざまな変化が付けられるので、CSSはWebページのデザイン性を高める上で有効です。

CSSのバージョンは「CSS3」が最新

最初のCSSである「CSS1」の規格は1996年に勧告されましたが、サポートの不十分さなどが理由で、一般的に普及したのは2006年からでした。

1996年に最初の「CSS1」が勧告された後は、1998年に「CSS2」、2011年に「CSS2.1」と続いてています。 そして、2011年から施策が進められている「CSS3」が最新バージョンです。「CSS3」の一部分が勧告されていますが、新しいバージョンではなく、CSS2.1をベースに、新たな機能の追加や改良が行われています。

CSSはバージョンにかかわらず、書き方に変更はありません。「CSS3」で新しく追加されたプロパティは、「CSS3」を使う必要があります。しかし「CSS2.1」で使えるプロパティに関しては、書き換える必要がなくそのまま「CSS3」で使えます。

CSSの書き方

CSSの書き方は、複数の方法が存在します。たとえばCSSの書き方は、以下のとおりです。

• 外部ファイルを読み込む
• head内に記述する
• インラインで記述する

上記の方法のどれを選んでもCSSは書くことができますが、一般的なのは外部ファイルを読み込む方法です。HTMLファイルから、別で作ったCSSファイルを読み込むことで反映することができます。CSSファイルを読み込むためには、「絶対パス」や「相対パス」、「サイトルートパス」などいくつかの種類があります。

パスとは、HTMLファイルからCSSファイルまでにたどり着く道のりのことです。 Webページに画像やリンクを入れる場合は、基本的にHTMLファイルを基準に、目的のCSSファイルの道のりを表す相対パスが使われます。 続いてCSSの実際の書き方を見ていきましょう。たとえば、文字のサイズと色を変更したい場合は、以下のように書きます。

CSSでは文字のサイトや色以外にも、背景や背景色、フォントの種類・太さ、行や幅の指定・位置など、さまざまな指定をすることができます。

HTMLとCSSでWebページを作成する基本の流れ

HTMLとCSSを使ってWebページを作成する流れは、人によって変わります。ただし順番が変わるだけで、基本の流れは変わりません。

1. デザイン、レイアウトを考えて書き出す
2. ファイルやフォルダを作成する
3. HTMLを書く
4. CSSを書く
5. レスポンシブ対応をさせる （スマホとパソコンのデザインを違和感のないよう調節する）
6. 適応されているかチェックする

Webページを作成する前には、どのような仕上がりにするかデザインやレイアウトを考えます。デザインやレイアウトを紙に書き出すことで、全体のイメージが把握しやすくなり、完成までスムーズに進められるでしょう。

デザインやレイアウトが決まったら、次に必要なファイルやフォルダを作成します。Webページによって変わりますが、基本的にはHTMLフォルダやCSSフォルダ、imagesフォルダ、jsファイルなどが考えられます。imagesフォルダは画像、jsフォルダはJavaScriptのことです。

フォルダを用意したら、HTMLとCSSを書き、ブラウザに読み込んで確認します。Webページは、スマートフォンでも見る人も多いため、レスポンシブ対応は必須です。レスポンシブ対応では、HTMLに表示される大きさを指定するviewportを設定し、デバイスに合ったCSSを書くことで設定できます。パソコンやスマートフォンで適応されているかチェックをしたら完成です。

HTMLやCSSはSEOに影響する?

HTMLやCSSはSEOに直接的に影響しませんが、間接的に影響を及ぼす可能性があるので注意が必要です。たとえば、コーティングが必要以上に長いと、処理速度や表示速度が遅くなることがあります。

良質なコンテンツなのかどうかの判断要素のひとつに「表示速度」があるため、HTMLやCSSは最適化させて簡潔に書くことが大切です。 またHTMLでは、適切なタグやクラス名を使わなければいけません。バージョンによって、書き方が違う場合があるので、使用しているバージョンに合った書き方をしましょう。

HTML5やHTML Living Standardでは、HTMLでは文章だけにして、見栄えや装飾はCSSなどで設定するのが良いとされています。 Googleが理想とする書き方は、Googleのガイダンス「Google HTML/CSS Style Guide」に書かれています。詳しくは、Googleガイダンスを参考にしてください。

まとめ

HTMLとCSSはWebサイト制作の基盤となるもので、知識があると簡単なWebサイト制作や日々のWebマーケティング業務に活かすことができます。自社ホームページを自主的に制作される方は、HTMLとCSSの基本的な知識を積極的に習得しましょう。

SEデザインでは、LP制作などをはじめとしたコンテンツマーケティングの支援を行っております。貴社に最適な施策やプランをご提案させていただきますので、是非お気軽にお問い合わせください。