ひろっとの第１回の課題

これは、 Git と HTML の基本をわかりやすくまとめたものです。

1. Git（バージョン管理ツール）

1-1. Gitって何？

Gitは、ファイルの変更履歴を記録し、いつでも戻したり共有できるツールです。

1-2. 基本の流れ（図）

┌─────────────┐ git add ┌─────────────┐ git commit ┌─────────────┐ │ Working Tree │ ───────────▶ │ Staging Area│ ───────────────▶ │ Local Repo │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ git push ▼ ┌─────────────┐ │ Remote Repo │ └─────────────┘

1-3. よく使うコマンド

目的コマンド意味
リポジトリ作成git initGitを始める
状態確認git status何が変わったか確認
追加git add ファイル名ステージに追加
保存（履歴）git commit -m "メッセージ"履歴を残す
共有git push origin mainサーバにアップ
取得git pull origin mainサーバの更新を取り込む
履歴表示git log --oneline簡易履歴表示

1-4. ブランチとチーム開発

ブランチ＝作業の枝分かれ。main（本番）を壊さずに別の枝で作業して、後で合体できます。

main ──────●──────●────────●───▶（安定） \ feature/login ──●──●──────────▶（新機能）

1-5. トラブル対応とポイント

状況コマンド・対応
間違えて上書きしたgit restore ファイル名
直前のコミットやり直しgit commit --amend
コミットを1つ戻すgit reset --soft HEAD^
競合が出たファイル内を手動修正→git add→git commit

2. HTML（Webページの骨組み）

2-1. HTMLの役割と基本構造

HTMLはWebページの中身と構造を作る言語です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>
  </head>
  <body>
    <header>ヘッダー</header>
    <main>
      <h1>見出し</h1>
      <p>本文テキスト</p>
    </main>
    <footer>フッター</footer>
  </body>
</html>

2-2. よく使うタグ

用途タグ例
見出し<h1>〜<h6><h1>タイトル</h1>
段落<p><p>本文です</p>
リスト<ul>, <li>箇条書き
リンク<a href="">他ページへ
画像<img><img src="img.jpg" alt="説明">
構造<header><main><footer>ページ構造

2-3. よくある注意点

2-4. 参考サイト