HTMLブログラボ · 01

ブログページを作ろう HTMLで。

HTMLはあらゆるアイデアに居場所を与えます。今日はブログのアイデアを、意味のある要素を一つずつ積み上げて、分かりやすく心地よいページに変えていきましょう。

✦

誰でも参加できます。スケッチ、会話、タイピング、指差し、質問、またはペアワークなどで貢献してください。

01計画読者がまず何を必要とするかを選びます。

02構築タグを使ってページを形作ります。

03配慮より多くの人が利用できるようにします。

HTML
+
IDEAS

ページは読者との対話です。

ステップ 1 · 構造

まずはスケルトンから。

HTMLタグは各パーツの役割を記述します。意味論的な骨組み（セマンティック・スケルトン）を作ることで、ブラウザやスクリーンリーダー、そしてクラスメートがあなたのページを理解しやすくなります。

やってみようそれぞれのタグを指差して、それがどのような役割を担っているか説明してみましょう。

blog.htmlHTML

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>フィールドノート</h1>
      <nav>概要 · アーカイブ</nav>
    </header>
    <main>
      <article>
        <h2>良いページとは？</h2>
      </article>
    </main>
  </body>
</html>

意味のあるタグを使うことで、ページがナビゲートしやすくなります。

ステップ 2 · コンテンツ

ページに個性を。

タグはコンテンツを保持しますが、視点をもたらすのは人です。タイトル、便利なリンク、そしてストーリーを伝える言葉を添えた画像を追加しましょう。

✓期待感を高めるタイトル

✓一つの明確なアイデアを持つ段落

✓遷移先がわかるリンク

ペアへのヒント見出しを声に出して読んでみてください。誰かを惹きつける内容になっていますか？

our-blog.local / journal•••

共有ジャーナル

良い
ウェブページとはどのようなものか？

私たちのスタジオからあなたへ、日々の小さな気づきのコレクション。

エントリーを読む↗

ステップ 3 · 配慮とアクセシビリティ

〜に道をあけましょうすべての人に。

優れたHTMLは、単に見栄えが良いだけではありません。より多くの人が公平に読み、理解し、会話に参加できる機会を提供します。

Aa見出し明確なパスを作成しましょう。

↗リンク遷移先を説明しましょう。

▧画像役立つ代替テキストを追加しましょう。

あなたの番ですブログのセクションを一つスケッチし、それに最適なHTMLタグを選んでみましょう。

気づいたこと…

疑問に思ったこと…

試してみること…

ブログページを作ろう HTMLで。

まずは スケルトンから。

ページに 個性を。

良いウェブページとはどのようなものか？

〜に道をあけましょう すべての人に。

まずはスケルトンから。

ページに個性を。

良い
ウェブページとはどのようなものか？

〜に道をあけましょうすべての人に。