Flat lay of business concept
Webサイトやブログを作りたいと思ったとき、まず覚えるべき基礎技術が「HTML」と「CSS」です。
HTMLはページの骨組みを作るための言語、CSSは見た目を整えるための言語です。
この2つを理解すれば、自分の思い通りにデザインしたページを作れるようになります。
しかし、初心者の方にとっては「タグって何？」「セレクタって？」と、専門用語や書き方に戸惑うことも多いでしょう。
この記事では、初心者でもつまずかないように、HTMLとCSSの基礎から実践的な使い方まで、わかりやすく解説します。
読み終えたときには、自分で簡単なWebページを作れる知識が身についているはずです。
HTMLとCSSはWeb制作の基礎となる2つの言語です。
HTML（HyperText Markup Language）は、Webページの構造や内容を記述するための言語です。
例えば「見出し」「文章」「画像」「リンク」など、ページの骨組みを作ります。
一方、CSS（Cascading Style Sheets）は、そのHTMLで作った骨組みにデザインを加えるための言語です。
文字の色や大きさ、背景色、配置、余白などを調整できます。
例えるなら、HTMLは家の設計図、CSSは壁紙や家具、外観のデザインです。
この2つはセットで使うことで、見やすく美しいWebページを作ることができます。
HTMLは「タグ」という特別な記号で囲まれた命令を使って書きます。
基本的なHTMLの構造は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに本文を書きます。</p>
</body>
</html>
<!DOCTYPE html> … HTML5を使うことを宣言します。<html> … ページ全体を囲むタグ。<head> … ページの設定やタイトルなど、表示されない情報を入れる部分。<body> … 実際に画面に表示される内容を入れる部分。この基本形を理解することが、Web制作の第一歩です。
初心者がまず覚えるべきHTMLタグをいくつか紹介します。
<h1>～<h6> … 見出しを作るタグ。数字が小さいほど重要度が高く、大きく表示されます。<p> … 段落（文章）を表すタグ。<a href="URL"> … リンクを作るタグ。<img src="画像URL" alt="説明文"> … 画像を表示するタグ。<ul> <ol> <li> … 箇条書きや番号付きリストを作るタグ。タグは必ず開始タグ <タグ名> と終了タグ </タグ名> で囲むのが基本です（画像など一部例外あり）。
CSSは「セレクタ」と「プロパティ」「値」で構成されます。
書き方の例：
p {
color: red;
font-size: 16px;
}
p … セレクタ（どの要素に適用するか）color … プロパティ（何を変更するか）red … 値（どのように変更するか）この例では、すべての段落 <p> の文字色を赤、文字サイズを16pxにしています。
初心者がよく使うCSSプロパティをいくつか紹介します。
color … 文字色を指定。background-color … 背景色を指定。font-size … 文字サイズを指定。margin … 要素の外側の余白。padding … 要素の内側の余白。border … 枠線を指定。text-align … 文字の配置（左寄せ、中央寄せなど）。これらを組み合わせることで、見た目を大きく変えられます。
HTMLとCSSは3つの方法で組み合わせられます。
<p style="color: blue;">青い文字</p> → HTMLタグ内に直接CSSを書く方法。<style> p { color: blue; } </style> → <head>タグ内にCSSをまとめて書く方法。<link rel="stylesheet" href="style.css"> → 別ファイル（style.css）にCSSを書き、HTMLに読み込む方法。<!-- コメント --> や /* コメント */ を使う。HTMLとCSSはWeb制作の基礎であり、学びやすい言語です。
最初はタグやプロパティを覚えることから始め、少しずつデザインやレイアウトの幅を広げていきましょう。
継続して学べば、自分の思い描いたWebページを形にできるようになります。
まずはこの記事で紹介した基本を押さえて、一歩踏み出してみてください。