2024.06.12
【初心者向け】HTMLとCSSの違いとは？基礎知識から使い方までわかりやすく解説
Web制作を始める際にまず知っておきたいのが、HTMLとCSSの基礎です。これらは、ウェブサイトの構造とスタイルを定義するための基本的な言語であり、それぞれの役割と使い方を理解することで、初めてのWeb制作がスムーズに進みます。
本記事では、HTMLとCSSの違いから、具体的な使い方や代表的なタグ・プロパティについて詳しく解説します。また、HTMLとCSSを使用して実際にWebサイトを制作するプロセスや、最新のWeb標準に対応する方法についても紹介します。
この記事でわかること
- HTMLとCSSの役割と違い
- HTML/CSSの作成
- HTML/CSSを用いたWebサイトの制作プロセス
- 最新のWeb標準
- HTML/CSS活用時のよくある質問
初心者の方でも安心して学べる内容となっておりますので、ぜひ最後までご覧ください。
目次
HTMLとCSSの役割と違い
HTMLとCSSは、ウェブページを作成するための基本的な言語です。HTMLはウェブページの構造を定義し、コンテンツの配置や順序を決定します。一方、CSSはHTMLで定義されたコンテンツの見た目やレイアウトを制御し、デザインやスタイルを設定します。それぞれの役割と違いを詳しく見ていきましょう。
HTML
HTML（HyperText Markup Language）は、ウェブページの構造を定義するための言語です。以降では、HTMLの役割と代表的なタグについて紹介します。
役割
HTMLは、文書の見出し、段落、リスト、リンク、画像など、コンテンツを意味的にマークアップします。これにより、ブラウザがコンテンツを正しく表示できるようになります。HTMLはウェブページの骨組みを作成する役割を担っており、コンテンツの配置や順序を決定します。
代表的なタグ
HTMLでは、さまざまなタグを使用してコンテンツをマークアップします。以下に代表的なタグをいくつか紹介します。
| タグ | 詳細 |
|---|---|
| <html> | HTML文書のルート要素です。 |
| <head> | メタデータを含む要素で、タイトルやスタイルシートのリンクが含まれます。 |
| <title> | ブラウザのタイトルバーやタブに表示される文書のタイトルを定義します。 |
| <body> | 文書の本体部分を定義し、実際のコンテンツが含まれます。 |
| <h1>～<h6> | 見出しを定義するタグで、数字が小さいほど重要な見出しとなります。 |
| <p> | 段落を定義します。 |
| <a> | ハイパーリンクを作成するためのタグです。 |
| <img> | 画像を埋め込むためのタグです。 |
| <ul> | 順序なしリストを定義します。 |
| <li> | リストアイテムを定義します |
これらのタグを理解し活用することで、HTMLを使って構造的で意味のあるウェブページを作成できます。タグを適切に使用することは、ウェブ制作の基本となる重要なスキルです。
CSS
CSS（Cascading Style Sheets）は、HTMLで定義されたウェブページの見た目やレイアウトを制御するための言語です。CSSを用いてHTMLで定義されたコンテンツのスタイルをどのように制御するかを見ていきましょう。
役割
CSSを使用することで、フォントのスタイル、色、間隔、配置など、ビジュアルデザインを簡単に変更できます。CSSはHTMLと分離して記述されるため、ウェブページのコンテンツとデザインを分けて管理できる点が特徴です。
代表的なプロパティ
CSSでは、多数のプロパティを使用して要素のスタイルを定義します。以下に代表的なプロパティをいくつか紹介します。
| プロパティ | 詳細 |
|---|---|
| color | テキストの色を指定します。 |
| font-size | テキストのサイズを指定します。 |
| font-family | テキストのフォントファミリーを指定します。 |
| background-color | 要素の背景色を指定します。 |
| margin | 要素の外側の余白を指定します。 |
| padding | 要素の内側の余白を指定します。 |
| border | 要素の境界線を指定します。 |
| width | 要素の幅を指定します。 |
| height | 要素の高さを指定します。 |
| display | 要素の表示方法（ブロック、インラインなど）を指定します。 |
| position | 要素の配置方法を指定します（相対配置、絶対配置など）。 |
HTMLとCSSは、ウェブページの構造とスタイルを分担して管理することで、効率的かつ柔軟なWebデザインを可能にします。次に、実際にHTMLとCSSを使ってコンテンツを作成する方法を見ていきましょう。
HTMLの作成
HTMLを使ってウェブページを作成する際には、基本的なタグとその使い方を理解することが重要です。HTML文書は、基本的に以下のような構造を持っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのタイトル</title>
</head>
<body>
<!-- コンテンツをここに記述 -->
</body>
</html>
この構造を理解することで、ウェブページの作成がスムーズになります。以下の手順でHTML文書を作成してみましょう。
- DOCTYPE宣言
- タグの作成
- タグの作成
- タグの作成
- 見出しの作成
- 段落の作成
- リストの作成
- 画像とリンクの追加
DOCTYPE宣言
<!DOCTYPE html> は、HTML5文書であることをブラウザに伝えるための宣言です。これにより、ブラウザはHTML5の標準に従って文書を表示します。
<html>タグの作成
<html> タグは、HTML文書のルート要素です。このタグの中に全てのHTMLコードが含まれます。lang=”ja”属性を追加することで、文書の言語が日本語であることを指定できます。
<head>タグの作成
<head>タグの中には、文書のメタデータが含まれます。メタデータには、文字エンコーディングを指定する<meta charset=”UTF-8″>や、ビューポートの設定を行う<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″>、文書のタイトルを指定する<title>タグなどが含まれます。
<body>タグの作成
<body>タグの中には、ウェブページのコンテンツが含まれます。見出し、段落、画像、リンクなど、ユーザーが実際に閲覧する要素がここに記述されます。
見出しの作成
見出しは、ウェブページの構造を理解しやすくするために使用されます。HTMLでは、<h1>から<h6>までのタグを使用して見出しを作成します。<h1>は最も重要な見出しで、<h6>は最も低い重要度の見出しです。
<h1>これは見出し1です</h1> <h2>これは見出し2です</h2>
段落の作成
段落は、テキストをグループ化するために使用されます。HTMLでは、<p>タグを使用して段落を作成します。
<p>これは段落です。この中にテキストを記述します。</p>
リストの作成
リストは、項目を整理するために使用されます。HTMLでは、順序なしリスト（<ul>）と順序ありリスト（<ol>）があります。リストアイテムは<li>タグで囲まれます。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>最初の項目</li>
<li>次の項目</li>
<li>最後の項目</li>
</ol>
画像とリンクの追加
画像を表示するには<img>タグを使用し、リンクを作成するには<a>タグを使用します。
<img src="path/to/image.jpg" alt="画像の説明"> <a href="https://example.com">これはリンクです</a>
これらの基本的なタグを組み合わせて、HTML文書を作成します。HTMLを使いこなすことで、ウェブページの基礎構造を効率的に作成できるようになります。次に、CSSを使ってHTMLで定義したコンテンツのスタイルをどのように制御するかを見ていきましょう。
CSSの作成
CSSを使用することで、HTMLで定義されたウェブページの見た目やレイアウトをカスタマイズできます。CSSの記述方法には、インラインスタイル、内部スタイルシート、外部スタイルシートの3つの方法があります。それぞれの方法について詳しく見ていきましょう。
インラインスタイル
インラインスタイルは、HTMLタグ内に直接スタイルを記述する方法です。要素ごとにスタイルを適用するため、特定の要素に対して細かくスタイルを指定したい場合に便利です。ただし、多くの要素にスタイルを適用する場合は、コードが煩雑になるため、あまり推奨されません。
インラインは、以下のようにコーディングを行います。
<p style="color: blue; font-size: 16px;">この段落は青色で表示されます。</p>
内部スタイルシート
内部スタイルシートは、HTML文書の <head>タグ内にスタイルを記述する方法です。<style>タグを使用してスタイルを定義し、同じHTMLファイル内で複数の要素にスタイルを適用できます。この方法は、単一のHTML文書に対してスタイルを適用する場合に適しています。
内部スタイルシートを使用する場合は、以下のようにコーディングを行います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部スタイルシートの例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}
p {
color: black;
font-size: 14px;
}
</style>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。内部スタイルシートを使用しています。</p>
</body>
</html>
外部スタイルシート
外部スタイルシートは、別のCSSファイルにスタイルを記述し、HTML文書にリンクする方法です。これにより、複数のHTML文書で同じスタイルを共有できるため、ウェブサイト全体のスタイルを一元管理することができます。外部スタイルシートは最も推奨される方法です。
まず、CSSファイル（例：styles.css）を作成します。
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}
p {
color: black;
font-size: 14px;
}
次に、HTML文書のタグ内に タグを使用してCSSファイルをリンクします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部スタイルシートの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。外部スタイルシートを使用しています。</p>
</body>
</html>
これらの方法を使い分けることで、HTML要素に適切なスタイルを適用し、魅力的なウェブページを作成できます。
HTML/CSSでWebサイトを制作する6つのプロセス
HTMLとCSSを使用してWebサイトを制作する際には、以下の6つのプロセスを順に進めていくことが基本です。それぞれのプロセスを詳しく見ていきましょう。
1. 制作するサイトのデザイン・レイアウトの検討
まず最初に、制作するサイトのデザインとレイアウトを検討します。この段階では、サイトの目的やターゲットユーザーを考慮しながら、どのような構成にするか、どのような見た目にするかを決定します。
ワイヤーフレームやモックアップを作成して、視覚的にサイトのレイアウトを確認するのも有効です。これにより、後の工程でスムーズに作業を進めることができます。
2. ファイルの格納フォルダを作成
次に、制作するWebサイトのファイルを整理するためのフォルダを作成します。一般的には、以下のような構成にします。
- index.html（トップページのHTMLファイル）
- cssフォルダ（CSSファイルを格納）
- styles.css（メインのCSSファイル）
- imagesフォルダ（画像ファイルを格納）
- jsフォルダ（JavaScriptファイルを格納する場合）
このようにフォルダを整理することで、ファイルの管理がしやすくなります。
HTMLを記述
フォルダ作成後、HTMLを記述していきます。先ほど作成したindex.htmlファイルに、サイトの基本構造を記述します。見出し、段落、画像、リンクなどの要素を適切に配置し、文書の意味構造を正しくマークアップします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルサイト</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>サンプルサイトへようこそ</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
About
<p>このサイトはサンプルです。</p>
</section>
<section id="services">
Services
<p>私たちのサービス内容をご紹介します。</p>
</section>
<section id="contact">
Contact
<p>お問い合わせはここからどうぞ。</p>
</section>
</main>
<footer>
<p>© 2024 サンプルサイト</p>
</footer>
</body>
</html>
CSSを記載
HTMLの記述が終わったら、次にCSSを記載していきます。作成したstyles.cssファイルに、各HTML要素のスタイルを定義します。フォントサイズ、色、間隔などを設定し、サイト全体のデザインを統一します。
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 1em;
}
section {
margin-bottom: 1em;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
bottom: 0;
}
今回は、外部スタイルシートを使用してCSSを記述しています。外部スタイルシートは、CSSを別ファイルに分離して管理する方法で、複数のHTMLファイルに対して一貫したスタイルを適用できるため、最も推奨される方法です。
レスポンシブの対応
現代のWebサイトは、さまざまなデバイス（PC、スマートフォン、タブレットなど）で表示されるため、レスポンシブデザインに対応することが重要です。CSSのメディアクエリを使用して、画面サイズに応じてスタイルを変更します。
/* メディアクエリの例 */
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 0;
padding: 0.5em 0;
}
}
検証
最後に、制作したWebサイトを検証します。ブラウザで実際に表示し、デザインや機能が期待通りに動作するかを確認します。異なるブラウザやデバイスで表示を確認し、必要に応じて修正を加えます。また、W3Cのバリデーターを使用してHTMLとCSSの文法が正しいかをチェックすることも重要です。
これらのプロセスを順に進めることで、効率的かつ効果的にWebサイトを制作することができます。
最新のWeb標準とHTML/CSS
Web技術は日々進化しており、最新のWeb標準を活用することで、より高度で効果的なWebサイトを作成できます。ここでは、HTML5とCSS3の最新機能と利点、Web標準の更新とブラウザの対応状況、そして古いHTML/CSSバージョンからの移行について詳しく見ていきましょう。
HTML5とCSS3の最新機能と利点
HTML5は、HTMLの最新バージョンであり、さまざまな新機能が追加されています。これにより、より柔軟で強力なWebサイトを作成できます。以下に主な新機能を紹介します。
CSS3は、CSSの最新バージョンであり、多くの新しいスタイル機能が追加されています。これにより、より洗練されたデザインを実現できます。以下に主な新機能を紹介します。
| HTML5の新機能 | 詳細 |
|---|---|
| セマンティックタグ | <header>、<footer>、<article>、<section>などのセマンティックタグが追加され、文書の構造が明確になります。これにより、検索エンジンや支援技術（スクリーンリーダーなど）がコンテンツをよりよく理解できるようになります。 </article> </footer> </header> |
| マルチメディアサポート | <audio>や<video>タグを使用して、プラグインなしで音声や動画を埋め込むことができます。 |
| フォームの拡張 | 新しい入力タイプ（<input type=”email” />, <input type=”date” />など）や属性が追加され、フォームのバリデーションやユーザーインタラクションが強化されました。 |
| ローカルストレージ | localStorageとsessionStorageを使用して、ユーザーのブラウザにデータを保存することができ、クッキーよりも大容量のデータを扱えます。 |
| CSS3の新機能 | 詳細 |
|---|---|
| グラデーション | linear-gradient、radial-gradientを使用して、背景にグラデーションを適用できます。 |
| アニメーションとトランジション | @keyframesルールを使用して、複雑なアニメーションを作成できます。また、transitionプロパティを使用して、要素の状態変化を滑らかに表現できます。 |
| レキシブルボックスレイアウト（Flexbox） | display:flexを使用して、要素の配置や整列を柔軟に制御できます。 |
| グリッドレイアウト | display:gridを使用して、複雑なレイアウトを簡単に作成できます。 |
| メディアクエリ | レスポンシブデザインを実現するために、@mediaルールを使用して、画面サイズに応じたスタイルを適用できます。 |
Web標準の更新とブラウザの対応状況
Web標準は、World Wide Web Consortium（W3C）などの標準化団体によって定期的に更新されます。新しい標準が策定されると、ブラウザ開発者はその標準に対応するためにブラウザを更新します。
Google Chrome、Mozilla Firefox、Safari、Microsoft Edgeなどの主要ブラウザは、ほとんどの新しいWeb標準に対応しています。これにより、最新のHTML5やCSS3の機能を安心して使用できます。
また、Webサイトを開発する際には、さまざまなブラウザで動作を確認し、互換性を確保することが重要です。Can I Useなどのツールを使用して、特定の機能が各ブラウザでサポートされているか確認することができます。
古いブラウザで最新の機能を使用するために、ポリフィル（Polyfill）を導入することがあります。ポリフィルは、特定の機能がサポートされていないブラウザに対して、その機能をエミュレートするスクリプトです。
古いHTML/CSSバージョンからの移行検討
Web技術は進化しており、古いHTMLやCSSバージョンから最新バージョンへの移行を検討することが推奨されます。これにより、サイトの保守性やユーザー体験が向上します。
| バージョン移行 | 詳細 |
|---|---|
| HTML4からHTML5への移行 | HTML5では、セマンティックタグや新しいフォーム要素など、さまざまな機能が追加されています。移行することで、SEOやアクセシビリティが向上します。 |
| CSS2からCSS3への移行 | CSS3では、グラデーションやアニメーション、レスポンシブデザインなどの新しい機能が追加されています。移行することで、よりモダンで視覚的に魅力的なサイトを作成できます。 |
移行を計画する際には、既存のコードを整理し、段階的に新しい機能を導入することが重要です。また、ブラウザの互換性を確認し、必要に応じてポリフィルを使用することも検討します。
これらの最新機能と利点を活用することで、より高機能でユーザーフレンドリーなWebサイトを作成することができます。
HTML/CSS活用時のよくある質問
HTMLとCSSを活用する際に、初心者が直面しやすい質問や問題をまとめました。よくある質問を知り、Web制作を進めるためのヒントにしましょう。
Q1. CSSが適用されない原因がわかりません
CSSが適用されない場合、以下の4点が主な原因として挙げられます。
1．CSSファイルのパスが間違っている
外部スタイルシートを使用している場合、HTMLファイルとCSSファイルのリンクが正しいか確認します。例えば、HTMLファイルがルートディレクトリにあり、CSSファイルがcssフォルダ内にある場合、リンクは以下のようになります。
<link rel="stylesheet" href="css/styles.css">
2．CSSの文法エラー
CSSの文法に誤りがあると、スタイルが適用されないことがあります。CSSファイルを再確認し、誤字やセミコロンの不足などがないかチェックします。
3．CSSの優先度
より高い優先度を持つスタイルが適用されている可能性があります。インラインスタイルや!importantを使用している場合、それが他のスタイルよりも優先されます。
/* 高い優先度の例 */
p {
color: red !important;
}
4．キャッシュの問題
ブラウザのキャッシュが原因で、最新のCSSが反映されないことがあります。ブラウザのキャッシュをクリアするか、強制リロード（Ctrl+F5）を試してみてください。
Q2. CSSを適用する3つの方法の違いがわかりません
CSSを適用する方法には、インラインスタイル、内部スタイルシート、外部スタイルシートの3つがあります。それぞれの違いと用途について説明します。
1．インラインスタイル
HTMLタグ内に直接スタイルを記述する方法です。特定の要素に対して個別にスタイルを適用したい場合に使用しますが、コードが冗長になりやすいため、あまり推奨されません。
<p style="color: blue; font-size: 16px;">この段落は青色で表示されます。</p>
2. 内部スタイルシート
HTMLファイルの
タグ内にスタイルを記述する方法です。単一のHTML文書に対してスタイルを適用する場合に適しています。
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}
p {
color: black;
font-size: 14px;
}
</style>
3．外部スタイルシート
別のCSSファイルにスタイルを記述し、HTMLファイルにリンクする方法です。複数のHTMLファイルで同じスタイルを適用できるため、効率的であり、最も推奨される方法です。
[HTML]
<link rel="stylesheet" href="css/styles.css">
[CSS]
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}
p {
color: black;
font-size: 14px;
}
Q3. HTML/CSSのタグやプロパティはどれくらい覚える必要があるの？
HTMLやCSSのすべてのタグやプロパティを覚える必要はありませんが、基本的なものを理解しておくと、スムーズにWebサイトを作成できます。以下に、特に重要なタグやプロパティをいくつか紹介します。
HTMLの基本的なタグ
| タグ | 詳細 |
|---|---|
| <html> | HTML文書のルート要素です。 |
| <head> | メタデータを含む要素で、タイトルやスタイルシートのリンクが含まれます。 |
| <title> | ブラウザのタイトルバーやタブに表示される文書のタイトルを定義します。 |
| <body> | 文書の本体部分を定義し、実際のコンテンツが含まれます。 |
| <h1>～<h6> | 見出しを定義するタグで、数字が小さいほど重要な見出しとなります。 |
| <p> | 段落を定義します。 |
| <a> | ハイパーリンクを作成するためのタグです。 |
| <img> | 画像を埋め込むためのタグです。 |
| <ul>/<ol> | 順序なしリスト/順序ありリストを定義します。 |
| <li> | リストアイテムを定義します。 |
CSSの基本的なプロパティ
| プロパティ | 詳細 |
|---|---|
| color | テキストの色を指定します。 |
| font-size | テキストのサイズを指定します。 |
| font-family | テキストのフォントファミリーを指定します。 |
| background-color | 要素の背景色を指定します。 |
| margin | 要素の外側の余白を指定します。 |
| padding | 要素の内側の余白を指定します。 |
| border | 要素の境界線を指定します。 |
| width | 要素の幅を指定します。 |
| height | 要素の高さを指定します。 |
| display | 要素の表示方法（ブロック、インラインなど）を指定します。 |
| position | 要素の配置方法を指定します（相対配置、絶対配置など）。 |
基本的なタグやプロパティを覚えておけば、ほとんどのWeb制作に対応できます。必要に応じてリファレンスを参照し、徐々に新しいタグやプロパティを学んでいくと良いでしょう。
これらの質問を通じて、HTMLとCSSの基本的な使用方法やトラブルシューティングについて理解を深め、効率的にWeb制作を進めてください。
HTML/CSSを駆使してWeb制作に取り組んでみよう
HTMLとCSSの基本から始まり、それぞれの役割や使い方、Webサイト制作のプロセス、最新のWeb標準、そしてよくある質問への対処法まで詳しく解説しました。これらの知識を活用することで、初心者でも効果的にWebサイトを制作できるようになります。
また、HTMLを使ってWebページの構造を定義し、CSSでデザインやレイアウトをカスタマイズすることで、魅力的で機能的なWebサイトを作成できます。HTMLとCSSを駆使して、Webサイトの制作に取り組んでみましょう。
