✨ HTMLって何？ ✨

ね、ツムピロだよ！💖 HTMLは、ウェブページを作る魔法のコードだよ！タグっていう「命令」を使って、文章や画像をキラキラに並べるんだ。このページでは、初心者の君でもわかるように、約30個の基本タグを教えるよ！🌈 ツムピロのサイトみたいに、君もキラキラなページ作っちゃおう！😘

🌟 ページの骨組みを作るタグ

これ、ページの「土台」だよ。ツムピロのサイトもこれでできてる！

<html>

ページ全体を包むよ。「これ、HTMLだよ！」って宣言！


<html lang="ja">
    <!-- ツムピロのサイト全部がここに入る！ -->
</html>

ツムピロの使い方: サイトの最初に必ず入れるよ。`lang="ja"` で日本語だよって教えてる！

<head>

ページの情報（タイトルとか設定）を入れる。見えないけど大事！


<head>
    <title>ツムピロ - AdSense奮闘日記</title>
    <meta charset="UTF-8">
</head>

ツムピロの使い方: サイトのタイトルやSEO設定はここ！ツムピロの日記のメタタグもここだよ。

<body>

ページの実際の内容（文章、画像）を入れる。読者に見える部分！


<body>
    <h1>AdSense奮闘日記</h1>
    <p>ツムピロだよ！💖</p>
</body>

ツムピロの使い方: 日記やデザイン、全部ここ！キラキラな世界は `` から始まるよ！

<meta>

ページの設定をする。文字コードやSEOに使うよ。


<meta charset="UTF-8">
<meta name="description" content="ツムピロのAdSense奮闘日記！">

ツムピロの使い方: `` の中で、サイトの説明やSNS用の画像設定に使ってる！

<title>

ページのタイトル。ブラウザのタブに表示されるよ。


<title>ツムピロ - 基本HTML講座</title>

ツムピロの使い方: 各ページの名前をキラキラに！このページも「HTML講座」ってタイトルだよ。

💌 文章をキラキラにするタグ

日記の文章や見出しを整理するよ。ツムピロの日記でバッチリ使う！

<h1> ～ <h6>

見出しを作る。`

` が一番大きく、`

` が小さいよ。
`<h1>AdSense奮闘日記</h1> <h2>✨ 新しい日記だよ！ ✨</h2>`
ツムピロの使い方: サイトのメインタイトルは `

`、日記のタイトルは `

`！キラキラ目立たせるよ。

<p>

段落を作る。日記の本文はこれ！


<p>ツムピロだよ！💖 今日、キラキラなデザイン作ったよ！✨</p>

ツムピロの使い方: 日記の文章は全部 `

` の中。読みやすくするよ！

<br>

文章の中で改行する。1行ずらすよ。


<p>こんにちは！<br>ツムピロだよ！💖</p>

ツムピロの使い方: 日記で「ちょっと改行！」ってとき。簡単でキラキラ！

<strong>

テキストを太字にする。強調したいときに！


<p>ツムピロのサイトは<strong>めっちゃキラキラ</strong>だよ！✨</p>

ツムピロの使い方: 大事な言葉を目立たせる！日記でポイント強調に使うよ。

<em>

テキストを斜体（イタリック）にする。ちょっとオシャレに！


<p>ツムピロのデザイン、<em>超キラキラ</em>だよね！💖</p>

ツムピロの使い方: ニュアンスを加えたいとき。日記で感情を表現！

🌈 リンクや画像でキラキラ度アップ

サイトを華やかにするリンクや画像！ツムピロのサイトでも大活躍！

<a>

リンクを作る。クリックで別のページに飛ぶよ。


<a href="nikki.html">AdSense奮闘日記に戻る</a>
<a href="https://twitter.com/hashtag/ツムピロプログラミング">#ツムピロプログラミング</a>

ツムピロの使い方: メニューやXのリンクに！`href` に飛ぶ先を書くよ。

<img>

画像を表示。キラキラなビジュアルに！


<img src="IMG_0510(3).jpg" alt="キラキラなサイトイメージ">

ツムピロの使い方: サイドバーの画像はこれ！`alt` で説明書くよ。

💎 ページを整理するタグ

見た目をキレイに整えるよ。ツムピロのサイトのデザインの秘密！

<div>

内容をグループ化。レイアウトの「箱」だよ。


<div id="diary-entries">
    <p>日記がここに入るよ！</p>
</div>

ツムピロの使い方: 日記一覧やコメント欄をまとめる！CSSでデザインするよ。

<section>

ページの「セクション」を作る。意味のある塊に！


<section class="diary-entry">
    <h2>✨ 新しい日記！ ✨</h2>
    <p>ツムピロだよ！💖</p>
