HTMLとCSSの基本を初心者向けにわかりやすく解説した記事のアイキャッチイメージ。タグの使い方やセレクタ、プロパティ、簡単なUI作成までを学べます。

開発ガイド

HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド

Web制作を始めたいけれど、「HTMLとCSSって難しそう…」「どこから学べばいいの？」と感じていませんか？
実は、Webページの仕組みはとてもシンプルで、ポイントさえつかめば 初心者でも今日から自分でページを作れるようになります。

HTMLは「骨組み」、CSSは「見た目」のデザインを担当する言語です。
この2つを理解するだけで、ボタンや文章、画像などの基本的なWebページを自由に作れるようになり、JavaScriptの理解も一気に進みます。

本記事では、
「最短でHTMLとCSSの基礎を身につけたい初心者」 に向けて、
これだけ知っておけばOK！という最低限の知識を、わかりやすい例を交えて解説します。

  • HTMLとCSSの役割の違い
  • 必要最低限のタグとプロパティ
  • 初心者がつまずきやすいポイント
  • 今日から使えるコード例
  • JavaScript学習へのつながり方

これらを1つの記事にまとめているので、完全未経験の方でも手を動かしながら理解できる構成になっています。

HTMLとCSSとは？

Web制作を学ぶときに、最初に理解すべきなのが 「HTML」と「CSS」の役割の違い」 です。
この2つはセットで登場するため混乱しがちですが、実は役割がはっきり分かれています。

HTMLは「骨組み」

HTML は、Webページの構造（骨組み）を作る役割を担います。

家づくりで例えると、HTMLは 柱・壁・部屋の配置 にあたります。

  • 見出し（タイトル）
  • 文章（段落）
  • 画像
  • ボタン
  • 入力フォーム

といった ページ内のすべてのパーツを配置する役目 を持っています。

HTMLだけでもページは作れますが、見た目はシンプルで素っ気ない ものになります。

CSSは「デザイン（見た目）」

CSSは、HTMLで作った要素にデザイン（見た目）を施す役割を担います。

先ほどの家の例で言うと、CSSは 内装・色・家具配置 のような「デザイン」に相当します。

  • 文字の色・大きさ
  • 余白（margin / padding）
  • レイアウト（横並び・中央揃え）
  • 背景色
  • ボタンのデザイン

など、画面を美しく整えるのはすべてCSSの役割 です。

HTMLとCSSは「役割が違うけど、一緒に使う」

初心者がよくつまずくポイントですが、
HTMLとCSSは どちらか片方では完成しません。

▼ 実際の例

HTMLだけだと、単なる灰色のボタンです。

CSSを使うと…

→ 色・文字色が変わり、見た目が分かりやすく進化します。

HTMLの基本構造

HTMLを書くときは、まず 「基本の型（テンプレート）」 を理解することが大切です。

HTMLの基本

HTMLは、大きく次の3つに分かれています。
① html：ページ全体を包む
② head：設定情報（見えない部分）
③ body：画面に表示される内容（見える部分）

最初に覚えるべき「HTMLの基本テンプレート」

まずは、どんなページでも使える 最小のHTMLテンプレート を紹介します。

構造の解説

タグ名役割解説
!DOCTYPE html文書型の宣言「この文書はHTML5というルールで書かれていますよ」とブラウザに伝えるための、必須の宣言です。
html lang="ja"HTML文書全体すべてのHTML要素を囲む一番大きな箱です。
lang="ja"は日本語の文書であることを示します。
head文書のメタ情報ページの設定や外部ファイルの読み込みなどを記述します。
画面には表示されませんが、Webページには欠かせない重要な部分 です。
titleページのタイトルブラウザのタブに表示されるタイトルのことです。
body文書の本体Webページで実際に表示される文字・ボタン・画像などは
すべて <body> の中に書きます。

よく使うHTMLタグだけ覚える

HTMLには数多くのタグがありますが、最初から全部覚える必要はありません。
まずは 「実際のWebページで必ず使う基本タグ」だけ 覚えれば十分です。

グループ化（最重要）

タグ名役割解説
div区切り最も使用頻度が高いタグです。グループをまとめる箱です。
span文章内の区切り文中の一部分に使う小さな箱です。

文章（テキスト）を表示するタグ

タグ名役割解説
h1〜h3見出しページのタイトルやセクションの区切り
p段落テキストの段落を意味します。
strong強調テキストを太字にして、重要であることを示します。
br改行文章の途中で改行したいときに使います。

画像・リンク・メディア系

タグ名役割解説
img画像Webページに画像を表示します。
<img src="画像ファイル名" alt="代替テキスト">
のように、属性（src：画像の場所やalt：説明）が必要です。
aリンククリックすると別のページへ移動するリンクを作成します。
<a href="リンク先URL">リンクテキスト</a>
buttonボタンクリックできるボタンを設置します。JavaScriptと組み合わせて使います。
input/textarea入力欄ユーザーが文字を入力するためのフォーム要素です。
inputは1行。textareaは複数行の入力に使うタグです。

CSSの書き方3パターン

CSSの書き方は次の3パターンだけ覚えれば十分です。

  1. 行内CSS（style属性）
  2. ページ内に書く CSS（<style>タグ）
  3. 外部CSSファイルを読み込む方法

最初は 1 → 2 → 3 の順番で覚えていくと、作りながら自然に理解できます。

1. 行内CSS（style属性）

HTMLタグの中に直接 CSS を書く方法です。

▼ 特徴

  • とにかく手軽で初心者にも分かりやすい
  • すぐに見た目を変えたい時に便利

