お問い合わせ
お問い合わせ
ホーム > CSS > HTMLとCSSの基本構文まとめ｜初心者でも理解できる入門ガイド

HTMLとCSSの基本構文まとめ｜初心者でも理解できる入門ガイド

CSS
HTMLとCSSの基本構文を解説する初心者向け入門ガイドのイメージ
HTMLとCSSの基本構文をわかりやすく解説する入門ガイド

Webサイト制作に欠かせないのが HTML と CSS です。
HTMLはページの骨組みを作り、CSSはその見た目を整える役割を持ちます。
この記事では、これから学ぶ人が基礎を完璧にできるように HTMLとCSSの基本構文 を分かりやすくまとめました。

HTMLとは？役割と基本構造

HTML（HyperText Markup Language）は、Webページの構造を記述する言語です。

最も基本的なHTMLの雛形は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これは段落です。</p>
</body>
</html>

HTMLの基本要素

  • <h1>〜<h6> … 見出し
  • <p> … 段落
  • <a> … リンク
  • <img> … 画像
  • <ul>, <ol>, <li> … リスト

👉 詳しくは HTMLの基本構文まとめ をご覧ください。

CSSとは？役割と基本書き方

CSS（Cascading Style Sheets）は、HTMLで作った骨組みにデザインを与えるスタイルシート言語です。

CSSの書き方の基本

/* セレクタ { プロパティ: 値; } */
p {
  color: blue;
  font-size: 16px;
}

上記の例では、すべての段落 <p> が青色で表示され、文字サイズは16pxになります。

よく使うプロパティ

  • color … 文字色
  • background-color … 背景色
  • font-size … 文字サイズ
  • margin … 外側の余白
  • padding … 内側の余白
  • border … 枠線

👉 詳しくは CSSの基本プロパティ解説 にまとめています。

HTMLとCSSの組み合わせ方

HTMLにCSSを適用する方法は大きく3種類あります。

① インラインCSS

<p style="color:red;">赤い文字</p>

② 内部CSS

<head>
  <style>
    p { color: green; }
  </style>
</head>

③ 外部CSS（推奨）

<head>
  <link rel="stylesheet" href="style.css">
</head>

👉 実際の使い分けは HTMLとCSSの使い方まとめ で解説しています。

セマンティックなHTMLを意識しよう

HTMLを学ぶときに重要なのが セマンティック（意味を持つ）なタグ を意識することです。

例：

  • <header> … ヘッダー部分
  • <nav> … ナビゲーション
  • <main> … メインコンテンツ
  • <footer> … フッター部分

これらを使うと検索エンジンやスクリーンリーダーに正しく内容が伝わります。

👉 詳しくは HTMLのセマンティックタグ徹底解説 をご覧ください。

よくある初心者のつまずきポイント

  • HTMLのタグを閉じ忘れる
  • CSSのセレクタ指定を間違える（例：#id と .class の使い分け）
  • 半角スペースやセミコロンを忘れる

最初は誰でもミスをします。小さなコードでも正確に書く習慣を身につけましょう。

まとめ

  • HTMLは構造、CSSはデザインを担当する
  • HTMLの基本タグを覚えることから始めよう
  • CSSは「セレクタ」「プロパティ」「値」の3つを理解するのが第一歩
  • 外部CSSを使って効率的に管理するのがベスト
  • セマンティックなHTMLでより正しいマークアップを心がける

👉 次は HTMLの基本構文まとめ や CSSの基本プロパティ解説 を読みながら、実際にコードを書いて試してみましょう。