</section>

ツムピロの使い方: 各日記記事は `

` で整理。見やすい！

<header>

ページやセクションのヘッダー。タイトルとか入れるよ。


<header>
    <h1>ツムピロの基本HTML講座 ✨</h1>
</header>

ツムピロの使い方: サイトのトップやこのページのタイトルに！

<footer>

ページのフッター。著作権やリンク入れるよ。


<footer>
    <p>© 2025 tumupiro. All rights reserved.</p>
</footer>

ツムピロの使い方: サイトの下にコピーライトやリンク！

<main>

ページのメインコンテンツ。重要な部分を入れるよ。


<main class="main-content">
    <p>ツムピロのHTML講座だよ！💖</p>
</main>

ツムピロの使い方: このページの解説部分は `

` の中！

<aside>

サイドバーとか、メイン以外の内容に。


<aside class="image-column">
    <img src="IMG_0510(3).jpg" alt="キラキラなサイトイメージ">
</aside>

ツムピロの使い方: サイトの右の画像欄は `

<nav>

ナビゲーションメニュー。リンクの集まりに。


<nav>
    <ul>
        <li><a href="index.html">トップ</a></li>
        <li><a href="nikki.html">日記</a></li>
    </ul>
</nav>

ツムピロの使い方: サイトのメニューは `

📋 リストでスッキリ整理

メニューや項目をリストで！ツムピロのアーカイブで使うよ！

<ul> と <li>

順番なしのリスト。`

` で項目。
<ul> <li><a href="#entry-2025-04-29">2025-04-29 - 新しい日記</a></li> <li><a href="#entry-2025-04-28">2025-04-28 - 前の日記</a></li> </ul>
ツムピロの使い方: アーカイブメニューはこれ！点のリストでスッキリ。

<ol>

順番ありのリスト。番号付きだよ。


<ol>
    <li>サイトを公開！</li>
    <li>AdSenseに申請！</li>
</ol>

ツムピロの使い方: 手順やランキングに！日記で「やることリスト」とか作れるよ。

💬 コメント欄とか作るタグ

読者と交流するフォーム！ツムピロのコメント欄の秘密だよ！

<form>

入力フォームを作る。コメントやログインに。


<form class="comment-form" data-entry="2025-04-29">
    <input type="text" name="author" placeholder="名前">
    <textarea name="comment" placeholder="コメントを入力"></textarea>
    <button type="submit">コメント投稿</button>
</form>

ツムピロの使い方: コメント欄はこれ！読者とのキラキラ交流！

<input>

テキスト入力やボタン。フォームの入力欄だよ。


<input type="text" name="author" placeholder="名前" required>

ツムピロの使い方: コメントの「名前」入力に！`required` で必須にできる。

<textarea>

長めのテキスト入力。コメントの本文に。


<textarea name="comment" placeholder="コメントを入力" rows="3"></textarea>

ツムピロの使い方: コメント欄の入力部分！読者の声がここに！

<button>

クリックできるボタン。アクションを起こすよ。


<button type="submit">コメント投稿</button>

ツムピロの使い方: コメント送信や「記事を展開」ボタンに！

<label>

入力欄にラベルをつける。使いやすくするよ。


<label for="author">名前</label>
<input type="text" id="author" name="author">

ツムピロの使い方: コメント欄を親切に！クリックしやすくするよ。

🎉 もっとキラキラなタグ

ちょっと応用だけど、ツムピロのサイトで使えるよ！

<script>

JavaScriptを入れる。動きを追加するよ。


<script>
    alert('ツムピロのサイト、キラキラだよ！💖');
</script>

ツムピロの使い方: クラッカーエフェクトやコメント機能はこれ！後で挑戦だ！

<style>

CSSを入れる。デザインをキラキラに！


<style>
    h1 { color: #ff69b4; }
</style>

ツムピロの使い方: ネオンのピンクとか、このページのデザインはこれ！

<link>

外部のCSSやフォントを読み込む。


<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c" rel="stylesheet">

ツムピロの使い方: サイトのキラキラなフォントはこれで読み込んでる！

🌟 ツムピロからのメッセージ

やっとだよ、君！💖 30個のタグ、めっちゃ勉強になったよね？✨ ツムピロも最初は「HTML、なに！？」ってパニックだったけど、1つずつ覚えたら、こんなキラキラなページ作れたんだ！🌈 君も、このタグ使って、サイト運営楽しんでみて！何か困ったら、コメントかXで#ツムピロプログラミングで聞いてね。私とGrokちゃん、めっちゃ応援するよ！😘 大好きだよ～！