0Pricing
HTML for Kids · レッスン

コードを書きながら学ぶ：簡単なWebページを作成する

手順に沿って、楽しいページを作成します

「コードを書きながら学ぶ：簡単なWebページを作成する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全2レッスンが含まれています。

最初のWebページを作ろう

一緒にコーディング: シンプルなWebページを作る

初めてのコーディングプロジェクトへようこそ！このレッスンでは、シンプルなWebページを手順に沿って作成します。HTML、CSS、基本的なデザインがどのように組み合わさるのかを確認しながら進めましょう。

目標: 自己紹介ページを作成します。

コードを書きながら学ぶ：簡単なWebページを作成する — イラスト1

ファイルを準備する

ステップ1: ファイルを準備する

まず、プロジェクト用のフォルダーを作成し、HTMLファイルを追加しましょう。

  1. コンピューター上にMyWebPageという名前の新しいフォルダーを作成します。
  2. そのフォルダー内に、index.htmlという名前のファイルを作成します。
  3. コードエディター（例: Visual Studio Code）でファイルを開きます。

ヒント: index.htmlというファイル名は、Webサイトのメインページによく使われます。

基本構造を追加する

ステップ2: 基本構造を追加する

次に、ファイルにHTMLの基本構造を追加します。ここには、<!DOCTYPE html>、<html>、<head>、<body>タグが含まれます。

例:

<!DOCTYPE html>
<html>
  <head>
    <title>My Profile Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is my personal profile page.</p>
  </body>
</html>

プロフィールセクションを追加する

ステップ3: プロフィールセクションを追加する

名前と簡単な説明を表示するセクションを追加しましょう。

例:

<body>
  <h1>Welcome to My Page</h1>
  <p>This is my personal profile page.</p>

  <!-- Profile Section -->
  <h2>About Me</h2>
  <p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>

画像を追加する

ステップ4: 画像を追加する

次に、<img>タグを使ってプロフィール画像を追加しましょう。画像をプロジェクトフォルダーに保存し、HTMLファイルからその画像にリンクします。

例:

<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />

趣味のリストを追加する

ステップ5: 趣味のリストを追加する

<ul>タグと<li>タグを使って、趣味の箇条書きリストを作成します。

例:

<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
  <li>Reading books</li>
  <li>Playing video games</li>
  <li>Coding projects</li>
</ul>

リンクを追加する

ステップ6: リンクを追加する

<a>タグを使って、お気に入りのWebサイトへのリンクを追加します。

例:

<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>

インラインスタイルを追加する

ステップ7: インラインスタイルを追加する

style属性を使って、HTMLに直接基本的なスタイルを追加しましょう。

例:

<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>

Webページプロジェクトのおさらい

よくできました！

おめでとうございます！初めてのWebページを手順に沿って作成できました。このプロジェクトでは、HTMLの構造を組み立て、コンテンツを追加し、インラインスタイルで見た目を整える方法を学びました。新しいセクションを追加しながら、いろいろ試してみましょう！

ヒント: GitHub Pagesでページをホスティングして、友達と共有してみましょう！

コードを書きながら学ぶ：簡単なWebページを作成する — イラスト10

よくある質問

「コードを書きながら学ぶ：簡単なWebページを作成する」レッスンは無料ですか？

はい。「コードを書きながら学ぶ：簡単なWebページを作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全2レッスンが含まれています。

「コードを書きながら学ぶ：簡単なWebページを作成する」で何を学びますか？

手順に沿って、楽しいページを作成します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/2です。

「コードを書きながら学ぶ：簡単なWebページを作成する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. コードを書きながら学ぶ：簡単なWebページを作成する
  2. HTML宝探し
← HTML for Kidsに戻る