HTMLとCSSの基本を理解しよう：Web制作の第一歩

導入

Webサイトを作るうえで欠かせないのがHTMLとCSSという2つの言語です。
HTMLはページの骨組み、CSSは見た目を整える役割を担い、どちらもWeb制作の基礎中の基礎となります。
本記事では、初心者でも理解しやすいようにHTMLとCSSの役割と基本構造を解説し、自分でWebページを作るための第一歩をサポートします。

前提条件

パソコンとWebブラウザ（ChromeやEdgeなど）がインストールされていること。
テキストエディタ（VS Codeなど）を用意していること。
プログラミングに関する高度な知識は不要ですが、基本的なPC操作に慣れているとスムーズです。

ステップ1

HTMLとは？

HTML（エイチティーエムエル）は、Webページの内容や構造を定義するマークアップ言語です。テキストや画像、リンクなど、ページに「何を表示するか」を指定します。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは、HTML！</h1>
    <p>これは最初のWebページです。</p>
  </body>
</html>

このテンプレートをベースに、<h1>や<p>などのタグで内容を追加していきます。

よく使うタグ

タグ	役割
`<h1>`〜`<h6>`	見出しをつける
`<p>`	段落（テキスト）を表す
`<a>`	リンクを貼る
`<img>`	画像を表示する
`<ul>` / `<li>`	箇条書きリストを作る

ステップ2

CSSとは？

CSS（シーエスエス）は、HTMLで定義した内容にデザインを加えるスタイルシート言語です。文字の色や大きさ、余白、配置などを調整して、見やすく美しいページに整えます。

CSSの書き方

h1 {
  color: blue;      /* 文字の色を青にする */
  font-size: 24px;  /* 文字の大きさを指定 */
}
p {
  color: #555;
  line-height: 1.8;
}

セレクタ（この例ではh1やp）を指定して、波括弧内にスタイルを記述します。

ステップ3

HTMLとCSSを組み合わせる

HTMLの<head>内に<style>タグを用意し、先ほどのCSSを記述すると、構造と見た目を一体化したページが完成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>CSSの練習</title>
    <style>
      h1 {
        color: blue;
      }
      p {
        color: gray;
      }
    </style>
  </head>
  <body>
    <h1>はじめてのCSS</h1>
    <p>文字の色を変えてみました。</p>
  </body>
</html>

HTMLが「骨組み」、CSSが「見た目」を担当しており、家づくりにたとえるとHTMLは建物の構造、CSSは外装やインテリアに相当します。この2つを組み合わせることで、きれいで見やすいWebページが完成します。

ベストプラクティス

HTMLのタグは意味に合わせて適切に使い分け、構造が理解しやすいマークアップを心がけましょう。
CSSでは色やフォントサイズだけでなく、余白や行間も調整して読みやすさを高めましょう。
作成したページはこまめにブラウザで確認し、表示崩れがないかチェックします。
コードはインデントを揃え、コメントを活用して後から見返しやすい形に整えましょう。

よくある質問

Q. HTMLとCSSのどちらから学べばよいですか？

まずはHTMLでページの骨組みを作れるようになることをおすすめします。その後、CSSで見た目を整えると、構造とスタイルの役割分担が理解しやすくなります。

Q. どのエディタを使えばよいですか？

Visual Studio CodeやAtomなどのコードエディタが人気です。HTMLとCSSのシンタックスハイライトに対応しており、効率よく学習できます。

Q. どのような題材で練習するのが良いですか？

自己紹介ページや好きな映画の紹介ページなど、身近なテーマで練習すると、必要なタグやスタイルを自然と覚えられます。

まとめ

HTMLはコンテンツの構造、CSSはデザインを担当するWeb制作の基本技術です。
基本的なタグとスタイルの書き方を理解し、ブラウザで結果を確認しながら学習を進めましょう。
小さなページでもよいので手を動かすことで、理解が深まり自信につながります。

HTMLとCSSはどんなWebサイトにも欠かせない基礎です。最初は難しく感じても、繰り返し練習することで自然と身につきます。ぜひ本記事を参考に、Web制作の第一歩を踏み出してみてください。