Webサイトを表示するための技術がHTMLとCSSです。「プログラミングは難しそう」と身構える方もいるかもしれませんが、HTMLとCSSはプログラミング言語ではなく、文書の構造と見た目を記述するための「マークアップ言語」と「スタイルシート言語」です。
HTMLは文書の構造を定義し、CSSはその構造に対して見た目の装飾を加えるという役割分担になっています。この2つを理解すれば、シンプルなWebページは自分で作れるようになります。
この記事では、HTMLとCSSの基礎をゼロから解説します。専門用語もかみ砕いて説明しているので、完全初心者の方でも安心して読み進められます。
HTMLとは：Webページの「骨格」を作る言語
HTMLの基本構造
HTMLは「HyperText Markup Language」の略で、Webページの構造を定義する言語です。見出し、段落、リスト、リンク、画像といった要素を「タグ」と呼ばれる記号で囲んで記述します。
HTMLの基本的な文書構造は以下のようになっています。
<!DOCTYPE html>：HTML5の文書であることを宣言する<html>：HTML文書全体を囲むタグ<head>：ページの設定情報（タイトル、文字コード、CSSの読み込みなど）を記述する<body>：ブラウザに実際に表示される内容を記述する
よく使うHTMLタグ一覧
Webサイト制作で頻繁に使うタグを紹介します。最初にこれらを覚えておけば、基本的なページは作れるようになります。
<h1>〜<h6>：見出しタグ。h1が最も大きく、h6が最も小さい見出し<p>：段落タグ。文章のまとまりを示す<a>：リンクタグ。href属性でリンク先のURLを指定する<img>：画像タグ。src属性で画像のパスを指定する<ul>/<ol>/<li>：リストタグ。ulは箇条書き、olは番号付きリスト<div>：ブロック要素のグループ化。レイアウトの「入れ物」として使う<span>：インライン要素のグループ化。テキストの一部にスタイルを適用する際に使う
HTMLのタグは開始タグ<p>と終了タグ</p>のペアで使うのが基本です。ただし、<img>や<br>のように終了タグが不要なタグ（空要素）もあります。タグの閉じ忘れはレイアウト崩れの原因になるため、書いたら必ず閉じるクセをつけましょう。
セマンティックHTMLの重要性
HTML5以降では、文書の構造をより意味的に明確にする「セマンティックタグ」が追加されました。<header>、<nav>、<main>、<section>、<article>、<footer>などがその例です。
すべてを<div>で書くこともできますが、セマンティックタグを使うと検索エンジンがページの構造を正しく理解できるため、SEOの観点からもメリットがあります。スクリーンリーダーなどの支援技術にとっても、セマンティックタグは重要な情報源となります。
CSSとは：Webページの「見た目」を整える言語
CSSの基本的な書き方
CSSは「Cascading Style Sheets」の略で、HTMLで作った構造に色、フォント、余白、レイアウトなどの見た目のスタイルを適用する言語です。
CSSの記述は「セレクタ」「プロパティ」「値」の3つで構成されます。セレクタでスタイルを適用する対象を指定し、プロパティと値のペアで具体的な見た目を定義します。
CSSの適用方法は3種類
CSSをHTMLに適用する方法は3つあります。
- 外部スタイルシート：別ファイル（.cssファイル）に記述し、HTMLの<link>タグで読み込む方法。最も推奨される方法
- 内部スタイルシート：HTMLの<head>内に<style>タグで記述する方法
- インラインスタイル：HTMLタグのstyle属性に直接記述する方法。メンテナンス性が低いため非推奨
実務では外部スタイルシートを使うのが基本です。HTMLとCSSを分離することで、デザインの変更がしやすくなり、コードの管理も楽になります。
覚えておくべき主要プロパティ
CSSには数百種類のプロパティがありますが、最初に覚えるべきものは限られています。
- テキスト関連：color、font-size、font-family、font-weight、line-height、text-align
- ボックス関連：width、height、margin、padding、border
- 背景関連：background-color、background-image
- レイアウト関連：display、position、flexbox、grid
ボックスモデルを理解する
CSSを学ぶ上で最も重要な概念が「ボックスモデル」です。HTMLのすべての要素は、ボックス（四角い箱）として扱われます。
ボックスモデルは内側から以下の4層で構成されています。
- content：コンテンツ（テキストや画像）が表示される領域
- padding：コンテンツとborderの間の内側余白
- border：要素の境界線
- margin：要素の外側余白。隣の要素との間隔を調整する
marginとpaddingの違いを正しく理解することが、レイアウト崩れを防ぐ鍵です。marginは要素の「外側」の余白、paddingは要素の「内側」の余白という点を意識しましょう。
デフォルトのボックスモデルでは、widthに指定した値はcontent領域の幅だけを意味します。つまり、paddingやborderの分だけ実際の表示サイズが大きくなります。これが原因でレイアウトが崩れることがよくあるため、CSSの冒頭でbox-sizing: border-box;を指定しておくのが一般的です。この設定により、widthにpaddingとborderを含めた計算になり、直感的にサイズ指定ができます。
FlexboxとCSS Grid：現代のレイアウト手法
Flexboxとは
Flexbox（Flexible Box Layout）は、要素を横並びや縦並びに配置するためのレイアウト手法です。ナビゲーションメニュー、カードの横並び、フッターのレイアウトなど、多くの場面で活用できます。
親要素にdisplay: flex;を指定するだけで、子要素が自動的に横並びになります。justify-contentで水平方向の配置、align-itemsで垂直方向の配置を制御できるため、中央寄せなども簡単に実現可能です。
CSS Gridとは
CSS Gridは、行と列の2次元のグリッドでレイアウトを組む手法です。Flexboxが1次元（横方向 or 縦方向）のレイアウトに強いのに対し、CSS Gridは2次元のレイアウトに適しています。
ページ全体のレイアウト構成（ヘッダー・サイドバー・メインコンテンツ・フッター）のような複雑な配置は、CSS Gridの方がシンプルに記述できます。
学習を加速するおすすめの方法
写経から始める
既存のWebサイトのソースコードを見ながら、同じコードを自分で書き写す「写経」は、HTML/CSS学習の王道です。ただコピー＆ペーストするのではなく、一文字ずつタイピングすることで、タグの構造やCSSの書き方が体に染み込んでいきます。
ブラウザの開発者ツールを活用する
Google Chromeの開発者ツール（F12キーで起動）を使えば、任意のWebサイトのHTMLとCSSをリアルタイムで確認・編集できます。「このサイトの余白はどう設定されているんだろう」「このフォントは何だろう」といった疑問を、開発者ツールで即座に解決できます。
無料学習サイトを活用する
体系的に学ぶなら、ProgateのHTML/CSSコースがおすすめです。スライド形式の解説と実践を組み合わせた教材で、手を動かしながら基礎を身につけられます。また、MDN Web Docsは正確なリファレンスとして、分からないことを調べる際に頼りになります。
小さなプロジェクトを作る
基礎文法を一通り学んだら、小さなプロジェクトに取り組みましょう。自己紹介ページ、名刺風のカード、シンプルなブログのレイアウトなど、完成させることが何よりの学習になります。完璧なコードを書く必要はありません。動けばまずはOKです。
よくある質問（Q&A）
Q：HTML/CSSの学習にはどれくらい時間がかかりますか？
A：基本的なタグとプロパティを覚えるだけなら1〜2週間で可能です。ただし、Flexboxやレスポンシブデザインまで含めて実用レベルに達するには2〜3か月が目安です。毎日1〜2時間の学習を続けた場合の目安なので、学習ペースによって前後します。
Q：HTMLとCSSはどちらを先に学ぶべきですか？
A：HTMLが先です。CSSはHTMLの要素にスタイルを適用する言語なので、HTMLの基本構造を理解していないとCSSの意味が分かりません。HTMLの基本タグを覚えてからCSSに進むのが自然な流れです。並行して学ぶ場合も、まずHTMLで構造を作ってからCSSで見た目を整えるという順序を守りましょう。
Q：テキストエディタは何を使えばいいですか？
A：Visual Studio Code（VS Code）が最もおすすめです。無料で使え、HTMLやCSSの入力補完、エラーのハイライト、拡張機能など、Web制作に必要な機能が揃っています。特に「Live Server」という拡張機能を入れると、コードを保存するたびにブラウザが自動更新されるため、変更結果をリアルタイムで確認できます。
Q：JavaScriptも一緒に学ぶべきですか？
A：最初の段階ではHTML/CSSだけに集中するのがおすすめです。JavaScriptはWebページに動き（アニメーション、ユーザー操作への反応など）をつけるための言語で、HTML/CSSとは役割が異なります。HTML/CSSの基礎がしっかり固まった段階で、次のステップとしてJavaScriptに進みましょう。
Q：スマホ対応はどうすればいいですか？
A：スマホ対応（レスポンシブデザイン）は、CSSのメディアクエリという機能を使って実現します。画面幅に応じてレイアウトやフォントサイズを切り替える仕組みです。HTML/CSSの基本を学んだ後、レスポンシブデザインに進むのが一般的な学習順序です。
まとめ
HTMLはWebページの構造を作る言語、CSSはその見た目を整える言語です。この2つはWebサイト制作の最も基本的なスキルであり、Webデザインやフロントエンド開発を目指すなら避けて通れません。
学習のポイントは、理論だけでなく実際に手を動かすことです。Progateなどの無料サービスで基礎を学び、小さなプロジェクトで実践し、開発者ツールで他のサイトを分析する。このサイクルを繰り返すことで、着実にスキルが身についていきます。
