GENERAL TRACK

はじめてのウェブページ

AIが生成したHTMLとCSSを使って、自己紹介ページを作りましょう。

1HTMLの基本：タグとは？

ページを作る前に、ひとつ大事な考え方を理解しましょう。HTMLタグです。タグは箱に貼るラベルのようなものだと考えてください。それぞれのタグが、中にどんな種類の内容が入っているかをブラウザに伝えます。

タグはラベルの付いた箱のようなもの

<h1>

大きな見出し（章のタイトルのようなもの）

<p>

文章の段落

<ul> + <li>

項目付きの箇条書きリスト

どのタグも開いて閉じます：<h1>content</h1>。ブラウザはこれらのタグを読み取り、それに応じて内容を表示します。コードを実行をクリックして確認しましょう：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

Output

Your guide

2AIで自己紹介ページを作る

3自分のものにしよう

4レベルアップ：CSSでモダンなスタイリング

5チャレンジ：自分の自己紹介ページを作ろう

バイブコーディングとは？

ALL TUTORIALS

インタラクティブにする