見出しと段落
Webページにタイトルとテキストを追加します
「見出しと段落」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
見出しと段落
次のレッスンへようこそ！今日は、Webページに見出しと段落を追加する方法を学びます。これらの要素を使うと、コンテンツを整理して読みやすくできます。
見出しとは？
見出しは、Webページにタイトルや小見出しを作成するために使います。<h1>（最大）から<h6>（最小）まであります。
見出しは、コンテンツのアウトラインのようなものです。ページの構造をユーザーが理解するのに役立ちます。
例：
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>見出しを使う
Webページに見出しを追加してみましょう。次のコードを試して、見出しのサイズの違いを確認してください。
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>段落とは？
段落は、<p>タグを使ってWebページに追加するテキストのまとまりです。詳しい情報や説明を加えるのに適しています。
例：
<p>This is a paragraph of text on my web page. It’s great for sharing information with my visitors!</p>
複数の段落を追加する
複数の<p>タグを使うと、必要な数だけ段落を追加できます。
例：
<p>This is the first paragraph. It introduces my topic.</p>
<p>This is the second paragraph. It adds more details and examples.</p>
<p>This is the third paragraph. It concludes my thoughts.</p>
見出しと段落を組み合わせる
見出しと段落を組み合わせると、コンテンツが読みやすく、理解しやすくなります。タイトルには見出しを使い、詳しい情報には段落を使いましょう。
例：
<h1>Welcome to My Web Page</h1>
<p>This is a web page where I share my favorite recipes, hobbies, and stories.</p>
<h2>My Favorite Recipes</h2>
<p>I love baking cookies and cakes. Here’s a recipe for chocolate chip cookies!</p>
<h2>My Hobbies</h2>
<p>In my free time, I enjoy painting and playing video games.</p>
見出しと段落のベストプラクティス
次のポイントを覚えておきましょう。
- 1ページに<h1>を1つだけ使う：
<h1>タグはメインタイトルとして1回だけ使用します。 - コンテンツを整理する：小さい見出し（
<h2>、<h3>）を使ってセクションを分けます。 - 分かりやすい段落を書く：段落は短く、読みやすくまとめます。
自分で試してみる
見出しと段落を使った簡単なWebページを作ってみましょう。始めるときは、次の例を参考にしてください。
<!DOCTYPE html>
<html>
<head>
<title>Headings and Paragraphs</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the main paragraph introducing my page.</p>
<h2>About Me</h2>
<p>I’m learning HTML and enjoying the process!</p>
<h2>My Goals</h2>
<p>My goal is to create a professional-looking website someday.</p>
</body>
</html>
よくできました
素晴らしいです！Webページに見出しと段落を追加する方法を学びました。これらは、分かりやすく構造化されたコンテンツを作るために欠かせません。次のレッスンでは、情報を整理するリストの作成方法を学びます。さらに楽しく学んでいきましょう。
よくある質問
「見出しと段落」レッスンは無料ですか？
はい。「見出しと段落」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「見出しと段落」で何を学びますか？
Webページにタイトルとテキストを追加します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「見出しと段落」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。