このような疑問、要望を持つあなたに向けた記事です。
HTMLとCSSはそれぞれ別物であり、明確な役割の違いがあります。この記事では、それぞれの役割や構文の違い、学習方法を解説します。
これからWeb制作をしてみたい、HTMLやCSSについて学習したい、と考えるあなた向けの記事ですので、ぜひご覧ください。
記事のもくじ
HTMLとCSSは役割に違いがある
HTMLとCSSの違いは、大きく「役割」と「構文」にあります。ここでは、それぞれの役割の違いについて見ていきましょう。
HTMLはWebページの根幹、骨組み
HTMLはHyperText Markup Languageの略称であり、Webページを表示するためのマークアップ言語です。
HTMLはWebページをどのように見せるのかの骨組み部分に該当します。
具体的には、次の要素を指定します。
- タイトル名
- Webページのレイアウト
- 見出し
- 画像の指定
- リンクの指定
など
Webページとして必要な基本要素をHTMLで記述することにより、私たちが普段見ているWebページのような形になるのです。
厳密には、CSSで見た目を調整するのですが、CSSについては次で解説します。
CSSはWebページの見た目を調整
CSSは、Cascading Style Sheetsの略称であり、Webページの見た目を調整するためのマークアップ言語です。
HTMLで作成した骨組みに肉付けするようなイメージでよいでしょう。
具体的には、次の要素を指定します。
- Webページのレイアウト
- 本文の文字色
- 見出しの文字色
- 背景色
- さまざまなメニューの作成
など
HTMLだけでもWebページのレイアウトや文字色・背景色を変更することは可能です。
しかし、HTMLで装飾部分を記述すると汎用性がなくなり、デザインの管理が煩雑となります。
その結果、メンテナンス性が損なわれてしまうのです。
CSSはHTMLで記述した要素に対して装飾を施すため、装飾部分をCSSにまとめることで非常に管理しやすくなります。
そのため、HTMLでWebページの骨組みを作り、CSSで装飾を施すという流れがWebページ制作の一般的な流れです。
HTMLとCSSは構文に違いがある
HTMLとCSSには役割に違いがありましたが、同じマークアップ言語でも構文は全く違います。
それぞれの構文の違いについて見ていきましょう。
HTMLはタグで囲むように記載する
HTMLはタグと呼ばれる要素で囲むことによって記述します。HTMLの使用例を見てみましょう。
<HTML> <HEAD> <TITLE>web page title name</TITLE> </HEAD> <BODY> 本文 <h2>見出し</h2> 見出し本文 <h3>小見出し</h3> 小見出し本文 </BODY> </HTML>
例にある「<TITLE>～</TITLE>」のようなものがタグです。
タグにはそれぞれ意味があり、「<TITLE>～</TITLE>」で囲まれた部分はページのタイトルを表す、などのように意味づけられています。
私たちが普段見ているWebページは、HTMLのタグで指定された意味をブラウザによって読み取り、表示した結果なのです。
CSSはプロパティと値を指定する
CSSはHTMLと違いタグを使用しません。 「プロパティと値」の指定により、HTMLタグに対して装飾を行います。
CSSの使用例を見てみましょう。
h2 {
color: #ff4081;
background-color: #a9a9a9;
}
a:hover {
color: #ff7043;
font-size: 12px;
}
HTMLタグのように「<>」で囲むことはせず、HTMLタグの要素に対して、色や文字サイズといった「プロパティ」を指定し、プロパティに対する「値」を入力します。
上記の例は、具体的には次の意味を持ちます。
- H2タグの文字色を#ff4081とし、背景色を#a9a9a9とする
- リンクにマウスオーバーした際の文字色を#ff7043とし、文字サイズを12pxとする
HTMLとCSSは、構文も全く異なることを覚えておきましょう。 補足ですが、「#xxxxxx」という表記は、16進数で表されたカラーコードであり、Webページでは一般的な色の指定方法です。
HTMLと違いCSSは分離できる
HTMLは1つのHTMLファイル内にすべてを記述しますが、CSSをHTMLに適用する方法は2つあります。
- HTMLファイル内に記述する
- CSSファイルとして分離する
CSSはHTMLに直接記述することもできますが、CSSファイルとして分離しておき、HTMLでCSSファイルを呼び出すことが一般的です。
HTMLとCSSを分離することで、メンテナンス性が向上し、デザイン変更時も修正箇所が少なくて済むからです。
HTMLのファイルは「.html」であり、CSSのファイルは「.css」となります。
HTMLでCSSファイルを呼び出す際には、「<link rel=”stylesheet” href=”CSSファイル名”>」で呼び出して使用します。
HTMLとCSSは役割も構文も異なるものであるため、それぞれ別ファイルとして利用するようにしましょう。
HTMLやCSSとも違うPHP、JavaScriptとの関係性は？
HTMLやCSSについて調べていると、PHPやJavaScriptなども登場することが多く、それぞれの違いがわからない、という方も多いのではないでしょうか。
HTMLやCSSについては先ほどお話したとおりですが、PHPとJavaScriptとの違いについても解説します。
PHPとJavaScriptは、HTMLやCSSと同じくWebページ制作においては頻繁に利用される言語です。
HTMLやCSSはマークアップ言語ですが、PHPとJavaScriptはスクリプト言語（プログラミング言語）となります。
それぞれの違いについて、簡単にまとめました。
| 言語 | 役割 | できること |
| HTML | Webページの骨組み | Webページの見た目を作る |
| CSS | Webページの装飾 | Webページの見た目を調整する |
| JavaScript | Webページに動きをつける | 検索機能や画像のスライドショーなど |
| PHP | Webページからのデータを処理する | ログイン機能やオンラインショッピング機能など |
それぞれを家で表すと、HTMLは家の骨組み・壁・屋根であり、CSSは家の外観や内装・家具といえるでしょう。
JavaScriptは家の中にエレベーターや自動ドアを、PHPは鍵付きの玄関や来客用のシステムを搭載するようなものと考えられます。
WebページはHTMLやCSSだけでも作ることができますが、JavaScriptやPHPを組み合わせることで、さらに高度なWebページが作成できるのです。
特にPHPはサーバーサイド言語と呼ばれ、サーバー側で動作するデータベースなどとの連携ができます。 PHPを利用することで、より幅広い機能をWebページに搭載すること可能です。
HTMLやCSSを書くための方法
HTMLやCSSは、OSに付属のテキストエディタでも書くことができます。
Windowsの「メモ帳」を使ってHTMLやCSSを書いてみましょう。
次の内容をコピー＆ペーストして、指定のファイル名として保存してください。
<html> <head> <title>Webページのタイトル</title> <link rel="stylesheet" href="main.css"> </head> <body> <h2>見出し</h2> 見出しの本文 <h3>小見出し</h3> <a href="https://www.yahoo.co.jp/">Yahoo!Japanを表示する</a> </body> </html>
h2 {
color: #ff4081;
background-color: #a9a9a9;
}
h3 {
color: #ff4500;
background-color: #b0c4de;
}
a:hover {
color: #ff7043;
font-size: 20px;
}
保存した「index.html」をダブルクリックすると、ブラウザでWebページが表示されます。 非常に簡潔な内容ですが、このようにHTMLやCSSは簡単に記述することが可能なのです。
それぞれの内容を実際に修正して、あなたなりにいろいろと試してみましょう。これらの内容をさらに高度化することによって、普段私たちが見ているWebページは作られています。
HTMLやCSSを勉強する方法
HTMLやCSSはテキストエディタさえあれば作成可能です。
しかし、それぞれには決められたタグやプロパティの使い方があり、高度なWebデザインを実現させるためには、勉強する必要があります。
HTMLやCSSを勉強するためには、書籍やオンライン講座を利用するとよいでしょう。初心者向けの書籍は多く出版されており、自分のペースで学習をすすめることができます。
オンライン講座の中には、無料で受講できるものも多く、時間や場所を選ばずに学習できる点がメリットです。オンライン講座としては、Progateやドットインストールをおすすめします。
しかし、これからのWeb制作においてはHTMLやCSSのスキルだけでは足りません。
JavaScriptやPHPもあわせて身につけるべきですが、JavaScriptやPHPは習得が難しく、独学では挫折してしまう人も少なくありません。
独学の場合は不明点の解決に時間がかかったり、モチベーションが維持できなかったりして挫折につながることが多いものです。
Web制作を仕事にしたいと考えているのであれば、スクールに通うことも一つの手です。
スクールでは、専門の講師によって体系的に学習をすすめることができ、同じ志を持つ仲間がいるため、挫折することなく目標とするスキルの習得が達成しやすいという特徴があります。
また、Web制作と一言でいっても、フロントエンド側とバックエンド側のどちらに携わりたいかによって、JavaScriptとPHPのどちらに重きをおくかも変わってきます。
Kredoでは、あなたのスキルや目的に合わせて選択できるように、複数のコースを用意しています。
Webベーシック・Webデザイン・Webデベロップなどのコースがあり、あなたの習得したいスキルとあわせて英語の習得まで可能です。
これからWebエンジニア、Webデザイナーとして活躍したいと考えている方は、一度ご確認いただいてはいかがでしょうか。
まとめ：HTMLとCSSは役割は違うが一緒に利用される
HTMLとCSSは、役割や構文に明確な違いがあります。
どちらもWebページを構成するためのマークアップ言語ですが、別物であることを覚えておいてください。
しかし、HTMLとCSSは一緒に利用することが一般的であり、どちらか片方だけの知識だけでは、あなたが理想とするWebページを作ることは難しいでしょう。
あわせて、JavaScriptやPHPについての知識やスキルを身につけることで、さまざまなWebページが作成できるようになります。
Webの世界は日進月歩であり、常に変化し続けていますが、Webページ作成の基礎として、まずはHTMLとCSSから学習してみてはいかがでしょうか。
「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。 あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか？ セブ島 IT×英語留学の「Kredo」では、 政府公認ITカリキュラム 大学教授レベルのフィリピン人IT教員 スピーキングに特化した英語クラス 日本人スタッフによる学習サポート などによって、 これからの時代に必要なIT×英語のスキルが 初心者からでも最短で身につきます。 KredoのIT留学で人生を変えてみませんか？
Kredo オンラインキャンプなら
プログラミング×英語を身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか？
