← クエスト一覧へ

HTML & CSS ガイドブック

🏠

基礎知識

2 記事
1
HTMLの基本構造とタグの書き方

HTMLはタグと呼ばれる「<〇〇>」という記号を使って、文書の構造を表します。

🏗️ HTMLファイルの基本テンプレート
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>大見出し</h1>
    <p>本文の段落</p>
  </body>
</html>
📌 よく使うタグ一覧
タグ意味使用例
<h1>〜<h6>見出し（h1が最大）<h1>タイトル</h1>
<p>段落<p>本文</p>
<a>リンク<a href="URL">テキスト</a>
<img>画像<img src="画像.png" alt="説明">
<ul><li>箇条書きリスト<ul><li>項目</li></ul>
<div>汎用ブロック要素レイアウトの区切りに使う
<span>汎用インライン要素文中の一部にスタイルを当てる
⚠️ タグは必ず閉じる

ほとんどのタグは <開始タグ> と </終了タグ> がセットです。
閉じ忘れるとレイアウトが崩れます。ただし <img> や <br> は閉じタグ不要（空要素）です。

2
CSSの書き方とセレクタの仕組み

CSSは「どの要素を・どのように見せるか」をルールで指定します。

🎨 CSSの基本構文
/* セレクタ { プロパティ: 値; } */

h1 {
  color: #333333;      /* 文字色 */
  font-size: 32px;     /* 文字サイズ */
  margin-bottom: 16px; /* 下の余白 */
}

.card {              /* class="card" の要素すべてに適用 */
  background: #f0f4ff;
  padding: 20px;
  border-radius: 8px;
}

#header {            /* id="header" の要素1つに適用 */
  background: navy;
}
📌 よく使うCSSプロパティ
プロパティ意味例
color文字色color: red;
background背景色・画像background: #eee;
font-size文字サイズfont-size: 16px;
margin外側の余白margin: 10px;
padding内側の余白padding: 20px;
border枠線border: 1px solid #ccc;
display表示方法display: flex;
✅ CSSをHTMLに適用する3つの方法
  • 外部ファイル（推奨）: <link rel="stylesheet" href="style.css"> をheadに書く
  • 内部スタイル: <style> タグ内に書く
  • インライン: <p style="color:red;"> のようにタグ内に直接書く