🌐 わくわくHTML/CSS入門

このサイトは、HTML と CSS の基礎からレイアウトやレスポンシブ、簡単なアニメーションまで、行ごとに丁寧な解説を付けて学べる点が魅力です。
白を基調としたシンプルで見やすいデザインと、コピー可能なコードブロックで実践的に学習できます。

HTML の基礎

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落（パラグラフ）です。</p>
  </body>
</html>
詳しい行単位解説（クリックで展開）
行ごとの解説
  1. <!doctype html>：この行は文書が HTML5 であることを宣言し、ブラウザにレンダリングモード（標準モード）で表示させるために必要です。
  2. <html lang="ja">：ドキュメント全体を包むルート要素で、lang="ja" は文書の主要言語が日本語であることを示し、検索やスクリーンリーダーで重要になります。
  3. <head>：メタ情報（タイトルや文字コード、外部リソース指定など）を置く領域の開始タグです。ブラウザには直接表示されませんが動作に影響します。
  4. <meta charset="utf-8">：文書の文字エンコーディングを UTF-8 に指定し、日本語や絵文字などを正しく表示するために必須です。
  5. <title>サンプルページ</title>：ブラウザのタブや検索結果に表示されるページタイトルを設定します。SEO とユーザーの識別に重要です。
  6. </head>：head セクションの終了タグで、以降は表示コンテンツ（body）に移ります。
  7. <body>：実際にブラウザ上に表示されるコンテンツ（見出し、段落、画像など）を置く領域の開始タグです。
  8. <h1>見出し</h1>：文書内で最も重要な見出し（見出しレベル1）を表します。SEO とアクセシビリティで先頭に1つだけ置くのが推奨です。
  9. <p>段落（パラグラフ）です。</p>：文章の段落を示す要素で、テキストのまとまりを意味的に分けます。余白や読みやすさに関わります。
  10. </body>：表示コンテンツの終了タグです。これより下には表示すべき要素を置きません。
  11. </html>：HTML ドキュメント全体の終了タグで、このファイルがここで終わることをブラウザに示します。

セマンティック要素

<header>
  <h1>サイトのタイトル</h1>
</header>

<nav>
  <ul><li><a href="#">Home</a></li></ul>
</nav>

<main>
  <article>
    <h2>記事タイトル</h2>
    <p>記事本文...</p>
  </article>
</main>

<footer>著作権情報</footer>
詳しい行単位解説（クリックで展開）
  1. <header>：ページやセクションの冒頭に置く「導入用」コンテナで、ロゴやサイトタイトル、グローバルナビなどを置きます。
  2. <h1>サイトのタイトル</h1>：そのページやサイト全体の主題を示す最上位見出しで、検索エンジンや支援技術が内容を理解する手がかりになります。
  3. </header>：ヘッダー領域の終了タグです。ここまでが冒頭情報のまとまりになります。
  4. （空行）：可読性のための空行。HTML においては表示に影響しませんが、コードの整理に有効です。
  5. <nav>：サイト内の主要なナビゲーションを示す要素で、検索エンジンやスクリーンリーダーに「メニュー領域」であることを伝えます。
  6. <ul><li><a href="#">Home</a></li></ul>：ナビ項目をリスト化した例で、リスト（ul）中にリンク（a）を置くことで構造化されたメニューになります。
  7. </nav>：ナビゲーション領域の終了タグです。
  8. （空行）：区切りの空白行。
  9. <main>：ページの主要コンテンツを示す要素で、ページ内に1つだけ置くのがベストプラクティスです（副次的コンテンツは除く）。
  10. <article>：独立して配布・再利用できる記事や投稿を示す要素で、ブログの記事やニュース項目に最適です。
  11. <h2>記事タイトル</h2>：記事内の主要見出し（h1 の次のレベル）で、記事のセクション見出しとして機能します。
  12. <p>記事本文...</p>：記事の本文の段落です。複数段落やセクションに分けて書きます。
  13. </article>：記事ブロックの終了タグです。記事単位のまとまりがここで終わります。
  14. </main>：メインコンテンツ領域の終了タグで、以降は補助的な情報（サイドバーやフッター等）を置きます。
  15. （空行）：区切りの空行。
  16. <footer>著作権情報</footer>：ページ下部の脚注的領域で、著作権や連絡先、補足リンクなどを置くのに使います。

フォーム要素

<form action="/submit" method="post">
  <label>名前: <input type="text" name="name" required></label>
  <label>メール: <input type="email" name="email"></label>
  <button type="submit">送信</button>
</form>
詳しい行単位解説（クリックで展開）
  1. <form action="/submit" method="post">：フォーム開始タグで、action は送信先の URL、method は送信方法（post はデータをボディで送る）を指定します。セキュリティやサーバー設計に合わせて使い分けます。
  2. <label>名前: <input type="text" name="name" required></label>：label は入力要素のラベルで、ラベルをクリックすると対応する入力にフォーカスが移る（アクセシビリティ向上）。input type="text" は単一行のテキスト入力、name はサーバー側で受け取るキー、required は送信時の必須バリデーションです。
  3. <label>メール: <input type="email" name="email"></label>：type="email" はメールアドレス形式を期待する入力で、ブラウザが簡易チェックやモバイルでメールキーボードを出すなどの恩恵があります。name は送信時のキー名です。
  4. <button type="submit">送信</button>：フォーム送信用ボタンで、type="submit" によりクリックでフォームの送信が発生します。スタイルや aria 属性で見た目・アクセシビリティ改善可能です。
  5. </form>：フォームの終了タグ。フォーム内の構成要素はここで閉じられます。

CSS の基礎

