HTML/CSSの基礎【Webページの構造とスタイリング完全ガイド】

HTMLはWebページの骨格を作る言語、CSSはスタイルを整える言語です。この記事では、HTMLとCSSの基礎を実践的に解説します。

HTMLの基本構造
よく使うHTMLタグ一覧
CSSの基本
CSSセレクターの種類
Flexboxで横並びレイアウト
まとめ

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWebページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは！</h1>
  <p>はじめてのWebページです。</p>
</body>
</html>

よく使うHTMLタグ一覧

タグ	用途
<h1>〜<h6>	見出し（h1が最大）
<p>	段落テキスト
<a href=”URL”>	リンク
<img src=”URL” alt=”説明”>	画像
<ul><li>	箇条書きリスト
<div>	ブロック要素のグルーピング
<span>	インライン要素のグルーピング
<form><input>	フォーム・入力欄

CSSの基本

/* セレクター { プロパティ: 値; } */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}
h1 {
  color: #333;
  font-size: 2rem;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
#header {
  background: #0984e3;
  color: white;
  padding: 16px;
}

CSSセレクターの種類

セレクター	対象	例
タグ名	全てのそのタグ	h1 { }
.クラス名	class属性が一致する要素	.card { }
#ID名	id属性が一致する要素	#header { }

Flexboxで横並びレイアウト

.container {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

まとめ

HTMLはWebページの構造（骨格）を定義する言語
CSSはHTMLに見た目（色・サイズ・レイアウト）をつける言語
classセレクターで複数要素に同じスタイルを適用できる
Flexboxでシンプルな横並びレイアウトを実現できる