LTech

レッスン11: 作ったページを公開しよう！Webページの最終チェックと公開方法

作成したHTMLページを確認して、Web上に公開する方法を学びましょう。

🎯 学習目標

  • 自分のHTMLページが正しく書かれているかを確認する
  • 他人にも見てもらえるよう、Web上に公開する方法を学ぶ
  • CodePenの基本的な使い方を知る

📘 目次

  1. 最終チェックリスト（HTMLコードの確認）
  2. HTML検証ツールを使ってみよう
  3. CodePenを使ってWebページを公開してみよう
  4. 今日のまとめ
  5. 演習：自分のポートフォリオを公開しよう
  6. 理解度チェック
  7. 完走おめでとうございます！

📚 レッスン

1. 最終チェックリスト（HTMLコードの確認）

自分の作成したページを、以下の項目でチェックしましょう。

✅ コーディング観点チェック

チェック項目 確認方法
<!DOCTYPE html> が宣言されているか ファイルの最初を確認
<head> に <meta charset="UTF-8"> があるか 日本語表示のために重要
タイトル <title> は設定されているか タブや検索結果に表示される
セクション構造タグ（<header> <main> <footer>など）が使われているか 意味ある構造にできているか
見出し <h1>〜<h3> を正しく使っているか 見出しの順序と意味の一貫性
画像に alt 属性があるか 読み上げソフトやSEO対策に重要
フォームのラベルや項目名はわかりやすいか 入力しやすい構成になっているか

2. HTML検証ツールを使ってみよう

🔗 W3C HTML Validator

使い方：

  1. 上記リンクを開く
  2. 「Validate by Direct Input」タブを選択
  3. 自分のHTMLファイルを貼り付けて「Check」

→ エラーや警告が出たら、内容を見て修正してみましょう！

3. CodePenを使ってWebページを公開してみよう

CodePenとは？

CodePen は、HTML/CSS/JavaScriptのコードをブラウザ上で編集・公開できる無料サービスです。

CodePenでページを公開する手順

1. CodePenにアクセス
2. エディター画面の構成を理解しよう
  • 3つの入力エリアがあります：
    • HTMLタブ：HTMLを書く場所
    • CSSタブ：スタイル（見た目）を定義する場所。今回は使いません
    • JSタブ：JavaScriptを定義する場所。今回は使いません
3. HTMLを入力してみよう

以下のHTMLをHTMLタブに入力してみましょう！

<h1>私のはじめてのWebページ</h1>
<p>CodePenで作成しました！</p>
4. 公開用URLを取得する
  • 右上の 「Save」または「Sign Up to Save」 をクリック
  • アカウント登録（無料）が必要になります
  • 登録後、「Save」ボタンが有効になり、自分の作品（Pen）にURLが付与されます

例: https://codepen.io/ユーザー名/pen/作品ID

✅ ワンポイント

  • アカウント登録をすると登録したメールアドレスに認証メールが送信されます。認証メールを確認して認証を完了させましょう。認証が完了しないと機能が制限されます
  • フルページビュー(full)にアクセスすると、全画面で表示されます（事前にメールアドレスの認証が完了していること）
    • 例： https://codepen.io/ユーザー名/full/作品ID
  • アカウントを作ると 複数の作品を管理したり、後から修正・再公開 ができます！

今日のまとめ

  • HTMLコードの最終チェックで品質を高められる
  • 検証ツールを使うとエラーや警告を発見できる
  • CodePenを使うと簡単にWebページを公開できる

📚 リファレンス

このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. 自分のポートフォリオを公開しよう

  1. レッスン9で作成した「自己紹介ページ（ポートフォリオ）」を使う
  2. 上記手順でCodePenに登録
  3. CodePenで公開URLを取得
  4. 自分のスマホや他人のPCで開いてみる！

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. HTMLの検証ツールは何のために使いますか？

2. CodePenを使ってできることは何ですか？

3. 画像タグに alt 属性を付ける理由として正しいものは？

🎉 完走おめでとうございます！

あなたはここまでで...

  • HTMLの基本構造・主要タグを理解し
  • 実用的なWebページを自力で作り
  • それを実際に インターネットに公開する ところまで体験しました！

今後のステップ

  • CSSを学ぶと 見た目を美しく カスタマイズできます
  • JavaScriptを学ぶと 動きのあるページ が作れます
  • HTML＋CSS＋JSで、より本格的なWeb制作に進めます！

学習お疲れさまでした！

この教材は、初心者の「最初の一歩」を応援するために作られました。
Webの世界を楽しみながら、これからも少しずつ前進していきましょう！

📘 次のステップ

「CSSの基礎」を学んで、作成したHTMLページをスタイリングしましょう！

« レッスン10へ戻る CSSコースへ進む »

インラインエディタ