HTML(Hypertext Markup Language)は、ウェブページの構造を作成するための基本的な言語です。HTMLを使用することで、テキスト、画像、リンク、フォーム、ビデオなど、ウェブページに必要な要素を配置し、ユーザーに視覚的に表示することができます。以下では、HTMLの基礎から応用までを包括的に解説します。

1. HTMLの基本構造

HTML文書は、基本的に次のような構造を持っています。

html
html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページタイトルtitle> head> <body> <h1>こんにちは、世界!h1> <p>これはHTMLの基本的なページです。p> body> html>

・

HTML5文書であることをブラウザに伝える宣言です。

・

HTML文書の開始を示すタグです。lang="ja"は日本語であることを示します。

・

ページに関するメタ情報を含むセクションです。タイトル、文字セット、外部CSSやJavaScriptファイルのリンクなどを含みます。

・

文字エンコードをUTF-8に設定するタグです。日本語を正しく表示するために重要です。

・</code></h4> <p data-start="762" data-end="789">ブラウザタブに表示されるページのタイトルを設定します。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h4 data-start="791" data-end="807">・<code data-start="797" data-end="805"><body></code></h4> <p data-start="808" data-end="855">実際のコンテンツが含まれる部分です。テキスト、画像、リンク、フォームなどがここに記述されます。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h3 data-start="857" data-end="876">2. よく使われるHTMLタグ</h3> <p data-start="878" data-end="911">HTMLには様々なタグがあります。以下はよく使われるタグの例です。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h4 data-start="913" data-end="924">・見出しタグ</h4> <p data-start="925" data-end="1006">HTMLでは、<code data-start="932" data-end="938"></p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h2></code>から<code data-start="940" data-end="946"></p> <h6></code>までの6段階の見出しタグを使うことができます。<code data-start="969" data-end="975"></p> <h2></code>は最も重要な見出し、<code data-start="985" data-end="991"></p> <h6></code>は最も低い重要度の見出しです。</p> <pre class="!overflow-visible" data-start="1008" data-end="1066"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>主見出し<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>副見出し<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>さらに小さな見出し<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> </span></code></div></div></pre> <h4 data-start="1068" data-end="1085">・段落タグ(<code data-start="1079" data-end="1084"></p> <p></code>)</h4> <p data-start="1086" data-end="1106">段落を作成するために使用されるタグです。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1108" data-end="1140"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>これは段落のテキストです。<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </span></code></div></div></pre> <h4 data-start="1142" data-end="1160">・リンクタグ(<code data-start="1154" data-end="1159"><a></code>)</h4> <p data-start="1161" data-end="1193">他のウェブページやリソースへのリンクを作成するために使用します。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1195" data-end="1260"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.example.com"</span>></span>Exampleのウェブサイトへ<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </span></code></div></div></pre> <h4 data-start="1262" data-end="1281">・画像タグ(<code data-start="1273" data-end="1280"><img></code>)</h4> <p data-start="1282" data-end="1337">画像を埋め込むためのタグです。<code data-start="1297" data-end="1302">src</code>属性で画像のURLを指定し、<code data-start="1316" data-end="1321">alt</code>属性で代替テキストを設定します。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1339" data-end="1384"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"説明文"</span> /></span> </span></code></div></div></pre> <h4 data-start="1386" data-end="1397">・リストタグ</h4> <p data-start="1398" data-end="1466">HTMLには順序付きリスト(<code data-start="1412" data-end="1418"></p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <ol></code>)と順序なしリスト(<code data-start="1428" data-end="1434"></p> <ul></code>)があります。リスト項目は<code data-start="1447" data-end="1453"></p> <li></code>タグを使用して作成します。</p> <p data-start="1468" data-end="1482">順序付きリスト(番号付き):</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1484" data-end="1542"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>一番目の項目<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>二番目の項目<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span> </span></code></div></div></pre> <p data-start="1544" data-end="1558">順序なしリスト(箇条書き):</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1560" data-end="1612"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>項目1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>項目2<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </span></code></div></div></pre> <h4 data-start="1614" data-end="1626">・テーブルタグ</h4> <p data-start="1627" data-end="1698">データを表形式で表示するために使用します。<code data-start="1648" data-end="1657"></p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <table></code>, <code data-start="1659" data-end="1665"></p> <tr></code>, <code data-start="1667" data-end="1673"></p> <td></code>, <code data-start="1675" data-end="1681"></p> <th></code>タグを使ってテーブルを作成します。</p> <pre class="!overflow-visible" data-start="1700" data-end="1869"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">table</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>名前<span class="hljs-tag"></<span class="hljs-name">th</span>></span> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>年齢<span class="hljs-tag"></<span class="hljs-name">th</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>田中<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>25<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>鈴木<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>30<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"></<span class="hljs-name">table</span>></span> </span></code></div></div></pre> <h3 data-start="1871" data-end="1885">3. HTMLの属性</h3> <p data-start="1887" data-end="1935">HTMLタグには、動作や表示を調整するための「属性」を設定できます。以下はよく使われる属性です。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h4 data-start="1937" data-end="1952">・<code data-start="1943" data-end="1950">class</code>属性</h4> <p data-start="1953" data-end="1981">複数の要素に共通のスタイルを適用するために使用されます。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="1983" data-end="2033"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"important"</span>></span>これは重要なテキストです。<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </span></code></div></div></pre> <h4 data-start="2035" data-end="2047">・<code data-start="2041" data-end="2045">id</code>属性</h4> <p data-start="2048" data-end="2075">HTML内で一意の識別子を設定するために使用されます。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="2077" data-end="2121"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"header"</span>></span>ここはヘッダー部分<span class="hljs-tag"></<span class="hljs-name">div</span>></span> </span></code></div></div></pre> <h4 data-start="2123" data-end="2138">・<code data-start="2129" data-end="2136">style</code>属性</h4> <p data-start="2139" data-end="2163">要素にインラインCSSを適用するための属性です。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="2165" data-end="2213"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: red;"</span>></span>赤いテキストです。<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </span></code></div></div></pre> <h4 data-start="2215" data-end="2229">・<code data-start="2221" data-end="2227">href</code>属性</h4> <p data-start="2230" data-end="2251"><code data-start="2230" data-end="2235"><a></code>タグの中でリンク先を指定します。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="2253" data-end="2310"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.example.com"</span>></span>Example<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </span></code></div></div></pre> <h3 data-start="2312" data-end="2325">4. フォームタグ</h3> <p data-start="2327" data-end="2427">HTMLフォームは、ユーザーから情報を収集するために使われます。<code data-start="2359" data-end="2367"></p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <form></code>, <code data-start="2369" data-end="2378"><input></code>, <code data-start="2380" data-end="2392"><textarea></code>, <code data-start="2394" data-end="2404"><select></code>, <code data-start="2406" data-end="2416"><button></code>などのタグがあります。</p> <pre class="!overflow-visible" data-start="2429" data-end="2607"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/submit"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"name"</span>></span>名前:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">required</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>送信<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></code></div></div></pre> <h3 data-start="2609" data-end="2627">5. HTML5の新しい要素</h3> <p data-start="2629" data-end="2696">HTML5では、意味論的により明確なタグが追加されました。これにより、ウェブページの構造がより理解しやすく、SEOにも有利になります。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <h4 data-start="2698" data-end="2771">・<code data-start="2704" data-end="2714"></p> <header></code>, <code data-start="2716" data-end="2726"></p> <footer></code>, <code data-start="2728" data-end="2736"><main></code>, <code data-start="2738" data-end="2749"></p> <section></code>, <code data-start="2751" data-end="2762"></p> <article></code>, <code data-start="2764" data-end="2771"></p> <nav></code></h4> <p data-start="2773" data-end="2797">これらはページの異なる部分を表すためのタグです。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="2799" data-end="2973"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>サイトのヘッダー<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"></<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>記事タイトル<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>記事の内容...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">article</span>></span> <span class="hljs-tag"></<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">footer</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-symbol">©</span> 2025 会社名<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">footer</span>></span> </span></code></div></div></pre> <h3 data-start="2975" data-end="2995">6. HTMLのアクセシビリティ</h3> <p data-start="2997" data-end="3088">アクセシビリティは、障害を持つユーザーにもウェブサイトを利用できるようにするために重要です。例えば、画像に代替テキストを追加したり、フォームのラベルを明確にしたりすることが必要です。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> <pre class="!overflow-visible" data-start="3090" data-end="3135"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-[5px] h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div><div class="sticky top-9 md:top-[5.75rem]"><div class="absolute bottom-0 right-2 flex h-9 items-center"><div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"><span class="" data-state="closed"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button></span><span class="" data-state="closed"><button class="flex select-none items-center gap-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"画像の説明"</span>></span> </span></code></div></div></pre> <h3 data-start="3137" data-end="3158">7. HTMLのベストプラクティス</h3> <ul data-start="3160" data-end="3278"> <li data-start="3160" data-end="3178">HTMLタグは必ず適切に閉じる。</li> <li data-start="3179" data-end="3205">インデントを適切に使用してコードを見やすく保つ。</li> <li data-start="3206" data-end="3240">セマンティックタグを活用して、意味のあるウェブページ構造を作る。</li> <li data-start="3241" data-end="3278">画像やリンクには代替テキストを設定して、アクセシビリティを向上させる。</li> </ul> <h3 data-start="3280" data-end="3286">結論</h3> <p data-start="3288" data-end="3445" data-is-last-node="" data-is-only-node="">HTMLは、ウェブページを構築するための基本的なスキルです。タグや属性を理解し、HTML5の新しい要素を活用することで、より意味のある、視覚的にも魅力的なウェブページを作成することができます。HTMLは他の技術(CSSやJavaScript)と組み合わせて、さらに強力なウェブサイトを作成するための基盤となります。</p><div class="bunkao-paragraph-ad" data-bunkao-ad><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins></div> </div> </div> </div> </div><div class="article-tags"><a href="https://bunkao.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/">プログラミング</a></div><div class="article-tools"><p>この読みものをシェア</p><div><button class="button button-small button-outline" data-copy="https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%b4%bb%e7%94%a8%e6%b3%95-3/"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 4V3H3v13h1"/></svg> リンクをコピー</button><a class="button button-small button-outline" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fbunkao.com%2Fhtml%25e3%2581%25ae%25e5%259f%25ba%25e6%259c%25ac%25e3%2581%25a8%25e6%25b4%25bb%25e7%2594%25a8%25e6%25b3%2595-3%2F" target="_blank" rel="noopener noreferrer">LINE</a><button class="button button-small button-outline" data-share data-url="https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%b4%bb%e7%94%a8%e6%b3%95-3/" data-title="HTMLの基本と活用法">共有する</button></div><p class="tool-status" role="status"></p></div><section class="report-prompt"><div><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 22V3h14l-3 4 3 4H5"/></svg><h2>気になる点を、教えてください。</h2><p>誤りや古い情報、権利に関するご連絡はこちらから。</p></div><button class="button button-outline" data-report-open>内容を報告する <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></button><a class="muted" href="https://bunkao.com/report/?article=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%b4%bb%e7%94%a8%e6%b3%95-3/">報告ページを開く</a></section><div class="article-policy"><a href="https://bunkao.com/%e7%b7%a8%e9%9b%86%e6%96%b9%e9%87%9d/">編集方針</a><a href="https://bunkao.com/%e8%a8%82%e6%ad%a3%e3%83%9d%e3%83%aa%e3%82%b7%e3%83%bc/">訂正ポリシー</a><a href="https://bunkao.com/disclaimer/">免責事項</a></div></article><aside class="article-aside" aria-label="テーマと今日の日本"><details class="article-sidebar-disclosure" open><summary>テーマと、今日の日本 <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></summary><div class="article-sidebar-stack" style="--topic-accent:#405c83;--topic-tint:#e6ebf3;"><section class="aside-note"><span class="topic-kanji" aria-hidden="true">知</span><h2>次の好奇心へ。</h2><p>テーマから、新しい読みものを見つけませんか。</p><a class="text-link" href="https://bunkao.com/categories/">カテゴリーを見る <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a></section><section class="sidebar-card sidebar-topics"><p class="eyebrow">テーマをひらく</p><h2>おすすめのカテゴリー</h2><nav aria-label="おすすめのカテゴリー"><a href="https://bunkao.com/category/%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/"><span class="sidebar-category-symbol" aria-hidden="true" style="--topic-accent:#405c83;--topic-tint:#e6ebf3;">アプ</span><span>アプリケーション<small>858の読みもの</small></span><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a><a href="https://bunkao.com/category/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/"><span class="sidebar-category-symbol" aria-hidden="true" style="--topic-accent:#405c83;--topic-tint:#e6ebf3;">デジ</span><span>デジタルデザイン<small>829の読みもの</small></span><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a><a href="https://bunkao.com/category/%e9%96%8b%e7%99%ba%e9%81%8b%e7%94%a8/"><span class="sidebar-category-symbol" aria-hidden="true" style="--topic-accent:#405c83;--topic-tint:#e6ebf3;">開発</span><span>開発運用<small>751の読みもの</small></span><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a><a href="https://bunkao.com/category/%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/"><span class="sidebar-category-symbol" aria-hidden="true" style="--topic-accent:#405c83;--topic-tint:#e6ebf3;">ネッ</span><span>ネットワーク<small>478の読みもの</small></span><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a></nav></section><section class="sidebar-card sidebar-almanac" data-side-day><p class="eyebrow">今日の日本</p><h2>暦のひとこと</h2><time class="sidebar-day-date" data-side-date datetime="2026-10-27">2026年10月27日(火)</time><div class="sidebar-day-event"><span data-side-day-kind>今日の暦</span><strong data-side-day-event>今日は国民の祝日ではありません。</strong></div><p class="sidebar-next-day" data-side-next-day>次の祝日:11-03 文化の日</p><a class="text-link" href="https://bunkao.com/japan-calendar/">日本の暦を見る <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a></section><script type="application/json" id="bunkao-holiday-data">{"2025-01-01":"\u5143\u65e5","2025-01-13":"\u6210\u4eba\u306e\u65e5","2025-02-11":"\u5efa\u56fd\u8a18\u5ff5\u306e\u65e5","2025-02-23":"\u5929\u7687\u8a95\u751f\u65e5","2025-02-24":"\u4f11\u65e5","2025-03-20":"\u6625\u5206\u306e\u65e5","2025-04-29":"\u662d\u548c\u306e\u65e5","2025-05-03":"\u61b2\u6cd5\u8a18\u5ff5\u65e5","2025-05-04":"\u307f\u3069\u308a\u306e\u65e5","2025-05-05":"\u3053\u3069\u3082\u306e\u65e5","2025-05-06":"\u4f11\u65e5","2025-07-21":"\u6d77\u306e\u65e5","2025-08-11":"\u5c71\u306e\u65e5","2025-09-15":"\u656c\u8001\u306e\u65e5","2025-09-23":"\u79cb\u5206\u306e\u65e5","2025-10-13":"\u30b9\u30dd\u30fc\u30c4\u306e\u65e5","2025-11-03":"\u6587\u5316\u306e\u65e5","2025-11-23":"\u52e4\u52b4\u611f\u8b1d\u306e\u65e5","2025-11-24":"\u4f11\u65e5","2026-01-01":"\u5143\u65e5","2026-01-12":"\u6210\u4eba\u306e\u65e5","2026-02-11":"\u5efa\u56fd\u8a18\u5ff5\u306e\u65e5","2026-02-23":"\u5929\u7687\u8a95\u751f\u65e5","2026-03-20":"\u6625\u5206\u306e\u65e5","2026-04-29":"\u662d\u548c\u306e\u65e5","2026-05-03":"\u61b2\u6cd5\u8a18\u5ff5\u65e5","2026-05-04":"\u307f\u3069\u308a\u306e\u65e5","2026-05-05":"\u3053\u3069\u3082\u306e\u65e5","2026-05-06":"\u4f11\u65e5","2026-07-20":"\u6d77\u306e\u65e5","2026-08-11":"\u5c71\u306e\u65e5","2026-09-21":"\u656c\u8001\u306e\u65e5","2026-09-22":"\u4f11\u65e5","2026-09-23":"\u79cb\u5206\u306e\u65e5","2026-10-12":"\u30b9\u30dd\u30fc\u30c4\u306e\u65e5","2026-11-03":"\u6587\u5316\u306e\u65e5","2026-11-23":"\u52e4\u52b4\u611f\u8b1d\u306e\u65e5","2027-01-01":"\u5143\u65e5","2027-01-11":"\u6210\u4eba\u306e\u65e5","2027-02-11":"\u5efa\u56fd\u8a18\u5ff5\u306e\u65e5","2027-02-23":"\u5929\u7687\u8a95\u751f\u65e5","2027-03-21":"\u6625\u5206\u306e\u65e5","2027-03-22":"\u4f11\u65e5","2027-04-29":"\u662d\u548c\u306e\u65e5","2027-05-03":"\u61b2\u6cd5\u8a18\u5ff5\u65e5","2027-05-04":"\u307f\u3069\u308a\u306e\u65e5","2027-05-05":"\u3053\u3069\u3082\u306e\u65e5","2027-07-19":"\u6d77\u306e\u65e5","2027-08-11":"\u5c71\u306e\u65e5","2027-09-20":"\u656c\u8001\u306e\u65e5","2027-09-23":"\u79cb\u5206\u306e\u65e5","2027-10-11":"\u30b9\u30dd\u30fc\u30c4\u306e\u65e5","2027-11-03":"\u6587\u5316\u306e\u65e5","2027-11-23":"\u52e4\u52b4\u611f\u8b1d\u306e\u65e5"}</script><section class="sidebar-card regional-weather" data-regional-weather><p class="eyebrow">日本の各地</p><h2>全国の天気便り</h2><p class="sidebar-widget-caption">主要10都市の予報</p><div class="regional-weather-list"><a class="regional-weather-row" data-weather-region="sapporo" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=016000" target="_blank" rel="noopener noreferrer"><span class="weather-place">北海道<small>札幌</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="sendai" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=040000" target="_blank" rel="noopener noreferrer"><span class="weather-place">東北<small>仙台</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="tokyo" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=130000" target="_blank" rel="noopener noreferrer"><span class="weather-place">関東<small>東京</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="niigata" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=150000" target="_blank" rel="noopener noreferrer"><span class="weather-place">北陸<small>新潟</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="nagoya" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=230000" target="_blank" rel="noopener noreferrer"><span class="weather-place">東海<small>名古屋</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="osaka" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=270000" target="_blank" rel="noopener noreferrer"><span class="weather-place">近畿<small>大阪</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="hiroshima" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=340000" target="_blank" rel="noopener noreferrer"><span class="weather-place">中国<small>広島</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="takamatsu" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=370000" target="_blank" rel="noopener noreferrer"><span class="weather-place">四国<small>高松</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="fukuoka" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=400000" target="_blank" rel="noopener noreferrer"><span class="weather-place">九州<small>福岡</small></span><span class="regional-weather-result" data-region-result>—</span></a><a class="regional-weather-row" data-weather-region="naha" href="https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=471000" target="_blank" rel="noopener noreferrer"><span class="weather-place">沖縄<small>那覇</small></span><span class="regional-weather-result" data-region-result>—</span></a></div><p class="regional-weather-status" data-regional-weather-status role="status">都市名から、気象庁の詳しい予報へ。</p><a class="sidebar-source" href="https://www.jma.go.jp/bosai/forecast/" target="_blank" rel="noopener noreferrer">出典:気象庁(表示を編集) ↗</a><noscript><p class="sidebar-widget-caption">各都市を選ぶと気象庁の詳しい予報を確認できます。</p></noscript></section></div></details></aside></div><section class="section related-section"><div class="section-title"><div><p class="eyebrow">あわせて読みたい</p><h2>同じテーマの読みもの</h2></div></div><div class="story-grid"> <article class="story-card"> <div class="story-meta"><span class="story-number">01</span><span>プログラミング</span><time datetime="2025-04-28T18:36:26+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/laravel-%e3%83%9e%e3%82%a4%e3%82%b0%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/">Laravel マイグレーション完全ガイド</a></h3> <a class="story-link" href="https://bunkao.com/laravel-%e3%83%9e%e3%82%a4%e3%82%b0%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/" aria-label="Laravel マイグレーション完全ガイドを読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> <article class="story-card"> <div class="story-meta"><span class="story-number">02</span><span>プログラミング</span><time datetime="2025-04-28T18:32:40+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/node-js-%e3%81%a8-express-%e3%81%a7%e3%83%96%e3%83%ad%e3%82%b0%e4%bd%9c%e6%88%90/">Node.js と Express でブログ作成</a></h3> <a class="story-link" href="https://bunkao.com/node-js-%e3%81%a8-express-%e3%81%a7%e3%83%96%e3%83%ad%e3%82%b0%e4%bd%9c%e6%88%90/" aria-label="Node.js と Express でブログ作成を読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> <article class="story-card"> <div class="story-meta"><span class="story-number">03</span><span>プログラミング</span><time datetime="2025-04-28T18:28:55+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/html%e3%82%92wordpress%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ab%e5%a4%89%e6%8f%9b/">HTMLをWordPressテーマに変換</a></h3> <a class="story-link" href="https://bunkao.com/html%e3%82%92wordpress%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ab%e5%a4%89%e6%8f%9b/" aria-label="HTMLをWordPressテーマに変換を読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> <article class="story-card"> <div class="story-meta"><span class="story-number">04</span><span>プログラミング</span><time datetime="2025-04-28T18:25:12+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/javascript%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%ad%e8%a8%88%e3%81%ae%e5%9f%ba%e6%9c%ac/">JavaScriptコード設計の基本</a></h3> <a class="story-link" href="https://bunkao.com/javascript%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%ad%e8%a8%88%e3%81%ae%e5%9f%ba%e6%9c%ac/" aria-label="JavaScriptコード設計の基本を読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> <article class="story-card"> <div class="story-meta"><span class="story-number">05</span><span>プログラミング</span><time datetime="2025-04-28T18:21:29+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/express%e3%81%a7%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e7%ae%a1%e7%90%86%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0/">Expressでユーザー管理システム</a></h3> <a class="story-link" href="https://bunkao.com/express%e3%81%a7%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e7%ae%a1%e7%90%86%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0/" aria-label="Expressでユーザー管理システムを読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> <article class="story-card"> <div class="story-meta"><span class="story-number">06</span><span>プログラミング</span><time datetime="2025-04-28T18:17:46+09:00">2025.04.28</time></div> <h3><a href="https://bunkao.com/express-%e3%83%ab%e3%83%bc%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%ae%e5%9f%ba%e6%9c%ac/">Express ルーティングの基本</a></h3> <a class="story-link" href="https://bunkao.com/express-%e3%83%ab%e3%83%bc%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%ae%e5%9f%ba%e6%9c%ac/" aria-label="Express ルーティングの基本を読む">記事を読む <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></a> </article> </div></section></div> <dialog class="report-dialog" id="report-dialog" aria-labelledby="report-dialog-title"><button class="dialog-close" aria-label="閉じる">×</button><p class="eyebrow">読者からのご連絡</p><h2 id="report-dialog-title">この記事の内容を報告する</h2><p>気になる箇所を具体的にお知らせください。</p> <form class="bunkao-form" method="post" action="https://bunkao.com/wp-admin/admin-post.php" data-bunkao-form> <input type="hidden" name="action" value="bunkao_submit"><input type="hidden" name="kind" value="report"><input type="hidden" name="bunkao_nonce" value="334e552884"><input type="hidden" name="bunkao_token" value="1793111720.6aedee91643cdce3988e10d856e09108aa205cc02cd493b28145d3c2b8e61637"> <div class="form-status" role="status" tabindex="-1"></div> <div class="form-row"><label for="bunkao-report-2name">お名前 <span>任意</span></label><input type="text" name="name" id="bunkao-report-2name" maxlength="120" autocomplete="name"></div> <div class="form-row"><label for="bunkao-report-2reason">ご報告の種類 <span>必須</span></label><select name="reason" id="bunkao-report-2reason" required><option value="">選択してください</option><option value="accuracy">情報の誤り・更新のお願い</option><option value="rights">著作権・権利に関するご連絡</option><option value="expression">表現について</option><option value="display">表示・リンクの不具合</option><option value="other">その他</option></select></div> <div class="form-row"><label for="bunkao-report-2article">該当ページのURL <span>必須</span></label><input type="url" name="article_url" id="bunkao-report-2article" value="https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%b4%bb%e7%94%a8%e6%b3%95-3/" maxlength="2000" required><p class="field-help">文化(bunkao.com)のページURLを入力してください。</p></div> <div class="form-row"><label for="bunkao-report-2message">具体的な内容・該当箇所 <span>必須</span></label><textarea name="message" id="bunkao-report-2message" rows="6" minlength="10" maxlength="10000" required placeholder="気になる箇所と、確認できる資料があればURLをお知らせください。"></textarea><p class="field-help">10〜10,000文字。パスワードや機微な個人情報は送信しないでください。</p></div> <div class="form-honeypot" aria-hidden="true"><label>Website<input name="website" tabindex="-1" autocomplete="off"></label></div> <label class="form-consent"><input type="checkbox" name="privacy" value="1" required><span><a href="https://bunkao.com/privacy-policy/" target="_blank" rel="noopener">プライバシーポリシー</a>を確認し、内容の確認と返信のための情報利用に同意します。</span></label> <p class="field-help">送信内容は公開されません。返信はサイト内で確認できます。送信後の確認リンクを保存してください。通常は受付から90日以内に削除します。</p><button class="button" type="submit">送信する <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></button><noscript><p>JavaScriptを使用しない場合も送信できます。送信後のページのURLを保存し、確認フォームに貼り付けてご利用ください。</p></noscript></form> </dialog> </main> <footer class="site-footer"><div class="wrap footer-grid"><div class="footer-brand"><a href="https://bunkao.com/"><img src="https://bunkao.com/wp-content/themes/bunkao/assets/logo.svg" width="240" height="88" alt="文化 BUNKAO"></a><p>日本を想う。世界を知る。</p><p class="footer-description">読むたびに、世界が少し広がる。<br>日本語で届ける、日々の読みもの。</p></div><div><h2>読みものを探す</h2><a href="https://bunkao.com/last-article/">最新の記事</a><a href="https://bunkao.com/categories/">カテゴリー一覧</a><a href="https://bunkao.com/japan-calendar/">日本の暦・祝日</a><a href="https://bunkao.com/japan-phone-directory/">日本の電話帳</a><a href="https://bunkao.com/site-guide/">サイトの使い方</a><a href="https://bunkao.com/site-search/">記事を検索</a></div><div><h2>文化について</h2><a href="https://bunkao.com/about-us/">私たちについて</a><a href="https://bunkao.com/%e7%b7%a8%e9%9b%86%e6%96%b9%e9%87%9d/">編集方針</a><a href="https://bunkao.com/%e5%9f%b7%e7%ad%86%e8%80%85%e3%83%bb%e7%b7%a8%e9%9b%86%e3%83%81%e3%83%bc%e3%83%a0/">執筆・編集について</a><a href="https://bunkao.com/diversity-policy/">多様性方針</a><a href="https://bunkao.com/%e9%81%8b%e5%96%b6%e8%80%85%e6%83%85%e5%a0%b1/">運営者情報</a><a href="https://bunkao.com/contact-us/">お問い合わせ</a></div><div><h2>ご利用案内</h2><a href="https://bunkao.com/contact-status/">お問い合わせの確認</a><a href="https://bunkao.com/report/">内容の報告・訂正依頼</a><a href="https://bunkao.com/faq/">よくある質問</a><a href="https://bunkao.com/privacy-policy/">プライバシー</a><a href="https://bunkao.com/terms-and-conditions/">利用規約</a><a href="https://bunkao.com/information-policies-and-terms/">情報・ポリシー一覧</a></div></div><div class="wrap footer-bottom"><p>© 2026 文化 / BUNKAO</p><div><a href="https://bunkao.com/accessibility/">アクセシビリティ</a><a href="https://bunkao.com/disclaimer/">免責事項</a><a href="#main-content">ページの先頭へ ↑</a></div></div></footer> <button type="button" class="privacy-settings-link" data-privacy-open aria-haspopup="dialog">Cookie設定</button> <section class="privacy-banner" data-privacy-banner hidden aria-labelledby="privacy-banner-title"> <div class="privacy-banner-copy"> <p class="privacy-kicker">Cookieのご案内</p> <h2 id="privacy-banner-title">快適な閲覧とサイト改善のために。</h2> <p>BUNKAOでは、サイトの表示と設定保存、記事ページの広告、表示性能の確認に必要な仕組みを使用しています。同意いただいた場合は、より読みやすいサイトづくりのためにアクセス状況も確認します。設定はいつでも変更できます。</p> <ul class="privacy-banner-summary" aria-label="使用する機能の概要"> <li><strong>基本機能</strong><span>設定保存・フォーム保護・安全な配信</span></li> <li><strong>記事広告</strong><span>記事ページだけに表示</span></li> <li><strong>アクセス解析</strong><span>同意した場合に使用</span></li> </ul> <a href="https://bunkao.com/cookie-policy/">Cookie・外部サービスについて</a> </div> <div class="privacy-banner-actions"> <button type="button" class="privacy-button privacy-button-secondary" data-privacy-reject>解析なしで続ける</button> <button type="button" class="privacy-button privacy-button-secondary" data-privacy-customize>設定を見る</button> <button type="button" class="privacy-button privacy-button-primary" data-privacy-accept>同意して続ける</button> </div> </section> <dialog class="privacy-dialog" data-privacy-dialog aria-labelledby="privacy-dialog-title"> <form method="dialog" class="privacy-dialog-inner" data-privacy-form> <div class="privacy-dialog-heading"> <div><p class="privacy-kicker">文化 / BUNKAO</p><h2 id="privacy-dialog-title">Cookieとサービスのご案内</h2></div> <button type="button" class="privacy-close" data-privacy-close aria-label="設定画面を閉じる">×</button> </div> <p class="privacy-dialog-intro">サイトの表示、安全な利用、記事広告、アクセス解析、天気情報についてご案内します。アクセス解析は任意で、選択はいつでも変更できます。</p> <section class="privacy-choice is-fixed"> <div><h3>必要な保存・セキュリティ・配信</h3><p>Cookie設定の保存、安全な表示、フォーム保護、ログインなどに使います。Cloudflareによる配信・防御と、CookieやlocalStorageを使わない表示性能の計測も含みます。</p></div> <span class="privacy-status">常に使用</span> </section> <section class="privacy-choice is-fixed"> <div><h3>記事ページの広告</h3><p>個別の記事だけでGoogle AdSense広告を読み込みます。ホーム、固定ページ、カテゴリー、検索結果などでは読み込みません。この設定にかかわらず記事ページで使用します。</p></div> <span class="privacy-status">記事のみ</span> </section> <section class="privacy-choice"> <div><label for="bunkao-analytics-consent"><strong>サイト改善のためのアクセス解析</strong></label><p>より読みやすいサイトづくりのため、同意いただいた場合にMatomoでページの閲覧状況や利用環境を確認します。</p></div> <label class="privacy-switch"><input id="bunkao-analytics-consent" type="checkbox" data-privacy-analytics><span aria-hidden="true"></span><span class="sr-only">Matomoを許可する</span></label> </section> <section class="privacy-choice is-fixed"> <div><h3>天気情報・外部リンク</h3><p>天気情報は、選択した都市の気象庁データをBUNKAOのサーバー経由で取得します。端末の現在地は取得しません。外部リンクを開いた後は、リンク先の方針が適用されます。</p></div> <span class="privacy-status">位置情報なし</span> </section> <div class="privacy-detail"> <p>選択はこのブラウザーに180日間保存します。いつでも画面下の「Cookie設定」から変更できます。</p> <p><a href="https://bunkao.com/cookie-policy/">Cookie・外部サービスについて</a> / <a href="https://bunkao.com/privacy-policy/">プライバシーポリシー</a></p> </div> <div class="privacy-dialog-actions"> <button type="button" class="privacy-button privacy-button-secondary" data-privacy-save-essential>解析を使わず保存</button> <button type="submit" class="privacy-button privacy-button-primary" data-privacy-save>この設定で保存</button> </div> <p class="privacy-saved" data-privacy-saved role="status" aria-live="polite"></p> </form> </dialog> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/bunkao/*","/wp-content/themes/twentytwentyone/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script> document.body.classList.remove('no-js'); //# sourceURL=twenty_twenty_one_supports_js </script> <script id="bunkao-article-ads-js" src="https://bunkao.com/wp-content/plugins/bunkao-article-ads/assets/ads.js?ver=1.0.0"></script> <script crossorigin="anonymous" async data-wp-strategy="async" id="bunkao-adsense-js" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"></script> <script id="bunkao-js-extra"> var Bunkao = {"api":"https://bunkao.com/wp-json/bunkao/v1/"}; //# sourceURL=bunkao-js-extra </script> <script data-wp-strategy="defer" defer id="bunkao-js" src="https://bunkao.com/wp-content/themes/bunkao/assets/site.js?ver=1792062506"></script> <script id="bunkao-privacy-js-extra"> var BunkaoPrivacy = {"version":"3","cookieName":"bunkao_privacy","days":"180","matomoAllowed":"1","matomoUrl":"https://all2.atico-jo.com/","matomoSiteId":"14","privatePaths":["wp-admin","contact-status"]}; //# sourceURL=bunkao-privacy-js-extra </script> <script data-wp-strategy="defer" defer id="bunkao-privacy-js" src="https://bunkao.com/wp-content/plugins/bunkao-privacy-control/assets/privacy.js?ver=1792241550"></script> </body></html>