"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", hr: "hr", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "HTML（HyperText Markup Language）は、ウェブページを作成するための標準マークアップ言語です。テキストコンテンツにタグを付加して文書の構造を定義し、リンク・画像・リスト・テーブルなどの要素を指定できます。CSS・JavaScript と組み合わせることで、見た目や動作をカスタマイズしたインタラクティブなウェブページを作成できます。" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. HTML の基本構造" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n ページのタイトル\n \n \n

これは見出しです

これは段落です。

\n これはリンクです\n \n\n" }) }), "\n", _jsx(_components.h3, { children: "基本要素の説明" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "備考" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ドキュメントタイプ宣言。このファイルが HTML5 であることをブラウザに伝える" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "必ず先頭に記述する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "HTML ドキュメント全体のルート要素" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "lang" }), " 属性で言語を指定する（SEO・アクセシビリティに重要）"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページのメタデータを含むセクション。ブラウザには表示されない" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "title・meta・link・script などを配置する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "文字エンコーディングを UTF-8 に指定する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "日本語を含む場合は必須" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スマートフォンでの表示スケールを制御する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "レスポンシブデザインに必須" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブラウザのタブ・ウィンドウタイトルに表示されるページ名" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "SEO に影響するため簡潔かつ明確に記述する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<body>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブラウザに実際に表示されるページの本文コンテンツを含むセクション" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "表示されるすべての要素はここに配置する" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. セマンティクスタグ（ページ構造）" }), "\n", _jsxs(_components.p, { children: ["セマンティクスタグとは、", _jsx(_components.strong, { children: "コンテンツの意味や役割を明示する" }), "タグです。検索エンジンや支援技術（スクリーンリーダー）がページの構造を正しく解釈できるようになります。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "<body>\n <header>...</header>\n <nav>...</nav>\n <main>\n <article>\n <section>...</section>\n </article>\n <aside>...</aside>\n </main>\n <footer>...</footer>\n</body>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "使用例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<header>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページまたはセクションの冒頭部分。サイトロゴ・タイトル・ナビゲーションを含む" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイト全体のヘッダー・記事の見出し部分" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<nav>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ナビゲーションリンクのまとまり。主要なページ移動リンクを含む" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "グローバルナビ・パンくずリスト・目次" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<main>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページのメインコンテンツ。1ページに1つだけ使用する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事本文・商品一覧・検索結果" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<article>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "単独で完結するコンテンツのまとまり。他のページに転載しても意味が通じる" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブログ記事・ニュース記事・コメント" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<section>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "関連するコンテンツのグループ。見出し（h2〜h6）を伴うのが一般的" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事内の章・LP のセクション" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<aside>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "メインコンテンツとは間接的に関連するサブコンテンツ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイドバー・関連記事・広告" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<footer>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページまたはセクションの末尾部分。著作権・問い合わせリンクを含む" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイト全体のフッター・記事の末尾" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["3. 見出しタグ（", _jsx(_components.code, { children: "h1" }), "〜", _jsx(_components.code, { children: "h6" }), "）"] }), "\n", _jsx(_components.p, { children: "見出しタグはページの階層構造を表します。SEO・アクセシビリティの両面で正しい使い方が重要です。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "<h1>サイトのメインタイトル</h1>\n <h2>大見出し（章）</h2>\n <h3>中見出し（節）</h3>\n <h4>小見出し（項）</h4>\n <h5>より小さい見出し</h5>\n <h6>最小の見出し</h6>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "レベル" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "用途・注意点" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h1>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最上位" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページ内に1つだけ使用する。ページの主題を表す最重要見出し（SEO に直結）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h2>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "第2レベル" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "大きな章の見出し。h1 の直下に使用する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h3>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "第3レベル" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "h2 の下位の節の見出し" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h4>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "第4レベル" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "h3 の下位。詳細な区分に使用する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h5>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "第5レベル" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "使用頻度は低い。深い階層構造が必要な場合に使用する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<h6>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最下位" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最も使用頻度が低い。実務では h4 以降はほとんど登場しない" })] })] })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "注意：" }), " 見出しレベルは必ず順番通りに使います。デザイン目的でレベルを飛ばす（h1 の次に h3 など）のはアクセシビリティ・SEO 上 NG です。"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "4. テキスト関連タグ" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "使用例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<p>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "段落（Paragraph）。テキストのまとまりを表す最も基本的なタグ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "本文の文章・説明テキスト" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<strong>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["重要性の高いテキストを示す。ブラウザは通常 ", _jsx("strong", { children: "太字" }), " で表示する"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "警告文・重要な単語の強調" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<em>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["強調（Emphasis）。文脈上の強調を表す。ブラウザは通常 ", _jsx("em", { children: "斜体" }), " で表示する"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アクセントとなる語句" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<small>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "補足的な情報・免責事項など、相対的に重要度の低いテキスト" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "著作権表示・注記" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<br>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "強制改行。終了タグなし" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "住所・詩などの改行が意味を持つ場合" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<hr>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "水平区切り線。話題の転換などを表す" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "セクション間の区切り" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<blockquote>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["他のソースからの引用ブロック。", _jsx("code", { children: "cite" }), " 属性で出典 URL を指定できる"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "外部記事・書籍の引用" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<code>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "インラインのコードを表す。等幅フォントで表示される" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "変数名・コマンドの記述" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<pre>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "整形済みテキスト。スペース・改行をそのまま表示する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "コードブロック（code と組み合わせて使用）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<time>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["日時を機械可読な形式で表す。", _jsx("code", { children: "datetime" }), " 属性に ISO 形式で指定する"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事の公開日・イベント日時" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<abbr>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["略語を表す。", _jsx("code", { children: "title" }), " 属性に正式名称を指定する"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "HTML・CSS などの略語" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<search>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "検索フォームのコンテナ。HTML 5.3 で追加されたセマンティクスタグ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイト内検索フォーム" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["5. コンテナタグ（", _jsx(_components.code, { children: "div" }), " / ", _jsx(_components.code, { children: "span" }), "）"] }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "種別" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "使いどころ" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<div>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブロック要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "意味を持たない汎用コンテナ。複数の要素をグループ化してレイアウトや CSS 適用に使う" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "セマンティクスタグが適さない場合のラッパー" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<span>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "インライン要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テキストの一部をグループ化してスタイルや JavaScript を適用する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "文中の一部分だけ色や装飾を変えたい場合" })] })] })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "原則：" }), " セマンティクスタグ（header / main / article など）で表現できる場合は、", _jsx(_components.code, { children: "div" }), " より意味を持つタグを優先して使います。", _jsx(_components.code, { children: "div" }), " と ", _jsx(_components.code, { children: "span" }), " は「意味がない」タグが必要な最後の手段として使います。"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "6. リストタグ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n<ul>\n <li>リンゴ</li>\n <li>バナナ</li>\n</ul>\n\n\n<ol>\n <li>最初のステップ</li>\n <li>次のステップ</li>\n</ol>\n\n\n<dl>\n <dt>HTML</dt>\n <dd>HyperText Markup Language の略。ウェブページの構造を定義する言語。</dd>\n</dl>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "使用例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<ul>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "順序なしリスト（Unordered List）。箇条書きで表示される" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "機能一覧・ナビゲーションメニュー" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<ol>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "順序ありリスト（Ordered List）。番号付きで表示される" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "手順・ランキング" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<li>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "リストの各項目（ul・ol の子要素として使用する）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "各リスト項目" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<dl>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "定義リスト（Definition List）。用語とその説明のペアを列挙する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "用語集・FAQ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<dt>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "定義される用語（Definition Term）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "用語名" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<dd>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "用語の説明・定義（Definition Description）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "用語の説明文" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "7. リンク・メディアタグ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">外部サイト</a>\n\n\n<img src=\"/images/photo.jpg\" alt=\"風景写真\" width=\"800\" height=\"600\" />\n\n\n<video src=\"/video/sample.mp4\" controls width=\"640\"></video>\n\n\n<audio src=\"/audio/sample.mp3\" controls></audio>\n\n\n<iframe src=\"https://www.youtube.com/embed/xxxxx\" title=\"動画\" allowfullscreen></iframe>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "主な属性" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<a>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アンカー。クリックで別ページや同ページ内の位置に移動するリンクを作成する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "href" }), "（移動先）/ ", _jsx("code", { children: "target=\"_blank\"" }), "（別タブ）/ ", _jsx("code", { children: "rel" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<img>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "画像を表示する。終了タグなし" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "src" }), "（画像 URL）/ ", _jsx("code", { children: "alt" }), "（代替テキスト・必須）/ ", _jsx("code", { children: "width" }), " / ", _jsx("code", { children: "height" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<figure>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "画像・図表などを本文から独立したコンテンツとして定義する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "img / video などを子要素に持つ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<figcaption>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "figure 要素のキャプション（説明文）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "figure の最初または最後の子要素に配置する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<video>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "動画コンテンツを埋め込む" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "src" }), " / ", _jsx("code", { children: "controls" }), "（操作UI）/ ", _jsx("code", { children: "autoplay" }), " / ", _jsx("code", { children: "muted" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<audio>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "音声コンテンツを埋め込む" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "src" }), " / ", _jsx("code", { children: "controls" }), " / ", _jsx("code", { children: "loop" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<iframe>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "外部ページや YouTube などを埋め込む" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "src" }), " / ", _jsx("code", { children: "title" }), "（必須）/ ", _jsx("code", { children: "allowfullscreen" })] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "8. フォームタグ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "<form action=\"/submit\" method=\"post\">\n <label for=\"name\">お名前</label>\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"山田太郎\" required />\n\n <label for=\"email\">メールアドレス</label>\n <input type=\"email\" id=\"email\" name=\"email\" required />\n\n <label for=\"message\">メッセージ</label>\n <textarea id=\"message\" name=\"message\" rows=\"5\"></textarea>\n\n <button type=\"submit\">送信する</button>\n</form>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ / type" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "主な属性" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<form>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォーム全体のコンテナ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "action" }), "（送信先）/ ", _jsx("code", { children: "method" }), "（get / post）"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<label>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["入力欄のラベル。", _jsx("code", { children: "for" }), " 属性で input と紐付ける"] }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "for" }), "（input の id を指定）"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"text\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "1行テキスト入力欄" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "placeholder" }), " / ", _jsx("code", { children: "required" }), " / ", _jsx("code", { children: "maxlength" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"email\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "メールアドレス入力欄（形式バリデーション付き）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "required" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"password\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パスワード入力欄（入力値がマスクされる）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "required" }), " / ", _jsx("code", { children: "minlength" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"checkbox\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "チェックボックス（複数選択可）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "checked" }), "（初期選択）/ ", _jsx("code", { children: "value" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"radio\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ラジオボタン（同一 name の中から1つだけ選択）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "name" }), "（グループ名）/ ", _jsx("code", { children: "value" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<input type=\"file\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ファイルアップロード欄" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "accept" }), "（許可するファイル形式）/ ", _jsx("code", { children: "multiple" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<textarea>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "複数行テキスト入力欄" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "rows" }), " / ", _jsx("code", { children: "cols" }), " / ", _jsx("code", { children: "placeholder" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<select>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ドロップダウン選択欄。子要素に option を持つ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "name" }), " / ", _jsx("code", { children: "multiple" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<button type=\"submit\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォームを送信するボタン" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "type" }), "（submit / reset / button）/ ", _jsx("code", { children: "disabled" })] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "9. テーブルタグ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "<table>\n <caption>売上一覧</caption>\n <thead>\n <tr>\n <th scope=\"col\">月</th>\n <th scope=\"col\">売上</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>1月</td>\n <td>100万円</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <td>合計</td>\n <td>100万円</td>\n </tr>\n </tfoot>\n</table>\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<table>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブル全体のコンテナ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<caption>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブルのタイトル・説明（アクセシビリティ上推奨）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<thead>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブルのヘッダー行グループ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<tbody>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブルの本文行グループ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<tfoot>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブルのフッター行グループ（合計行など）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<tr>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テーブルの行（Table Row）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<th>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["ヘッダーセル。", _jsx("code", { children: "scope=\"col\"" }), " または ", _jsx("code", { children: "scope=\"row\"" }), " でスクリーンリーダーに方向を伝える"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<td>" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["データセル。", _jsx("code", { children: "colspan" }), " / ", _jsx("code", { children: "rowspan" }), " で結合できる"] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "10. head 内で使う主なタグ" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タグ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "役割" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<meta name=\"description\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "検索結果に表示されるページ説明文（SEO に重要）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "content=\"ページの概要テキスト\"" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<meta property=\"og:title\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "OGP タイトル。SNS シェア時のタイトルに使われる" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Open Graph Protocol" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<link rel=\"stylesheet\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "外部 CSS ファイルを読み込む" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "href=\"/style.css\"" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<link rel=\"canonical\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "正規 URL を指定する（重複コンテンツ対策）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsxs("code", { children: ["href=\"", _jsx(_components.a, { href: "https://example.com/page", children: "https://example.com/page" }), "\""] }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<link rel=\"icon\">" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブラウザのタブに表示されるファビコンを指定する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "href=\"/favicon.ico\"" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "<script>" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "JavaScript を読み込む・記述する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "src=\"/main.js\" defer" }) })] })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; </article></body></html>

HTML について