皆様は、急に上司から「自社サイトのブログ更新をまかせたい」「読みやすいブログ記事をつくってもらえないか」と言われてしまった…そんな経験はありませんか？

今回は、Webページの制作や更新をおこなう場合に知っておきたいキーワードである「HTML」や「CSS」の言葉の意味や違いについて解説していきます。

この記事を読めば、HTML・CSSそれぞれの役割や必要性がわかるようになります。この基礎知識を知っておくことで、Webページの制作や更新の全体像を理解しやすくなるので、ぜひ参考にしてください

目次

---

1. HTMLとは

1.1.言葉の意味
1.2.HTMLでできること
1.3.HTMLを利用するメリットとデメリット

2. HTMLの基本用語

2.1.タグ
2.2.要素
2.3.属性

3. HTMLのバージョンについて
4. CSSとは

4.1.言葉の意味
4.2.CSSでできること
4.3.CSSの必要性と活用するメリット

5. CSSのバージョンについて
6. HTMLとCSSの違い
7. まとめ

1.1. 言葉の意味

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略で、Webページを制作するためのマークアップ言語の1つです。

「マークアップ言語？！何それ…いきなり難しい…」と感じた方、簡単にかみ砕いてご説しますのでご安心ください。マークアップとは、HTMLタグを使ってテキスト情報を定義づけ・意味づけして整理することを言います。

HTMLタグについては、この後に続く「2.HTMLの基本用語」で詳しくご説明しますね。このマークアップによってコンピューターが人間の言語や文章構造を認識できるようになります。

私たちは普段、Webページ上のタイトルや段落を見て情報の内容を認識し、理解していますが、コンピューターはHTMLをはじめとするマークアップ言語によって、テキスト情報を認識しています。

つまり、人間の言語とコンピューターの仲介役のような役割を担っているのがHTMLなのです。また、HTMLを活用することよって検索エンジンがWebサイトの構造を把握しやすくなるといった効果もあります。

1.2. HTMLでできること

「HTMLの言葉の意味はなんとなくわかったけど…具体的に何ができるの？」そんな風に思ったのではないでしょうか？ここからは、HTMLで何ができるのか、説明していきますね。具体的にできることは以下の3つになります。

■静的なWebページの作成

HTMLでは、動きのない静的なWebページを制作することが可能です。

たとえば、ログインなどが必要なく、誰でも閲覧可能なブログページなどは、HTMLだけでも作成可能です。一方で、時間帯や曜日によって表示内容が変わるようなWebページを作る場合は、HTMLだけでは作成できません。

■HTMLメールの作成

文字だけのメール文ではなく、画像を配置したり、文字を強調したりして読みやすくしたメールを作成する場合に、HTMLが使用されます。

たとえば、ご自身が会員登録しているサイトから画像付きの見やすいメールが送られてきたことはないでしょうか？

こういったメールは一般的にHTMLメールと呼ばれ、メールマガジや企業からのメールなどで多く使用される傾向があります。

■Webアプリケーションの作成

HTMLを活用し、Webアプリケーション上でユーザーの目に触れる見た目の部分、いわゆるUI（User Interface）部分だけを作るといった使い方や、Webブラウザ上で動作するWebアプリケーションの基礎部分にHTMLを使う、といった使い方をすることがあります。

1.3. HTMLを利用するメリットとデメリット

HTMLでできることがわかったところで、HTMLを利用するメリットとデメリットについても見ていきましょう。

このように、HTMLはシンプルですぐに利用できるという良い点がある一方、単独で使用する場合にはできることが限られていたり、Webページ制作における継続的な更新・管理・運用面において課題があったりすることがわかります。

HTMLのメリット・デメリットが分かったところで、もう少し詳しくHTMLについて見ていきましょう。HTMLを活用する場合におさえておきたい基本用語は3つあります。

この3つの用語の違いをおさえると、HTMLの仕組みを理解しやすくなります。ここではまず用語の意味から説明していきますので、順番に見ていきましょう。

2.1. タグ

タグとは、テキスト情報に「意味を与える印」の役割をしており、表示形式と範囲を指定することができます。具体的には「＜」「＞」でくくった部分がその範囲となります。

タグは、コンピューターに人間の言葉・文章構造を理解させるために必要不可欠なものになります。

たとえば「これは見出しですよ」とコンピューターに伝えたい場合は「＜h1＞見出し＜/h1＞」と記述することで、コンピューター側でも「このテキスト情報は見出しだ」と認識してくれます。

ここではタグのイメージをしやすいように、よく使用される具体的なタグをいくつかピックアップしますね。

• ■htmlタグ

  HTML文書全体を定義するタグです。「これはHTMLを活用した文章ですよ」と最初に宣言するイメージで使用します。

  ---

• ■headタグ

  このタグの中には、検索エンジンやブラウザに情報を伝えるメタ情報やページのタイトル、レイアウトのためのCSS（スタイルシート）情報を含みます。headタグの中の内容はブラウザ上に表示されない裏側の情報になります。※一部、titleタグで囲まれたページタイトル情報はブラウザ上に表示されます。

  ---

• ■bodyタグ

  Webページ上に表示したいコンテンツの内容（テキスト、画像、リンクなど）を指定するタグです。

  ---

• ■hタグ

  見出しを定義するタグです。「h」はheading（見出し）の略となります。段階がh1～h6まであり、h1が最も大きい見出し、h6が最も小さい見出しになります。

  ---

• ■pタグ

  段落を定義するタグです。「p」はparagraph（段落）の略となります。pで囲った部分は、1つの段落として認識されます。

  ---