▼ デメリット

  • CSSの量が増えると管理が大変
  • 同じデザインを複数の箇所に使いにくい
  • コードが長くなり、読みづらくなる

2. ページ内に書く CSS（<style>タグ）…小規模ページで最適

HTMLファイルの <head> 内に <style> を書いてCSSを書く方法です。

▼ 例：ボタンを緑色にする

▼ 特徴

  • HTMLとCSSが同じファイルで完結
  • ツール開発や小さなページではほぼこの形式
  • 同じクラス名を使えば何度でも同じデザインを適用できる

▼ デメリット

  • CSSが増えてくるとファイルが長くなる
  • 大規模なサイトでは不向き

外部CSSファイルを読み込む方法…最もプロ向けで管理に最適

CSSを別ファイル（style.css など）に分けて読み込みます。

▼ CSSファイル（style.css）

▼ HTMLで読み込む

▼ 特徴

  • プロのWeb制作ではこの方法が基本
  • HTMLとCSSが分離され、管理が圧倒的にしやすい
  • 複数ページで同じCSSを使いまわせる
  • サイトの規模が大きくなっても整いやすい

▼ デメリット

  • ファイル構成を理解する必要がある

CSSセレクタの基礎

CSSを書く時は、
「どのHTML要素にデザインを適用するか」 を指定する必要があります。
その対象を選ぶための仕組みが セレクタ です。

初心者はまず次の3つだけ覚えればOKです。

タグセレクタ

HTMLタグ名そのままを書きます。

→ すべての <p> 要素が青色になります。

クラスセレクタ

.（ドット）＋ クラス名で指定します。

CSS側：

HTML側：

クラスは 複数の要素に同じデザインを適用したいとき に使います。

IDセレクタ

# ＋ ID名で指定します。

CSS側：

HTML側：

同じIDは1ページに1つしかありません。

CSSの基本プロパティ

CSSでは、プロパティ名: 値; の形でデザインを指定します。
初心者が確実に使う、最重要プロパティだけを厳選して紹介します。

文字に関するプロパティ

プロパティ役割記述例
color文字の色を指定color: blue;
font-size文字の大きさを指定font-size: 16px;
text-align文字の位置（左・中央・右）text-align: center;

ボックスモデル（レイアウトの基礎）

HTML要素はすべて「箱（ボックス）」として扱われます。この箱を調整する考え方をボックスモデルと呼びます。

プロパティ役割記述例
padding内側の余白（要素の内容と枠線の間）padding: 10px;
margin外側の余白（要素と他の要素の間）margin: 20px;
border枠線（要素を囲む線）border: 1px solid #ccc;
width / height幅と高さwidth: 300px;

背景のデザイン

プロパティ役割記述例
background-color背景色background-color: #f0f8ff;
background-image背景画像background-image: url("bg.png");

レイアウト（配置）に関するプロパティ

プロパティ役割記述例
display要素の種類を指定display: block; (縦に並ぶ)
display: inline-block; (文章の中に入る要素)
flex要素の並べ方を柔軟に調整display: flex; を親要素に指定すると、子要素を横並びや中央揃えにするのが簡単になります。

HTML＋CSSのミニ演習

ここまでで HTMLは「骨組み」、CSSは「見た目」 を作る言語だと分かりました。
では実際に、HTMLとCSSを組み合わせて 一番シンプルなUI（ボタン） を作ってみましょう。

課題：角丸で立体感のあるボタンを作る

以下のHTMLとCSSを、test.htmlを作成しコピーしてください。

このように、
HTMLで配置 → CSSでデザイン
という流れを体験するだけで、Webページの作り方の基本がつかめます。

Web制作・プログラミングを始めるための最短ロードマップ

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

HTMLとCSSの基礎についてもっと深く学びたい方に役立つ学習リソースを紹介します。

『スラスラわかるHTML＆CSSのきほん』

  • Web制作初心者に最適な入門書。HTMLとCSSの仕組みをやさしく解説。
  • これからWebページを作ってみたい方にぴったり。
  • レイアウトの基本やスタイルの調整方法など、実践的に学べます。
スラスラわかるHTML&CSSのきほん 第3版
ＳＢクリエイティブ/狩野祐東

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Web制作の基礎をまとめて理解できる“総合入門書”

  • HTML / CSS の基本を図解でわかりやすく学べる
  • モバイル対応・レスポンシブデザインにも触れている
  • Web制作全体の流れも理解できる
  • JavaScriptを学ぶ前の基礎固めとして最適
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
Mana

さらに詳しく選びたい方は「JavaScript・Web制作おすすめ本5選」へ▼

まとめ

HTML と CSS は、Web制作の入り口となるとても大切な基礎です。
難しい専門知識をすべて覚える必要はなく、まずは 「骨組み（HTML）」と「見た目（CSS）」 の違いを理解し、必要なタグとプロパティだけ使えるようになれば十分です。

今回紹介した内容さえ押さえておけば、

  • 文字の表示
  • 画像の挿入
  • ボタンのデザイン
  • レイアウトの調整
    など、基本的なWebページは自分で作れるようになります。

さらに、HTML と CSS を理解しておくことで、
JavaScript・Webアプリ制作・ツール開発へスムーズに進むことができます。
あなたのペースで、少しずつ手を動かしながら学んでいきましょう。

関連記事

実際に使えるUIを作りながらHTMLとCSSを覚えたい方はこちら▼
【初心者向け】HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

JavaScriptの基礎を最短で押さえたい方はこちら ▼
【初心者向け】JavaScript基礎入門｜最初に覚えるべき基本だけをわかりやすく解説

基礎文法を詳しく知りたい方はこちら ▼
JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう

-開発ガイド
-, ,