PricingLoginStart free
HTML for Kids · レッスン

初めてのHTMLページを設定する

シンプルなテキストエディターを使って、初めてのHTMLコードを書きます。

レッスン 4/410 ステップ

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

最初のHTMLページを準備する

HTML学習の中でも、特に楽しみなパートへようこそ！今日は、HTMLページを最初から作成します。コードが形になっていく様子を見てみましょう。

初めてのHTMLページを設定する — イラスト1

必要なツール

HTMLページを作成するために必要なものは2つだけです。

  • テキストエディター：Notepad（Windows）、TextEdit（Mac）、その他のエディター（VS Codeなど）を使えます。
  • Webブラウザー：ページを表示するためのChrome、Firefoxなどのブラウザー。

さっそくコードを書いてみましょう。

テキストエディターを開く

手順1：テキストエディターを開く

1. テキストエディター（NotepadやVS Codeなど）を開きます。

2. 新しいファイルをindex.htmlとして保存します。.html拡張子を必ず付けてください。

これでHTMLコードを追加する準備ができました。

基本構造を書く

手順2：基本構造を書く

すべてのHTMLページには基本構造が必要です。次のコードをファイルに入力します。

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

見出しを追加する

手順3：見出しを追加する

<body>タグの内側に、ページの見出しを追加します。

<h1>Welcome to My First Web Page!</h1>

段落を追加する

手順4：段落を追加する

見出しの下に、ページの説明を段落として追加します。

<p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>

ページを保存して開く

手順5：ページを保存して開く

1. コードを書いたらファイルを保存します。

2. ブラウザーを開きます。

3. index.htmlファイルをブラウザーのウィンドウにドラッグ＆ドロップします。

これで、最初のWebページが公開されました。

完成したHTMLページ

最終的なコードは次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My First Web Page!</h1>
    <p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>My Awesome Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

よくできました

最初のHTMLページの作成、おめでとうございます！基本構造の準備、見出しの追加、段落の記述方法を学びました。次のレッスンでは、画像やリンクなど、さらに魅力的な要素をページに追加する方法を学びます。この調子で頑張りましょう。

初めてのHTMLページを設定する — イラスト10
無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
16
レッスン
35
無料で学習を始めるコース全体を表示

よくある質問

「初めてのHTMLページを設定する」レッスンは無料ですか？

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

「初めてのHTMLページを設定する」で何を学びますか？

シンプルなテキストエディターを使って、初めてのHTMLコードを書きます。 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「初めてのHTMLページを設定する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. HTMLとは？
  2. HTMLの構造：構成要素
  3. HTMLのタグと要素
  4. 初めてのHTMLページを設定する
← HTML for Kidsに戻る