• ■aタグ

  指定した部分の要素をハイパーリンクとして扱うことができるタグです。「a」はanchor（アンカー）の略となります。ハイパーリンクと聞くと難しく聞こえるかもしれませんが、よくWebページ上で見かける「クリックすると別ページに遷移するテキスト」をイメージしていただければ大丈夫です。テキストだけでなく、画像にも設定することが可能です。

2.2. 要素

要素とは、上述したタグの開始タグから終了タグまでの固まりを示します。

たとえば、＜html＞～＜/html＞で囲まれたhtml要素の中に＜body＞～＜/body＞のbody要素があり、さらにその中に＜h1＞～＜/h1＞の見出し要素があるようなイメージで、文章全体のタグごとの固まりのことを示す用語になります。

2.3. 属性

属性には、上述した要素に対し、さらに個別の情報や設定を付加する役割があります。

要素とは開始タグと終了タグの固まりのことを指しますが、その固まりに対して名前を付けたり、飾りを付けたりするイメージです。こうすることで、おなじタグが付いた要素同士を区別したり、要素をグループ化してコントロールしたりすることができるようになります。

名前を付けることで、管理がしやすくなる、というイメージを持ってもらうとわかりやすいと思います。

管理のしやすさ以外にも、Webページ上で高度な操作や複雑な動きをさせたいときにHTML以外の言語を使ったコーディングをおこなう場合にも役立ちます。

属性にはどのHTML要素に対しても利用できるグローバル属性と呼ばれるものがあります。ここでは、グローバル属性のなかでも特に使用頻度が高い2つをご紹介しますね。

---

• ■class

  要素にクラス名を定義することができる属性です。クラス名をつけて要素をグループ化することで、のちほど説明するCSSを使ってページレイアウトをおこなう際に役に立ちます。

  ---

• ■id

  要素にid名を定義することができる属性です。上述したclassは1ページ内に複数存在するのに対し、idは1ページにひとつだけ存在するユニークな要素を定義する際に使います。

HTMLには複数の「バージョン」があります。「HTMLのバージョンって何？」と思われた方、大丈夫です。ここで簡単に解説しますね。

HTMLはこれまでにアップデートを繰り返しており、2021年にはHTML5が廃止され、HTML Living Standardがリリースされています。廃止…ときくと「もうHTML5は使えないの？」と感じるかもしれませんが、ご安心ください。

HTML Living Standardも元々は同じHTML5なので、新しいバージョンがリリースされたからといって、HTML5で制作したWebページが閲覧できなくなることはありません。

HTML Living Standardでは使用できる要素や属性が増えたり、あまり必要性を感じられない要素や属性を廃止したり…といった改修がおこなわれています。

ここではまず、HTMLの最新のバージョンが「HTML Living Standard」であるという点をおさえていただければ大丈夫です。

HTMLの基礎知識が分かったところで、次はCSSについて見ていきましょう。

4.1. 言葉の意味

CSSとは「カスケーディングスタイルシート（Cascading Style Sheet）」の略でWebページの文字サイズ・色・デザイン・レイアウトといったいわゆる「見た目」を指定するためのスタイルシート言語です。「シーエスエス」や「スタイルシート」と呼ばれています。

4.2. CSSでできること

上述したとおり、CSSはHTMLで作ったWebページに対して装飾をおこなうことができます。

注意点は、CSSはあくまでもHTMLを装飾するためのスタイルシート言語であるため、単体での使用はできないことです。

4.3. CSSの必要性と活用するメリット

実は、フォントの色やサイズを変えるような装飾はHTMLでも可能です。では「どうしてCSSが必要なの？」「HTMLだけではだめなの？」と感じる方もいらっしゃるかもしれません。この疑問について、少しご説明しますね。

最初にお伝えしたとおり、HTMLはWebページの情報を定義づけ（意味づけ）することが役割となっています。そのため、装飾をすることは本来の使い方ではありません。

本来の使い方ではない使い方をした場合、文章の情報構造が乱れてしまい、検索エンジンに上手く情報を理解してもらえない危険性があります。

また、HTMLだけでWebページの装飾部分までカバーしようとすると、ソースコードが膨大になり、情報の読み込み速度が低下してしまいます。一方、CSSを活用してWebページを装飾した場合の具体的なメリットには以下が挙げられます。

CSSには、CSS1、CSS2、CSS3という3つのバージョンがあります。

現在は最新版のCSS3が主流となっています。上述した「CSSのメリット」の中に記載している簡単なアニメーションの作成は、この「CSS3」で可能となっています。ここでは、CSSのバージョンは「CSS3」が主流であることを覚えていただければ大丈夫です。

ここまでご説明してきたとおり、HTMLとCSSはセットで耳にすることが多い言葉ですが、それぞれに違った役割があります。

HTMLの役割は、Webページ内のテキスト情報を定義づけて構造化する、いわば「Webページの大枠・全体像」を作ることです。その一方で、CSSは、HTMLで作った大枠に対して「ページの見た目」を指定する役割を担っています。

また、HTMLは単体で使用して簡単なWebページを作ることが可能ではあるものの、できることが限られており、HTMLで装飾までカバーしようとすると、ソースコードが重くなり検索エンジンの読み込み速度が低下する要因となってしまいます。

つまり、整ったデザイン、かつ、スムーズな情報の読み込みが可能なWebページを制作する場合、HTMLとCSS両方の活用が必要となります。

いかがでしたか？今回は、Webページの制作や更新に関わる場合に1度は耳にする「HTML」「CSS」について、それぞれの言葉の意味や、役割、必要性について解説しました。

「Webページの大枠・全体像」を作成するHTMLと、HTMLで作成したWebページを装飾するCSS。それぞれの役割に応じて両者を有効的に使用していくことで、魅力的なWebページを作成することができます。

次回はHTMLで使用するタグや記述の詳しい解説や、具体的な使い方について解説したいと思います。お楽しみに！

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから