Lesson 1
HTMLの基本タグ
見出し・段落・リンク・リスト・表・フォームなど、HTMLの基本となるタグをまとめて学べる回です。
- 見出しと段落の書き方
- リンクとリストの基本
- 簡単な表とフォーム
1. カードデザインとは？
最近のWebサイトでは、記事や商品、サービスの紹介を カード という箱にまとめて表示することがよくあります。
カードの中には、だいたい次のような要素が入ります。
- カテゴリやラベル（例：HTML基礎 / フォーム など）
- タイトル
- 短い説明文
- 「詳しく見る」「この回を開く」などのボタンやリンク
このページでは、第1〜7回の学習回をカードとして並べてみます。
2. 第1〜7回のカード一覧
それぞれの回を、タイトル・内容のポイント・リンクボタン付きのカードで紹介してみましょう。
Lesson 2
セマンティックなレイアウト
<header> や <main> など、意味のあるレイアウト用タグを使って、ブログ風ページを作ります。
- header / nav / main / footer
- article / section / aside
- 簡単な2カラム構成
Lesson 3
画像とリンクの応用
画像の表示やキャプション、外部リンク・ページ内リンク・画像リンクなど、リンクまわりをまとめて練習します。
- img と figure / figcaption
- 外部・内部リンクの書き分け
- バナー風の画像リンク
Lesson 4
おすすめボックスと広告枠
おすすめ記事ボックスや広告枠のレイアウトを作り、将来アフィリエイト広告を貼る場所をイメージします。
- aside を使ったおすすめ枠
- 広告ボックスのデザイン
- 学習用と実運用の違い
Lesson 5
文章構造と意味づけタグ
<strong> や <em>、<blockquote> など、文章の意味を丁寧に表すタグを学びます。
- strong / em / small
- sup / sub（上付き・下付き）
- blockquote / q / cite / abbr
Lesson 6
スマホ対応（レスポンシブ）入門
<meta name="viewport"> と @media を使って、PCとスマホでレイアウトが変わるページを作ります。
- viewport の役割
- @media (max-width: 768px) の書き方
- 2カラム → 1カラムへの切り替え
Lesson 7
フォーム基礎と入力しやすいレイアウト
問い合わせフォームを例に、input・textarea・label などの基本タグと、入力しやすい配置を学びます。
- label と for 属性の使い方
- 必須マークと入力のヒント
- スマホでも使いやすい配置
4. 広告カードの例
アフィリエイト広告も、1つの「カード」としてデザインすることで、ページ全体の雰囲気になじませることができることもあります。
Affiliate
学習に役立つサービスのご紹介
HTML・Web制作の学習に役立つ教材やサービスの紹介です。