/* セレクタの基本 */
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
p.lead { font-size: 1.1rem; color: #5a341f; }

/* クラス・ID */
.card { padding: 1rem; border-radius: 8px; }
#main-header { background: var(--accent-orange); }
詳しい行単位解説（クリックで展開）
  1. /* セレクタの基本 */：CSS のコメントで説明を入れる行。コメントはブラウザに無視され、メンテナンス性を上げます。
  2. h1 { font-size: 2rem; margin-bottom: 0.5rem; }：要素セレクタ（h1）の例で、font-size: 2rem はルート基準の相対サイズ、margin-bottom で下の余白を調整します。
  3. p.lead { font-size: 1.1rem; color: #5a341f; }：クラス付きセレクタ（p.lead）の例で、そのクラスを持つ p にだけスタイルが適用されます。色は 16 進カラーコードで指定しています。
  4. （空行）：読みやすさのための空行。
  5. /* クラス・ID */：このコメントは次にクラスと ID の例が続くことを示します。ドキュメント整理に有用です。
  6. .card { padding: 1rem; border-radius: 8px; }：クラスセレクタ .card の例で、padding は内側余白、border-radius は角丸の半径を指定します。複数要素に適用でき再利用性が高いです。
  7. #main-header { background: var(--accent-orange); }：ID セレクタ（ページ内で一意に使う想定）で、CSS 変数 --accent-orange を参照して背景色を設定しています。

ボックスモデル

/* ボックスモデルの例 */
.box {
  width: 300px;
  padding: 16px;   /* 内側余白 */
  border: 2px solid #dcd0c3; /* 境界線 */
  margin: 12px;    /* 外側余白 */
  box-sizing: border-box; /* 幅に border/padding を含める */
}
詳しい行単位解説（クリックで展開）

key: content + padding + border + margin が要素の表示サイズに影響します。box-sizing: border-box を使うと扱いやすくなります。

  1. /* ボックスモデルの例 */：コメントでこのブロックがボックスモデルの説明であることを示しています。
  2. .box {：クラス .box のスタイル開始行。中括弧内にプロパティが続きます。
  3. width: 300px;：コンテンツ領域の幅を固定で 300px に指定します（box-sizing の設定によって最終的な見た目幅が変わります）。
  4. padding: 16px;：要素の内部とコンテンツの間の余白（内側余白）を指定し、テキストや内包要素の余白を確保します。
  5. border: 2px solid #dcd0c3;：要素の境界線で、太さ・スタイル（solid）・色を指定します。視覚的区切りになります。
  6. margin: 12px;：要素の外側の余白で、他要素との間隔（外側）を指定します。
  7. box-sizing: border-box;：この指定で width に padding と border を含めて計算するため、レイアウトが直感的になります（幅オーバーを防ぐ）。
  8. }：.box スタイルの終了中括弧。

レイアウト（Flex / Grid）

<!-- Flexbox の例 -->
<div class="nav">
  <div class="logo">Logo</div>
  <div class="links">...</div>
</div>

<style>
.nav { display:flex; justify-content:space-between; align-items:center; padding:12px; }
</style>
<!-- Grid の例 -->
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
</style>
詳しい行単位解説（クリックで展開）

Flex は一方向レイアウト（横 or 縦）で整列に向き、Grid は二次元のレイアウト（行と列）でレイアウト設計を強力にサポートします。

  1. <!-- Flexbox の例 -->：HTML コメントで、このブロックが Flexbox の例であることを示します（ブラウザ表示には出ません）。
  2. <div class="nav">：ナビゲーションコンテナで、Flex レイアウトを適用するためのルート要素にクラスを付けています。
  3. <div class="logo">Logo</div>：ロゴ領域の要素。Flex の子要素として自動で配置されます。
  4. <div class="links">...</div>：リンク群を入れる領域の要素。Flex の justify-content 等で整列されます。
  5. </div>：.nav コンテナの閉じタグです。
  6. （空行）：可読性のための空行。
  7. <style>：ページ内スタイルを記述する開始タグ（通常は外部 CSS が望ましいが、例示用に使う）。
  8. .nav { display:flex; justify-content:space-between; align-items:center; padding:12px; }：.nav に Flexbox を適用し、子要素を左右に分散（space-between）、縦方向中央揃え（align-items:center）にして余白を与える設定です。
  9. </style>：スタイルブロックの終了タグ。
  1. <!-- Grid の例 -->：Grid レイアウト例であることを示すコメント。
  2. <div class="grid">：Grid コンテナの開始タグで、内部を格子状にレイアウトします。
  3. <div>1</div>：グリッド内の1つ目のセルコンテンツ。
  4. <div>2</div>：2つ目のセルコンテンツ。
  5. <div>3</div>：3つ目のセルコンテンツ。
  6. </div>：.grid コンテナの終了タグ。
  7. （空行）：可読性のための空行。
  8. <style>：内連スタイルの開始タグ（例示用）。
  9. .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }：Grid を有効にし、3 列等分（repeat(3, 1fr)）で列幅を均等に割り当て、セル間の間隔を gap で指定しています。
  10. </style>：スタイルブロック終了。

レスポンシブデザイン

@media (max-width: 768px) {
  .sidebar { display: none; } /* 小さい画面ではサイドバーを折り畳む例 */
  .content-inner { padding: 0 1rem; }
}
詳しい行単位解説（クリックで展開）
  1. @media (max-width: 768px) {：メディアクエリの開始で、ブラウザ幅が 768px 以下のときに中括弧内のスタイルを有効にします（モバイル向けの切り替えに使います）。
  2. .sidebar { display: none; }：サイドバーを非表示にして画面スペースを本文に集中させる例。アクセシビリティを考えてトグルメニュー等の代替手段があると良いです。
  3. .content-inner { padding: 0 1rem; }：本文の左右余白を調整して、モバイルで適切な読みやすさを確保します。
  4. }：メディアクエリの終了タグ。

タイポグラフィと色使い

body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; color: #2b1a14; }
h1 { font-weight: 700; color: var(--accent-deep); }
a { color: var(--accent-deep); text-decoration: none; }
詳しい行単位解説（クリックで展開）
  1. body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; color: #2b1a14; }：本文全体のフォントと行間（line-height）、基本文字色を設定し、可読性と全体の雰囲気を決めます。フォントフォールバックも指定しています。
  2. h1 { font-weight: 700; color: var(--accent-deep); }：h1 の太さとアクセントカラーを指定し、視覚的な強調を与えて階層を明確にします。
  3. a { color: var(--accent-deep); text-decoration: none; }：リンクの色と下線を消す指定。視認性は保ちつつデザイン上の一貫性を出します（アクセシビリティのため :focus や :hover のスタイルも検討）。

トランジション & アニメーション

/* ホバーで滑らかに色が変わる例 */
.button {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--accent-deep);
  color: #fff;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
詳しい行単位解説（クリックで展開）
  1. /* ホバーで滑らかに色が変わる例 */：このブロックがトランジションの簡単な例であることを示すコメントです。
  2. .button {：ボタン用のクラススタート。ここに通常時の見た目を定義します。
  3. padding: 0.6rem 1rem;：上下左右の内側余白を指定し、クリックしやすいサイズにします。
  4. border-radius: 8px;：ボタンの角を丸めて現代的な見た目にします。
  5. background: var(--accent-deep);：背景色にアクセントカラーを設定します（ボタンの視認性を担保）。
  6. color: #fff;：ボタン内テキストを白にして背景と十分なコントラストを確保します。
  7. transition: transform 200ms ease, box-shadow 200ms ease;：状態変化（transform や box-shadow）のアニメーションを 200ms のイージングで滑らかに行う指定です。
  8. }：.button のスタイル終了。
  9. .button:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }：ホバー時にボタンを少し持ち上げる（translateY）と影を付けることで、視覚的に押しやすさやインタラクティブ感を出します。

