HTML・CSS入門｜Webページ作成の基本を解説
HTML CSS Web制作 入門
広告スペース (article-top)
WebサイトはHTMLとCSSという2つの言語で構成されています。HTMLがページの「構造」を担当し、CSSが「見た目」を担当します。この記事では、HTMLとCSSの基礎を実際のコードを交えながら解説します。
HTMLの基本構造
HTMLは「HyperText Markup Language」の略で、Webページの骨組みを作るための言語です。テキストを「タグ」と呼ばれる記号で囲むことで、見出しや段落、リンクなどの意味を持たせます。
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>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私のはじめてのWebページです。</p>
</body>
</html>この基本形を理解しましょう。
<!DOCTYPE html>: HTML5であることを宣言する<html>: HTML文書全体を囲む<head>: ページの設定情報（ブラウザのタブに表示されるタイトルなど）<body>: ページに実際に表示される内容
よく使うHTMLタグ
<!-- 見出し（h1が最も大きく、h6が最も小さい） -->
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<!-- 段落 -->
<p>これは段落です。文章のまとまりを表します。</p>
<!-- リンク -->
<a href="https://example.com">リンクテキスト</a>
<!-- 画像 -->
<img src="photo.jpg" alt="写真の説明">
<!-- リスト -->
<ul>
<li>箇条書き項目1</li>
<li>箇条書き項目2</li>
</ul>
<ol>
<li>番号付き項目1</li>
<li>番号付き項目2</li>
</ol>
<!-- 区切り・グループ化 -->
<div>ブロック要素のグループ化</div>
<span>インライン要素のグループ化</span>タグには「開始タグ」と「終了タグ」があります。<p>が開始タグ、</p>が終了タグです。<img>のように終了タグがない「空要素」もあります。
CSSの基本
CSSは「Cascading Style Sheets」の略で、HTMLで作った構造に色やレイアウトなどの見た目を与える言語です。
CSSの書き方3パターン
<!-- 方法1: 外部ファイル（推奨） -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- 方法2: styleタグに直接書く -->
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<!-- 方法3: インラインスタイル（非推奨） -->
<p style="color: red;">赤い文字</p>実務では方法1の外部ファイルが最も推奨されます。HTMLとCSSを分離することで管理しやすくなります。
CSSの基本文法
/* セレクタ { プロパティ: 値; } */
h1 {
color: #333333;
font-size: 24px;
margin-bottom: 16px;
}
p {
color: #666666;
font-size: 16px;
line-height: 1.8;
}CSSは「どの要素に（セレクタ）」「何を（プロパティ）」「どうする（値）」という構造で書きます。
セレクタの種類
/* タグセレクタ: タグ名で指定 */
p {
color: black;
}
/* クラスセレクタ: class属性で指定（ドットをつける） */
.highlight {
background-color: yellow;
}
/* IDセレクタ: id属性で指定（シャープをつける） */
#header {
background-color: navy;
}
/* 子孫セレクタ: 親要素の中にある要素を指定 */
.card p {
font-size: 14px;
}対応するHTMLは以下のようになります。
<p>通常の段落</p>
<p class="highlight">ハイライトされた段落</p>
<div id="header">ヘッダー</div>
<div class="card">
<p>カード内の段落（14pxが適用される）</p>
</div>実践：簡単なプロフィールページ
学んだ知識を使って、簡単なプロフィールページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介ページ</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.profile-card {
background-color: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-card h1 {
color: #333;
font-size: 24px;
border-bottom: 2px solid #4a90d9;
padding-bottom: 10px;
}
.profile-card p {
color: #666;
line-height: 1.8;
}
.skills {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.skills li {
background-color: #e8f0fe;
color: #4a90d9;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="profile-card">
<h1>山田花子</h1>
<p>Web制作を勉強中の大学生です。HTMLとCSSを使ったサイト作りが好きです。</p>
<h2>スキル</h2>
<ul class="skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>このコードをテキストエディタに貼り付け、profile.htmlというファイル名で保存し、ブラウザで開くとプロフィールカードが表示されます。
よくある間違いと対策
間違い1: タグの閉じ忘れ
<!-- NG: 閉じタグがない -->
<p>段落の始まり
<p>次の段落
<!-- OK: 正しく閉じる -->
<p>段落の始まり</p>
<p>次の段落</p>タグを閉じ忘れると、レイアウトが崩れる原因になります。開始タグを書いたら、すぐに終了タグも書く癖をつけましょう。
間違い2: クラス名の書き間違い
<!-- HTML側 -->
<p class="highlight">テキスト</p>/* NG: ドットを忘れている */
highlight {
color: red;
}
/* OK: クラスセレクタにはドットが必要 */
.highlight {
color: red;
}間違い3: CSSの優先順位の誤解
/* 詳細度: タグ < クラス < ID < インライン */
p {
color: black; /* 詳細度: 低 */
}
.text {
color: blue; /* 詳細度: 中 */
}
#special {
color: red; /* 詳細度: 高 */
}同じ要素に複数のスタイルが指定された場合、詳細度（セレクタの優先順位）が高い方が適用されます。意図通りにスタイルが当たらないときは、詳細度を確認してみましょう。
学習のコツ
- まずHTMLだけで構造を作り、その後CSSで見た目を整える手順で進める
- ブラウザの開発者ツール（F12）で、要素に適用されているCSSをリアルタイムで確認・変更できる
- 最初から完璧を目指さず、少しずつスタイルを追加していく
- 気になるWebサイトの開発者ツールを開いて、どんなHTMLとCSSが使われているか観察してみる
HTMLとCSSは、すべてのWeb技術の土台です。しっかり基礎を固めておくと、JavaScriptやフレームワークの学習もスムーズに進みます。
広告スペース (article-bottom)