HTML（HyperText Markup Language）は、ウェブページを構築するための基本的な言語であり、ウェブコンテンツの構造を定義するために使用されます。HTMLを学ぶことは、ウェブ開発の第一歩となります。この完全かつ包括的なガイドでは、HTMLの基本から応用までを詳しく解説します。これを通じて、HTMLを使ってウェブページを作成できるようになることを目指します。
1. HTMLの基本構造
HTMLの基本的な構造は非常にシンプルで、タグを使用してウェブページの内容を定義します。HTML文書の最も基本的な構造は以下の通りです。
: HTML5の文書タイプ宣言です。これによりブラウザは文書をHTML5として扱います。: HTML文書の開始タグであり、すべてのHTML要素をこのタグ内に記述します。: メタ情報やスタイルシート、スクリプトなどを含むセクションです。</code>: ブラウザのタブに表示されるページのタイトルを指定します。</li> <li data-start="669" data-end="707"><code data-start="671" data-end="679"><body></code>: 実際にブラウザに表示されるコンテンツを含む部分です。</li> </ul> <h3 data-start="709" data-end="725">2. HTMLタグの種類</h3> <p data-start="727" data-end="789">HTMLでは、さまざまなタグを使用してコンテンツを整形したり、構造を定義したりします。ここでは最も基本的なタグを紹介します。</p> <h4 data-start="791" data-end="816">見出しタグ（<code data-start="802" data-end="808"></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <h1></code>〜<code data-start="809" data-end="815"></p> <h6></code>）</h4> <p data-start="818" data-end="880">見出しタグはページ内で情報の階層を示します。<code data-start="840" data-end="846"></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <h1></code>が最も重要な見出しで、<code data-start="857" data-end="863"></p> <h6></code>が最も低い階層の見出しとなります。</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <pre class="!overflow-visible" data-start="882" data-end="943"><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="945" data-end="961">段落タグ（<code data-start="955" data-end="960"></p> <p></code>）</h4> <p data-start="963" data-end="1005">段落タグはテキストを段落として囲みます。文書内の文章を整えるために広く使用されます。</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <pre class="!overflow-visible" data-start="1007" data-end="1034"><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="1036" data-end="1070">リストタグ（<code data-start="1047" data-end="1053"></p> <ul></code>, <code data-start="1055" data-end="1061"></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <ol></code>, <code data-start="1063" data-end="1069"></p> <li></code>）</h4> <p data-start="1072" data-end="1140">リストは、順不同リスト（<code data-start="1084" data-end="1090"></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <ul></code>）と順序付きリスト（<code data-start="1100" data-end="1106"></p> <ol></code>）で定義できます。リスト項目は<code data-start="1121" data-end="1127"></p> <li></code>タグを使用して記述します。</p> <ul data-start="1142" data-end="1314"> <li data-start="1142" data-end="1226"> <p data-start="1144" data-end="1157">順不同リスト（箇条書き）:</p> <pre class="!overflow-visible" data-start="1160" data-end="1226"><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> </li> <li data-start="1228" data-end="1314"> <p data-start="1230" data-end="1247">順序付きリスト（番号付きリスト）:</p> <pre class="!overflow-visible" data-start="1250" data-end="1314"><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> </li> </ul> <h4 data-start="1316" data-end="1333">リンクタグ（<code data-start="1327" data-end="1332"><a></code>）</h4> <p data-start="1335" data-end="1385">リンクタグは他のページへのリンクを作成します。<code data-start="1358" data-end="1364">href</code>属性を使ってリンク先のURLを指定します。</p> <pre class="!overflow-visible" data-start="1387" data-end="1445"><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>こちらをクリック<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </span></code></div></div></pre> <h4 data-start="1447" data-end="1465">画像タグ（<code data-start="1457" data-end="1464"><img></code>）</h4> <p data-start="1467" data-end="1547">画像タグはウェブページに画像を埋め込むために使用します。<code data-start="1495" data-end="1500">src</code>属性で画像のURLを指定し、<code data-start="1514" data-end="1519">alt</code>属性で画像が表示されない場合の代替テキストを提供します。</p> <pre class="!overflow-visible" data-start="1549" data-end="1592"><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="1594" data-end="1610">3. HTMLのフォーム</h3> <p data-start="1612" data-end="1696">HTMLでは、ユーザーから情報を収集するためにフォームを作成することができます。フォームは<code data-start="1657" data-end="1665"></p> <form></code>タグで囲まれ、各入力フィールドはさまざまなタグで構成されます。</p> <h4 data-start="1698" data-end="1725">テキスト入力フィールド（<code data-start="1715" data-end="1724"><input></code>）</h4> <p data-start="1727" data-end="1762">テキストフィールドを作成するには、<code data-start="1744" data-end="1753"><input></code>タグを使用します。</p> <pre class="!overflow-visible" data-start="1764" data-end="1867"><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> 名前: <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">name</span>=<span class="hljs-string">"username"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"送信"</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></code></div></div></pre> <h4 data-start="1869" data-end="1904">ラジオボタン（<code data-start="1881" data-end="1903"><input type="radio"></code>）</h4> <p data-start="1906" data-end="1929">ユーザーが選択できるラジオボタンを作成します。</p> <pre class="!overflow-visible" data-start="1931" data-end="2069"><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> 性別: <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"male"</span>></span> 男 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"female"</span>></span> 女 <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></code></div></div></pre> <h4 data-start="2071" data-end="2111">チェックボックス（<code data-start="2085" data-end="2110"><input type="checkbox"></code>）</h4> <p data-start="2113" data-end="2149">ユーザーが複数の選択肢から選ぶことができるチェックボックスを作成します。</p> <pre class="!overflow-visible" data-start="2151" data-end="2302"><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> 趣味: <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reading"</span>></span> 読書 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"travelling"</span>></span> 旅行 <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></code></div></div></pre> <h4 data-start="2304" data-end="2329">セレクトボックス（<code data-start="2318" data-end="2328"><select></code>）</h4> <p data-start="2331" data-end="2365">セレクトボックスはドロップダウンメニューを作成するために使用します。</p> <pre class="!overflow-visible" data-start="2367" data-end="2545"><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> 好きな色: <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"color"</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"red"</span>></span>赤<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"blue"</span>></span>青<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"green"</span>></span>緑<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></code></div></div></pre> <h3 data-start="2547" data-end="2563">4. HTMLのテーブル</h3> <p data-start="2565" data-end="2619">テーブルはデータを行と列で整理するために使用されます。テーブルは<code data-start="2597" data-end="2606"></p> <table></code>タグを使用して作成します。</p> <pre class="!overflow-visible" data-start="2621" data-end="2805"><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 class="hljs-attr">border</span>=<span class="hljs-string">"1"</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> <ul data-start="2807" data-end="2877"> <li data-start="2807" data-end="2830"><code data-start="2809" data-end="2815"><br /> <tr></code>: テーブルの行を定義します。</li> <li data-start="2831" data-end="2854"><code data-start="2833" data-end="2839"> <th></code>: ヘッダーセルを定義します。</li> <li data-start="2855" data-end="2877"><code data-start="2857" data-end="2863"> <td></code>: データセルを定義します。</li> </ul> <h3 data-start="2879" data-end="2897">5. HTMLのスタイリング</h3> <p data-start="2899" data-end="3026">HTML自体は構造を定義するための言語ですが、CSS（Cascading Style Sheets）を使用することで、ウェブページの見た目をデザインすることができます。スタイルを設定するために、HTML文書内に<code data-start="3004" data-end="3013"></p> <style></code>タグを使うことができます。</p> <pre class="!overflow-visible" data-start="3028" data-end="3160"><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">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">background-color</span>: lightblue; } <span class="hljs-selector-tag">h1</span> { <span class="hljs-attribute">color</span>: red; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> </span></code></div></div></pre> <h3 data-start="3162" data-end="3178">6. HTMLのコメント</h3> <p data-start="3180" data-end="3258">HTMLではコメントを<code data-start="3191" data-end="3208"><!-- コメント内容 --></code>の形式で挿入できます。コメントはブラウザに表示されませんが、コード内で説明を記載するのに役立ちます。</p> <pre class="!overflow-visible" data-start="3260" data-end="3313"><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-comment"><!-- これはコメントです --></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> <h3 data-start="3315" data-end="3335">7. HTMLのアクセシビリティ</h3> <p data-start="3337" data-end="3409">ウェブページを作成する際には、アクセシビリティにも配慮することが大切です。特に視覚障害者や聴覚障害者に配慮するために、以下の点を意識しましょう。</p> <ul data-start="3411" data-end="3539"> <li data-start="3411" data-end="3430">画像には<code data-start="3417" data-end="3422">alt</code>属性を設定する。</li> <li data-start="3431" data-end="3448">音声や動画には字幕を追加する。</li> <li data-start="3449" data-end="3539">画面リーダーを使用してコンテンツを適切に読み上げてもらうためのHTMLタグ（<code data-start="3489" data-end="3496"><br /> <nav></code>, <code data-start="3498" data-end="3508"></p> <header></code>, <code data-start="3510" data-end="3520"></p> <footer></code>, <code data-start="3522" data-end="3530"><main></code>など）を使用する。</li> </ul> <h3 data-start="3541" data-end="3548">まとめ</h3> <p data-start="3550" data-end="3701" data-is-last-node="" data-is-only-node="">HTMLはウェブページを作成するための最も基本的な技術であり、すべてのウェブ開発の基盤となります。この記事では、HTMLの基本的な構造から、フォームやテーブル、スタイルの設定方法まで、HTMLの重要な要素を紹介しました。HTMLを学ぶことで、ウェブページを作成するための第一歩を踏み出すことができます。</p> </div> </div> </div> </p> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">最終更新： 28/02/2025</span><div class="tie-alignright"><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> 1分未満</span> </div></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&name=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&description=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&media=https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&redirect_uri=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&redirect_uri=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> <a href="mailto:?subject=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&body=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="メールで共有" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">メールで共有</span> </a> <a href="#" rel="external noopener nofollow" title="印刷する" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">印刷する</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2025-02-28T09:25:53+09:00","datePublished":"2025-02-28T09:25:53+09:00","dateModified":"2025-02-28T09:25:53+09:00","headline":"\u5b8c\u5168\u30ac\u30a4\u30c9\uff1aHTML\u306e\u57fa\u672c","name":"\u5b8c\u5168\u30ac\u30a4\u30c9\uff1aHTML\u306e\u57fa\u672c","keywords":[],"url":"https:\/\/bunkao.com\/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac\/","description":"HTML\uff08HyperText Markup Language\uff09\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u8a00\u8a9e\u3067\u3042\u308a\u3001\u30a6\u30a7\u30d6\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002HTML\u3092\u5b66\u3076\u3053\u3068\u306f\u3001\u30a6\u30a7\u30d6\u958b\u767a\u306e\u7b2c\u4e00\u6b69\u3068\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u5b8c\u5168\u304b\u3064\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u3067\u306f\u3001HTML\u306e\u57fa\u672c\u304b\u3089\u5fdc\u7528\u307e\u3067\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u901a\u3058\u3066\u3001HTML\u3092\u4f7f\u3063\u3066\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3053\u3068\u3092\u76ee\u6307\u3057\u307e\u3059\u30021. HTML\u306e\u57fa\u672c\u69cb","copyrightYear":"2025","articleSection":"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0","articleBody":"HTML\uff08HyperText Markup Language\uff09\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u8a00\u8a9e\u3067\u3042\u308a\u3001\u30a6\u30a7\u30d6\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002HTML\u3092\u5b66\u3076\u3053\u3068\u306f\u3001\u30a6\u30a7\u30d6\u958b\u767a\u306e\u7b2c\u4e00\u6b69\u3068\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u5b8c\u5168\u304b\u3064\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u3067\u306f\u3001HTML\u306e\u57fa\u672c\u304b\u3089\u5fdc\u7528\u307e\u3067\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u901a\u3058\u3066\u3001HTML\u3092\u4f7f\u3063\u3066\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3053\u3068\u3092\u76ee\u6307\u3057\u307e\u3059\u30021. HTML\u306e\u57fa\u672c\u69cb\u9020HTML\u306e\u57fa\u672c\u7684\u306a\u69cb\u9020\u306f\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3067\u3001\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u5185\u5bb9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002HTML\u6587\u66f8\u306e\u6700\u3082\u57fa\u672c\u7684\u306a\u69cb\u9020\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002htmlCopyEdit\n\n \n \n \u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb\n \n \n \u3053\u3093\u306b\u3061\u306f\u3001\u4e16\u754c\uff01\n \u3053\u308c\u306fHTML\u306e\u57fa\u672c\u7684\u306a\u69cb\u9020\u3067\u3059\u3002\n \n\n: HTML5\u306e\u6587\u66f8\u30bf\u30a4\u30d7\u5ba3\u8a00\u3067\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u30d6\u30e9\u30a6\u30b6\u306f\u6587\u66f8\u3092HTML5\u3068\u3057\u3066\u6271\u3044\u307e\u3059\u3002: HTML\u6587\u66f8\u306e\u958b\u59cb\u30bf\u30b0\u3067\u3042\u308a\u3001\u3059\u3079\u3066\u306eHTML\u8981\u7d20\u3092\u3053\u306e\u30bf\u30b0\u5185\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002: \u30e1\u30bf\u60c5\u5831\u3084\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306a\u3069\u3092\u542b\u3080\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002: \u30d6\u30e9\u30a6\u30b6\u306e\u30bf\u30d6\u306b\u8868\u793a\u3055\u308c\u308b\u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002: \u5b9f\u969b\u306b\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u542b\u3080\u90e8\u5206\u3067\u3059\u30022. HTML\u30bf\u30b0\u306e\u7a2e\u985eHTML\u3067\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6574\u5f62\u3057\u305f\u308a\u3001\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u305f\u308a\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u6700\u3082\u57fa\u672c\u7684\u306a\u30bf\u30b0\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u898b\u51fa\u3057\u30bf\u30b0\uff08\u301c\uff09\u898b\u51fa\u3057\u30bf\u30b0\u306f\u30da\u30fc\u30b8\u5185\u3067\u60c5\u5831\u306e\u968e\u5c64\u3092\u793a\u3057\u307e\u3059\u3002\u304c\u6700\u3082\u91cd\u8981\u306a\u898b\u51fa\u3057\u3067\u3001\u304c\u6700\u3082\u4f4e\u3044\u968e\u5c64\u306e\u898b\u51fa\u3057\u3068\u306a\u308a\u307e\u3059\u3002htmlCopyEdit\u30e1\u30a4\u30f3\u898b\u51fa\u3057\n\u30b5\u30d6\u898b\u51fa\u3057\n\u3055\u3089\u306b\u8a73\u7d30\u306a\u898b\u51fa\u3057\n\u6bb5\u843d\u30bf\u30b0\uff08\uff09\u6bb5\u843d\u30bf\u30b0\u306f\u30c6\u30ad\u30b9\u30c8\u3092\u6bb5\u843d\u3068\u3057\u3066\u56f2\u307f\u307e\u3059\u3002\u6587\u66f8\u5185\u306e\u6587\u7ae0\u3092\u6574\u3048\u308b\u305f\u3081\u306b\u5e83\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002htmlCopyEdit\u3053\u308c\u306f\u6bb5\u843d\u3067\u3059\u3002\n\u30ea\u30b9\u30c8\u30bf\u30b0\uff08, , \uff09\u30ea\u30b9\u30c8\u306f\u3001\u9806\u4e0d\u540c\u30ea\u30b9\u30c8\uff08\uff09\u3068\u9806\u5e8f\u4ed8\u304d\u30ea\u30b9\u30c8\uff08\uff09\u3067\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002\u30ea\u30b9\u30c8\u9805\u76ee\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u8a18\u8ff0\u3057\u307e\u3059\u3002\u9806\u4e0d\u540c\u30ea\u30b9\u30c8\uff08\u7b87\u6761\u66f8\u304d\uff09:htmlCopyEdit\n \u30a2\u30a4\u30c6\u30e01\n \u30a2\u30a4\u30c6\u30e02\n\n\u9806\u5e8f\u4ed8\u304d\u30ea\u30b9\u30c8\uff08\u756a\u53f7\u4ed8\u304d\u30ea\u30b9\u30c8\uff09:htmlCopyEdit\n \u7b2c\u4e00\u9805\u76ee\n \u7b2c\u4e8c\u9805\u76ee\n\n\u30ea\u30f3\u30af\u30bf\u30b0\uff08\uff09\u30ea\u30f3\u30af\u30bf\u30b0\u306f\u4ed6\u306e\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002href\u5c5e\u6027\u3092\u4f7f\u3063\u3066\u30ea\u30f3\u30af\u5148\u306eURL\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002htmlCopyEdit\u3053\u3061\u3089\u3092\u30af\u30ea\u30c3\u30af\n\u753b\u50cf\u30bf\u30b0\uff08\uff09\u753b\u50cf\u30bf\u30b0\u306f\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306b\u753b\u50cf\u3092\u57cb\u3081\u8fbc\u3080\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002src\u5c5e\u6027\u3067\u753b\u50cf\u306eURL\u3092\u6307\u5b9a\u3057\u3001alt\u5c5e\u6027\u3067\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u306e\u4ee3\u66ff\u30c6\u30ad\u30b9\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002htmlCopyEdit\n3. HTML\u306e\u30d5\u30a9\u30fc\u30e0HTML\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304b\u3089\u60c5\u5831\u3092\u53ce\u96c6\u3059\u308b\u305f\u3081\u306b\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30d5\u30a9\u30fc\u30e0\u306f\u30bf\u30b0\u3067\u56f2\u307e\u308c\u3001\u5404\u5165\u529b\u30d5\u30a3\u30fc\u30eb\u30c9\u306f\u3055\u307e\u3056\u307e\u306a\u30bf\u30b0\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u30d5\u30a3\u30fc\u30eb\u30c9\uff08\uff09\u30c6\u30ad\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002htmlCopyEdit\n \u540d\u524d: \n \n\n\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\uff08\uff09\u30e6\u30fc\u30b6\u30fc\u304c\u9078\u629e\u3067\u304d\u308b\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002htmlCopyEdit\n \u6027\u5225:\n \u7537\n \u5973\n\n\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\uff08\uff09\u30e6\u30fc\u30b6\u30fc\u304c\u8907\u6570\u306e\u9078\u629e\u80a2\u304b\u3089\u9078\u3076\u3053\u3068\u304c\u3067\u304d\u308b\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002htmlCopyEdit\n \u8da3\u5473:\n \u8aad\u66f8\n \u65c5\u884c\n\n\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\uff08\uff09\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306f\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002htmlCopyEdit\n \u597d\u304d\u306a\u8272:\n \n \u8d64\n \u9752\n \u7dd1\n \n\n4. HTML\u306e\u30c6\u30fc\u30d6\u30eb\u30c6\u30fc\u30d6\u30eb\u306f\u30c7\u30fc\u30bf\u3092\u884c\u3068\u5217\u3067\u6574\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u30c6\u30fc\u30d6\u30eb\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u6210\u3057\u307e\u3059\u3002htmlCopyEdit\n \n \u540d\u524d\n \u5e74\u9f62\n \n \n \u5c71\u7530\u592a\u90ce\n 25\n \n \n \u9234\u6728\u4e00\u90ce\n 30\n \n\n: \u30c6\u30fc\u30d6\u30eb\u306e\u884c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002: \u30d8\u30c3\u30c0\u30fc\u30bb\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002: \u30c7\u30fc\u30bf\u30bb\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u30025. HTML\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0HTML\u81ea\u4f53\u306f\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u8a00\u8a9e\u3067\u3059\u304c\u3001CSS\uff08Cascading Style Sheets\uff09\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u898b\u305f\u76ee\u3092\u30c7\u30b6\u30a4\u30f3\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u3001HTML\u6587\u66f8\u5185\u306b\u30bf\u30b0\u3092\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002htmlCopyEdit\n \n body {\n background-color: lightblue;\n }\n h1 {\n color: red;\n }\n \n\n6. HTML\u306e\u30b3\u30e1\u30f3\u30c8HTML\u3067\u306f\u30b3\u30e1\u30f3\u30c8\u3092\u306e\u5f62\u5f0f\u3067\u633f\u5165\u3067\u304d\u307e\u3059\u3002\u30b3\u30e1\u30f3\u30c8\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u304c\u3001\u30b3\u30fc\u30c9\u5185\u3067\u8aac\u660e\u3092\u8a18\u8f09\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002htmlCopyEdit\n\u3053\u3053\u306f\u30b3\u30e1\u30f3\u30c8\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n7. HTML\u306e\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u969b\u306b\u306f\u3001\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u306b\u3082\u914d\u616e\u3059\u308b\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002\u7279\u306b\u8996\u899a\u969c\u5bb3\u8005\u3084\u8074\u899a\u969c\u5bb3\u8005\u306b\u914d\u616e\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u70b9\u3092\u610f\u8b58\u3057\u307e\u3057\u3087\u3046\u3002\u753b\u50cf\u306b\u306falt\u5c5e\u6027\u3092\u8a2d\u5b9a\u3059\u308b\u3002\u97f3\u58f0\u3084\u52d5\u753b\u306b\u306f\u5b57\u5e55\u3092\u8ffd\u52a0\u3059\u308b\u3002\u753b\u9762\u30ea\u30fc\u30c0\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u9069\u5207\u306b\u8aad\u307f\u4e0a\u3052\u3066\u3082\u3089\u3046\u305f\u3081\u306eHTML\u30bf\u30b0\uff08, , , \u306a\u3069\uff09\u3092\u4f7f\u7528\u3059\u308b\u3002\u307e\u3068\u3081HTML\u306f\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u6700\u3082\u57fa\u672c\u7684\u306a\u6280\u8853\u3067\u3042\u308a\u3001\u3059\u3079\u3066\u306e\u30a6\u30a7\u30d6\u958b\u767a\u306e\u57fa\u76e4\u3068\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001HTML\u306e\u57fa\u672c\u7684\u306a\u69cb\u9020\u304b\u3089\u3001\u30d5\u30a9\u30fc\u30e0\u3084\u30c6\u30fc\u30d6\u30eb\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u8a2d\u5b9a\u65b9\u6cd5\u307e\u3067\u3001HTML\u306e\u91cd\u8981\u306a\u8981\u7d20\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002HTML\u3092\u5b66\u3076\u3053\u3068\u3067\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u7b2c\u4e00\u6b69\u3092\u8e0f\u307f\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u6587\u5316","logo":{"@type":"ImageObject","url":"https:\/\/bunkao.com\/wp-content\/themes\/jannah\/assets\/images\/logo@2x.png"}},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/bunkao.com\/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/bunkao.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/bunkao.com\/wp-content\/uploads\/2025\/02\/Flag_of_Japan.png","width":2000,"height":1334}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&name=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&description=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&media=https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&body=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="メールで共有" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">メールで共有</span> </a> <a href="#" rel="external noopener nofollow" title="印刷する" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">印刷する</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div id="read-next-block" class="container-wrapper read-next-slider-4"> <h2 class="read-next-block-title">次を読む</h2> <section id="tie-read-next" class="slider-area mag-box"> <div class="slider-area-inner"> <div id="tie-main-slider-4-read-next" class="tie-main-slider main-slider wide-slider-with-navfor-wrapper wide-slider-wrapper centered-title-slider tie-slick-slider-wrapper" data-slider-id="4" data-autoplay="true" data-speed="3000"> <div class="main-slider-inner"> <div class="container slider-main-container"> <div class="tie-slick-slider"> <ul class="tie-slider-nav"></ul> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033133 tie-slide-1 tie-standard"> <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/" class="all-over-thumb-link" aria-label="Laravel マイグレーション完全ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033117 tie-slide-2 tie-standard"> <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/" class="all-over-thumb-link" aria-label="Node.js と Express でブログ作成"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033101 tie-slide-3 tie-standard"> <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/" class="all-over-thumb-link" aria-label="HTMLをWordPressテーマに変換"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033083 tie-slide-4 tie-standard"> <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/" class="all-over-thumb-link" aria-label="JavaScriptコード設計の基本"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033068 tie-slide-5 tie-standard"> <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/" class="all-over-thumb-link" aria-label="Expressでユーザー管理システム"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033051 tie-slide-6 tie-standard"> <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/" class="all-over-thumb-link" aria-label="Express ルーティングの基本"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><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></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033033 tie-slide-1 tie-standard"> <a href="https://bunkao.com/express%e3%81%a7%e3%81%ae%e3%82%bb%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e7%ae%a1%e7%90%86/" class="all-over-thumb-link" aria-label="Expressでのセッション管理"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/express%e3%81%a7%e3%81%ae%e3%82%bb%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e7%ae%a1%e7%90%86/">Expressでのセッション管理</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3033016 tie-slide-2 tie-standard"> <a href="https://bunkao.com/node-js-%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%87%e3%83%97%e3%83%ad%e3%82%a4%e3%82%ac%e3%82%a4%e3%83%89/" class="all-over-thumb-link" aria-label="Node.js アプリのデプロイガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/node-js-%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%87%e3%83%97%e3%83%ad%e3%82%a4%e3%82%ac%e3%82%a4%e3%83%89/">Node.js アプリのデプロイガイド</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3032991 tie-slide-3 tie-standard"> <a href="https://bunkao.com/express%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e6%a9%9f%e8%83%bd/" class="all-over-thumb-link" aria-label="Expressで実装するコメント機能"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/express%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e6%a9%9f%e8%83%bd/">Expressで実装するコメント機能</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png)" class="slide slide-id-3032971 tie-slide-4 tie-standard"> <a href="https://bunkao.com/express%e5%85%a5%e9%96%80%e3%82%ac%e3%82%a4%e3%83%89/" class="all-over-thumb-link" aria-label="Express入門ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-18" 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></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/express%e5%85%a5%e9%96%80%e3%82%ac%e3%82%a4%e3%83%89/">Express入門ガイド</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> </div><!-- .tie-slick-slider /--> </div><!-- .slider-main-container /--> </div><!-- .main-slider-inner /--> </div><!-- .main-slider /--> <div class="wide-slider-nav-wrapper "> <ul class="tie-slider-nav"></ul> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="tie-slick-slider"> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">Laravel マイグレーション完全ガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Node.js と Express でブログ作成</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">HTMLをWordPressテーマに変換</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">JavaScriptコード設計の基本</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-3"> <div class="slide-overlay"> <h3 class="thumb-title">Expressでユーザー管理システム</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-4"> <div class="slide-overlay"> <h3 class="thumb-title">Express ルーティングの基本</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">Expressでのセッション管理</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Node.js アプリのデプロイガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">Expressで実装するコメント機能</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Express入門ガイド</h3> </div> </div><!-- slide /--> </div><!-- .wide_slider_nav /--> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #wide-slider-nav-wrapper /--> </div><!-- .slider-area-inner --> </section><!-- .slider-area --> </div><!-- #read-next-block --> <div class="prev-next-post-nav container-wrapper media-overlay"> <div class="tie-col-xs-6 prev-post"> <a href="https://bunkao.com/%e5%ad%90%e3%81%a9%e3%82%82%e5%90%91%e3%81%91youtube%e4%bb%a3%e6%9b%bf%e3%82%a2%e3%83%97%e3%83%aa/" style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-390x220.png)" class="post-thumb" rel="prev"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://bunkao.com/%e5%ad%90%e3%81%a9%e3%82%82%e5%90%91%e3%81%91youtube%e4%bb%a3%e6%9b%bf%e3%82%a2%e3%83%97%e3%83%aa/" rel="prev"> <h3 class="post-title">子ども向けYouTube代替アプリ</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://bunkao.com/%e8%a8%80%e8%91%89%e3%81%aa%e3%81%97%e3%81%a7%e4%bc%9d%e3%81%88%e3%82%8b%e6%84%9b/" style="background-image: url(https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-390x220.png)" class="post-thumb" rel="next"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://bunkao.com/%e8%a8%80%e8%91%89%e3%81%aa%e3%81%97%e3%81%a7%e4%bc%9d%e3%81%88%e3%82%8b%e6%84%9b/" rel="next"> <h3 class="post-title">言葉なしで伝える愛</h3> </a> </div> </div><!-- .prev-next-post-nav /--><div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> </div><!-- .post-components /--> </div><!-- .main-content --> <div id="check-also-box" class="container-wrapper check-also-right"> <div class="widget-title the-global-title"> <div class="the-subtitle">こちらもご確認ください </div> <a href="#" id="check-also-close" class="remove"> <span class="screen-reader-text">Close</span> </a> </div> <div class="widget"> <ul class="posts-list-items"> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Javaの健全性と堅牢性" href="https://bunkao.com/java%e3%81%ae%e5%81%a5%e5%85%a8%e6%80%a7%e3%81%a8%e5%a0%85%e7%89%a2%e6%80%a7/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://bunkao.com/java%e3%81%ae%e5%81%a5%e5%85%a8%e6%80%a7%e3%81%a8%e5%a0%85%e7%89%a2%e6%80%a7/">Javaの健全性と堅牢性</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="WordPress HTTP APIの使い方" href="https://bunkao.com/wordpress-http-api%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://bunkao.com/wordpress-http-api%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/">WordPress HTTP APIの使い方</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="SvelteでWebアプリを作成" href="https://bunkao.com/svelte%e3%81%a7web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e6%88%90/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://bunkao.com/svelte%e3%81%a7web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e6%88%90/">SvelteでWebアプリを作成</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="「JavaScriptの非同期処理入門」" href="https://bunkao.com/%e3%80%8cjavascript%e3%81%ae%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e5%85%a5%e9%96%80%e3%80%8d/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://bunkao.com/%e3%80%8cjavascript%e3%81%ae%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e5%85%a5%e9%96%80%e3%80%8d/">「JavaScriptの非同期処理入門」</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="PHP関数の完全ガイド" href="https://bunkao.com/php%e9%96%a2%e6%95%b0%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://bunkao.com/php%e9%96%a2%e6%95%b0%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/">PHP関数の完全ガイド</a> <div class="post-meta"> </div> </div> </li> </ul><!-- .related-posts-list /--> </div> </div><!-- #related-posts /--> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : '7bb24ee6397b7382b9d18f0dd42d9b6e', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/7bb24ee6397b7382b9d18f0dd42d9b6e/invoke.js"></script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © 著作権 2025, すべての権利を保有 | <span style="color:red;" class="tie-icon-heart"></span> | <a href="https://bunkao.com/about-us/">文化について</a> | <a href="https://bunkao.com/contact-us/">お問い合わせ</a> | <a href="https://bunkao.com/report/">コンテンツ報告</a> | <a href="https://bunkao.com/terms-and-conditions/">利用規約</a> | <a href="https://bunkao.com/privacy-policy/">プライバシーポリシー</a> | <a href="https://bunkao.com/faq/">よくある質問 </a> | <a href="https://bunkao.com/disclaimer/">免責事項</a> | <a href="https://bunkao.com/categories/">カテゴリー</a> | <a href="https://bunkao.com/trnd/">トレンド</a> | <a href="https://bunkao.com/last-article/">最新記事</a> </footer> </div><div class="copyright-text copyright-text-second"><footer> <strong>🌐 他のウェブサイトを見る:</strong> | <a href="https://mwade3.com/" target="_blank">📖 مواضيع (AR)</a> | <a href="https://revistacompleta.com/" target="_blank">📚 La Revista Completa (ES)</a> | <a href="https://lasujets.com/" target="_blank">📰 Lasujets (FR)</a> | <a href="https://meukultura.com/" target="_blank">🎨 MEU Kultura (PT)</a> | <a href="https://freesourcelibrary.com/" target="_blank">📂 Free Source Library (EN)</a> | <a href="https://lovewithrecipes.com/" target="_blank">🍴 Love with Recipes (EN)</a> | <a href="https://it-solutions.center/" target="_blank">💻 IT Solutions Center (AR)</a> | <a href="https://bunkao.com/" target="_blank">🏯 文化 (JP)</a> | <a href="https://qr-solutions.com/" target="_blank">🔲 QR Solutions</a> </footer> </div><ul class="social-icons"></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&name=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&description=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC&media=https://bunkao.com/wp-content/uploads/2025/02/Flag_of_Japan.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&title=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&redirect_uri=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&redirect_uri=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/&text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89%EF%BC%9AHTML%E3%81%AE%E5%9F%BA%E6%9C%AC%20https://bunkao.com/%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9ahtml%e3%81%ae%e5%9f%ba%e6%9c%ac/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Back to top button</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Secondary Sidebar" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Close</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://bunkao.com/"> <label> <span class="screen-reader-text">検索:</span> <input type="search" class="search-field" placeholder="検索…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="検索" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <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\/jannah\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style> .copy-tooltip { position: absolute; background-color: red; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-family: Arial, sans-serif; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); display: none; z-index: 9999; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(-10px); } .copy-tooltip.show { opacity: 1; transform: translateY(0); } </style> <div class="copy-tooltip" id="copyTooltip"></div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var tooltip = document.getElementById('copyTooltip'); function showTooltip(e, message) { tooltip.innerHTML = message; tooltip.style.left = e.pageX + 20 + 'px'; tooltip.style.top = e.pageY + 20 + 'px'; tooltip.classList.add('show'); tooltip.style.display = 'block'; setTimeout(function() { tooltip.classList.remove('show'); setTimeout(function() { tooltip.style.display = 'none'; }, 300); }, 3000); // Tooltip will disappear after 3 seconds } document.addEventListener('copy', function (e) { e.preventDefault(); var pageUrl = window.location.href; e.clipboardData.setData('text/plain', pageUrl); showTooltip(e, '📢 コンテンツのコピーは禁止されています。代わりに共有ボタンをご利用ください。'); }); document.addEventListener('keydown', function (e) { if (e.ctrlKey && (e.key === 'c' || e.key === 'C')) { e.preventDefault(); var pageUrl = window.location.href; navigator.clipboard.writeText(pageUrl); showTooltip(e, '📢 コンテンツのコピーは禁止されています。代わりに共有ボタンをご利用ください。'); } }); document.addEventListener('contextmenu', function (e) { e.preventDefault(); showTooltip(e, '📢 右クリックは無効化されています。'); }); }); </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="同意の設定" style="background-color:#DC1830"> <button class="cky-btn-revisit" aria-label="同意の設定"> <img src="https://bunkao.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">私たちは、お客様のプライバシーを大切にします</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="カスタマイズ" data-cky-tag="settings-button" style="color:#DC1830;background-color:transparent;border-color:#DC1830">カスタマイズ</button> <button class="cky-btn cky-btn-reject" aria-label="すべてのクッキーを拒否する" data-cky-tag="reject-button" style="color:#DC1830;background-color:transparent;border-color:#DC1830">すべてのクッキーを拒否する</button> <button class="cky-btn cky-btn-accept" aria-label="すべてのクッキーを受け入れる" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#DC1830;border-color:#DC1830">すべてのクッキーを受け入れる</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">同意に関する設定をカスタマイズ</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://bunkao.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。</p><p>「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。 </p><p>また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。</p><p>お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="必須クッキー" data-cky-tag="detail-category-title" style="color:#212121">必須クッキー</button><span class="cky-always-active">常に効にする</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">表示するクッキーがありません。</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="機能クッキー" data-cky-tag="detail-category-title" style="color:#212121">機能クッキー</button><span class="cky-always-active">常に効にする</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">表示するクッキーがありません。</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="分析用クッキー" data-cky-tag="detail-category-title" style="color:#212121">分析用クッキー</button><span class="cky-always-active">常に効にする</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">表示するクッキーがありません。</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="パフォーマンスクッキー" data-cky-tag="detail-category-title" style="color:#212121">パフォーマンスクッキー</button><span class="cky-always-active">常に効にする</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">表示するクッキーがありません。</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="広告クッキー" data-cky-tag="detail-category-title" style="color:#212121">広告クッキー</button><span class="cky-always-active">常に効にする</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">表示するクッキーがありません。</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="すべてのクッキーを拒否する" data-cky-tag="detail-reject-button" style="color:#DC1830;background-color:transparent;border-color:#DC1830"> すべてのクッキーを拒否する </button> <button class="cky-btn cky-btn-preferences" aria-label="設定の保存" data-cky-tag="detail-save-button" style="color:#DC1830;background-color:transparent;border-color:#DC1830"> 設定の保存 </button> <button class="cky-btn cky-btn-accept" aria-label="すべてのクッキーを受け入れる" data-cky-tag="detail-accept-button" style="color:#FFFFFF;background-color:#DC1830;border-color:#DC1830"> すべてのクッキーを受け入れる </button> </div></div></div></div></script> <script> function _katexRender(rootElement) { const eles = rootElement.querySelectorAll(".katex-eq:not(.katex-rendered)"); for(let idx=0; idx < eles.length; idx++) { const ele = eles[idx]; ele.classList.add("katex-rendered"); try { katex.render( ele.textContent, ele, { displayMode: ele.getAttribute("data-katex-display") === 'true', throwOnError: false } ); } catch(n) { ele.style.color="red"; ele.textContent = n.message; } } } function katexRender() { _katexRender(document); } document.addEventListener("DOMContentLoaded", function() { katexRender(); // Perform a KaTeX rendering step when the DOM is mutated. const katexObserver = new MutationObserver(function(mutations) { [].forEach.call(mutations, function(mutation) { if (mutation.target && mutation.target instanceof Element) { _katexRender(mutation.target); } }); }); const katexObservationConfig = { subtree: true, childList: true, attributes: true, characterData: true }; katexObserver.observe(document.body, katexObservationConfig); }); </script> <div id="reading-position-indicator"></div><div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"> <form method="get" class="tie-popup-search-form" action="https://bunkao.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="検索する" autocomplete="off" placeholder="入力してエンターを押してください" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">検索する</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"> <form method="get" class="tie-popup-search-form" action="https://bunkao.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="検索する" autocomplete="off" placeholder="検索する" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">検索する</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <!-- Sign in with Google button added by Site Kit --> <script type="text/javascript" src="https://accounts.google.com/gsi/client"></script> <script type="text/javascript"> /* <![CDATA[ */ (()=>{async function handleCredentialResponse(response){try{const res=await fetch('https://bunkao.com/wp-login.php?action=googlesitekit_auth',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams(response)});if(res.ok && res.redirected){location.assign(res.url);}}catch(error){console.error(error);}}google.accounts.id.initialize({client_id:'626101256319-0vno0n15b23n1jo5iv2nckun6qsaou5m.apps.googleusercontent.com',callback:handleCredentialResponse,library_name:'Site-Kit'});document.querySelectorAll('.googlesitekit-sign-in-with-google__frontend-output-button').forEach((siwgButtonDiv)=>{google.accounts.id.renderButton(siwgButtonDiv,{"theme":"outline","text":"signin_with","shape":"rectangular"});});})(); /* ]]> */ </script> <!-- End Sign in with Google button added by Site Kit --> <script type="text/javascript" src="https://bunkao.com/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.8" id="katex-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/bunkao.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" id="tie-scripts-js-after"> /* <![CDATA[ */ jQuery.ajax({ type : "GET", url : "https://bunkao.com/wp-admin/admin-ajax.php", data : "postviews_id=2854973&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); /* ]]> */ </script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> </body> </html><!-- WP Fastest Cache file was created in 2.178 seconds, on 30/04/2025 @ 13:03 --><!-- via php -->