ミニプロジェクト — シンプルなプロフィールカード

<!-- HTML -->
<div class="profile">
  <img src="avatar.jpg" alt="アバター" class="avatar">
  <h3>Toma</h3>
  <p>フロントエンドを学んでいます。</p>
</div>

<!-- CSS -->
.profile { width: 280px; padding: 16px; border-radius: 12px; background: linear-gradient(180deg, var(--accent-orange), #fff); text-align:center; }
.avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; }
詳しい行単位解説（クリックで展開）
  1. <!-- HTML -->：この箇所が HTML 部分の開始であることを示すコメントです。
  2. <div class="profile">：プロフィールカード全体を包むコンテナで、背景や余白、角丸を与える対象になります。
  3. <img src="avatar.jpg" alt="アバター" class="avatar">：アバター画像の要素で、src は画像ファイル、alt は画像の説明（アクセシビリティ用）、class="avatar" でスタイル指定します。
  4. <h3>Toma</h3>：プロフィール名の見出し（h3）で、コンポーネント内での項目名として使います。
  5. <p>フロントエンドを学んでいます。</p>：自己紹介の短い段落。複数行にする場合は複数の p を使うと整理しやすいです。
  6. </div>：.profile コンテナの閉じタグです。
  1. （空行）：HTML と CSS の区切りのための空行。
  2. <!-- CSS -->：（元コードはプレーンテキストのコメントでしたが、ここでは「CSS 部分」の見出しとして扱います）
  3. .profile { width: 280px; padding: 16px; border-radius: 12px; background: linear-gradient(180deg, var(--accent-orange), #fff); text-align:center; }：プロフィールカードの見た目を一括指定するスタイルで、固定幅、内側余白、角丸、縦方向グラデーション背景、中央揃えを与えています。
  4. .avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; }：アバター画像を正方形にし、border-radius:50% で丸く切り取り、object-fit:cover で画像の縦横比を崩さずに枠にフィットさせます。