コンピュータ

HTMLの基本と構造

HTML(HyperText Markup Language)は、ウェブページの構造を作成するための標準的なマークアップ言語です。ウェブサイトやウェブアプリケーションを作成する際、HTMLはコンテンツを構造化し、視覚的な要素やリンク、メディアなどを表示するために使用されます。HTMLはウェブの基盤となる技術の一つであり、他の言語と組み合わせて動的でインタラクティブなウェブページを作成するために用いられます。

HTMLの基本的な構成要素

HTML文書は、いくつかの基本的な要素から成り立っています。最も重要な要素は「タグ」と呼ばれ、これによりウェブページのコンテンツや構造が定義されます。タグは通常、角括弧(< >)で囲まれており、開始タグと終了タグのペアとして使われます。例えば、段落を定義するためには

タグを使用します。

1. ドキュメントタイプ宣言(DOCTYPE宣言)

HTML文書の最初に記載されるのがDOCTYPE宣言です。これは、文書がどのHTMLのバージョンで書かれているかをブラウザに示すもので、HTML5の場合は以下のように記載します:

html
html>

2. タグ

HTML文書全体を囲む最も基本的なタグがタグです。このタグ内には、ページ全体のコンテンツが配置されます。タグは開始タグと終了タグを持ち、文書全体を示します。

html
<html> html>

3. タグ

タグは、HTML文書のメタ情報やリンク、スタイルシート、スクリプトなどを定義するための部分です。この部分はブラウザに直接表示されることはなく、ウェブページの構造や動作に影響を与えます。タグ内には、以下のような要素が含まれることがあります。

  • タグ(文書の文字エンコーディングや言語を指定)
  • </code>タグ(ページのタイトルを設定)</li> <li data-start="903" data-end="930"><code data-start="905" data-end="913"><link></code>タグ(外部スタイルシートをリンク)</li> <li data-start="931" data-end="958"><code data-start="933" data-end="942"><br /> <style></code>タグ(内部スタイルシートを定義)</li> <li data-start="959" data-end="991"><code data-start="961" data-end="971"><script></code>タグ(JavaScriptコードを挿入)</li> </ul> <pre class="!overflow-visible" data-start="993" data-end="1116"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">head</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">meta</span></span></span><span> </span><span><span class="hljs-attr">charset</span></span><span>=</span><span><span class="hljs-string">"UTF-8"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">title</span></span></span><span>>ウェブページのタイトル</span><span><span class="hljs-tag"></<span class="hljs-name">title</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">link</span></span></span><span> </span><span><span class="hljs-attr">rel</span></span><span>=</span><span><span class="hljs-string">"stylesheet"</span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"style.css"</span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">head</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="1118" data-end="1136">4. <code data-start="1126" data-end="1134"><body></code>タグ</h4> <p data-start="1137" data-end="1259"><code data-start="1137" data-end="1145"><body></code>タグは、実際にブラウザに表示されるコンテンツが含まれる部分です。テキスト、画像、リンク、ボタンなど、ユーザーがインタラクトするすべての要素はこの部分に配置されます。例えば、段落やリスト、画像などを表示するためのタグが含まれます。</p> <pre class="!overflow-visible" data-start="1261" data-end="1329"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">body</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>ウェルカムページ</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>これはHTMLの例です。</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">body</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="1331" data-end="1352">HTMLの基本的なタグとその使用例</h3> <p data-start="1354" data-end="1395">HTMLにはさまざまなタグがありますが、以下は最もよく使用される基本的なタグです。</p> <h4 data-start="1397" data-end="1410">1. 見出しタグ</h4> <p data-start="1411" data-end="1521">HTMLには6種類の見出しタグ(<code data-start="1427" data-end="1433"></p> <h1></code>~<code data-start="1434" data-end="1440"></p> <h6></code>)があります。これらは、ウェブページの重要な見出しを定義するために使用されます。<code data-start="1480" data-end="1486"></p> <h1></code>は最も重要な見出し、<code data-start="1496" data-end="1502"></p> <h6></code>は最も低い重要度の見出しを意味します。</p> <pre class="!overflow-visible" data-start="1523" data-end="1570"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>最も重要な見出し</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>次に重要な見出し</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="1572" data-end="1584">2. 段落タグ</h4> <p data-start="1585" data-end="1639">段落を作成するためには<code data-start="1596" data-end="1601"></p> <p></code>タグを使用します。テキストが段落として表示され、文書内で内容が区切られます。</p> <pre class="!overflow-visible" data-start="1641" data-end="1668"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>これは段落です。</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="1670" data-end="1683">3. リストタグ</h4> <p data-start="1684" data-end="1755">HTMLでは順序付きリスト(<code data-start="1698" data-end="1704"></p> <ol></code>)や順不同リスト(<code data-start="1713" data-end="1719"></p> <ul></code>)を作成することができます。リストの項目は<code data-start="1740" data-end="1746"></p> <li></code>タグで定義します。</p> <ul data-start="1757" data-end="1767"> <li data-start="1757" data-end="1767">順序付きリスト:</li> </ul> <pre class="!overflow-visible" data-start="1768" data-end="1823"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">ol</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>最初の項目</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>次の項目</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">ol</span></span></span><span>> </span></span></code></div></div></pre> <ul data-start="1825" data-end="1834"> <li data-start="1825" data-end="1834">順不同リスト:</li> </ul> <pre class="!overflow-visible" data-start="1835" data-end="1891"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">ul</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>アイテム1</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>アイテム2</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">ul</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="1893" data-end="1906">4. リンクタグ</h4> <p data-start="1907" data-end="1957">リンクを作成するためには<code data-start="1919" data-end="1924"><a></code>タグを使用します。<code data-start="1933" data-end="1939">href</code>属性にリンク先のURLを指定します。</p> <pre class="!overflow-visible" data-start="1959" data-end="2019"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"https://www.example.com"</span></span><span>>Exampleサイト</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="2021" data-end="2033">5. 画像タグ</h4> <p data-start="2034" data-end="2121">画像をウェブページに表示するためには<code data-start="2052" data-end="2059"><img></code>タグを使用します。<code data-start="2068" data-end="2073">src</code>属性に画像のURLを指定し、<code data-start="2087" data-end="2092">alt</code>属性には画像が表示されない場合の代替テキストを記述します。</p> <pre class="!overflow-visible" data-start="2123" data-end="2168"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">img</span></span></span><span> </span><span><span class="hljs-attr">src</span></span><span>=</span><span><span class="hljs-string">"image.jpg"</span></span><span> </span><span><span class="hljs-attr">alt</span></span><span>=</span><span><span class="hljs-string">"画像の説明"</span></span><span>> </span></span></code></div></div></pre> <h3 data-start="2170" data-end="2185">HTML5の新しい要素</h3> <p data-start="2187" data-end="2299">HTML5では、従来のタグに加えて新しいセマンティック要素が追加され、文書の意味構造をより明確にしました。これにより、検索エンジンやユーザーエージェント(ブラウザ)がコンテンツをより理解しやすくなります。以下はその一部です。</p> <ul data-start="2301" data-end="2467"> <li data-start="2301" data-end="2336"><code data-start="2303" data-end="2313"><br /> <header></code>: ページやセクションのヘッダーを定義します。</li> <li data-start="2337" data-end="2372"><code data-start="2339" data-end="2349"><br /> <footer></code>: ページやセクションのフッターを定義します。</li> <li data-start="2373" data-end="2404"><code data-start="2375" data-end="2386"><br /> <article></code>: 独立したコンテンツを定義します。</li> <li data-start="2405" data-end="2438"><code data-start="2407" data-end="2418"><br /> <section></code>: 複数のコンテンツをグループ化します。</li> <li data-start="2439" data-end="2467"><code data-start="2441" data-end="2448"><br /> <nav></code>: ナビゲーションリンクを定義します。</li> </ul> <pre class="!overflow-visible" data-start="2469" data-end="2623"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>ウェブサイトのタイトル</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">article</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>記事のタイトル</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>記事の内容...</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">article</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">footer</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>© 2025 ウェブサイト名</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">footer</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="2625" data-end="2636">HTMLの属性</h3> <p data-start="2638" data-end="2769">HTMLのタグには、タグの動作や外観を変更するための属性を設定することができます。属性は、タグの開始タグ内に記述され、<code data-start="2697" data-end="2711">name="value"</code>の形式で指定されます。例えば、<code data-start="2726" data-end="2731"><a></code>タグの<code data-start="2734" data-end="2740">href</code>属性や、<code data-start="2744" data-end="2751"><img></code>タグの<code data-start="2754" data-end="2759">src</code>属性などがあります。</p> <h4 data-start="2771" data-end="2788">1. <code data-start="2779" data-end="2786">class</code>属性</h4> <p data-start="2789" data-end="2825"><code data-start="2789" data-end="2796">class</code>属性は、CSSで特定のスタイルを適用するために使用します。</p> <pre class="!overflow-visible" data-start="2827" data-end="2881"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span> </span><span><span class="hljs-attr">class</span></span><span>=</span><span><span class="hljs-string">"intro"</span></span><span>>この段落には特定のスタイルが適用されます。</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span></span></code></div></div></pre> <h4 data-start="2883" data-end="2897">2. <code data-start="2891" data-end="2895">id</code>属性</h4> <p data-start="2898" data-end="2983"><code data-start="2898" data-end="2902">id</code>属性は、HTML要素に一意の識別子を付けるために使用します。JavaScriptやCSSでこの<code data-start="2949" data-end="2953">id</code>を利用して、要素にアクセスしたりスタイルを変更したりします。</p> <pre class="!overflow-visible" data-start="2985" data-end="3026"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute bottom-0 right-0 flex h-9 items-center pr-2"><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 px-4 py-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><span class="hljs-tag"><<span class="hljs-name">div</span></span></span><span> </span><span><span class="hljs-attr">id</span></span><span>=</span><span><span class="hljs-string">"header"</span></span><span>>ヘッダー内容</span><span><span class="hljs-tag"></<span class="hljs-name">div</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="3028" data-end="3043">HTMLの重要性と役割</h3> <p data-start="3045" data-end="3203">HTMLはウェブ開発の基盤となる技術であり、ウェブページの内容と構造を定義します。ウェブページのデザインや動的な機能を作成するためには、HTMLだけでなく、CSS(Cascading Style Sheets)やJavaScriptといった他の技術も必要ですが、HTMLは全てのウェブページの土台として欠かせません。</p> <p data-start="3205" data-end="3341">ウェブ開発において、HTMLは検索エンジン最適化(SEO)やアクセシビリティ(A11Y)の観点からも重要です。意味のあるHTMLタグを正しく使用することで、検索エンジンにおけるランキングを向上させることができ、視覚障害を持つユーザーにも適切な情報を提供することができます。</p> <p data-start="3343" data-end="3413" data-is-last-node="" data-is-only-node="">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">Last Updated: 19/03/2025</span><div class="tie-alignright"><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 19 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> Less than a minute</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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&url=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&name=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&description=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&media=" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&redirect_uri=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&redirect_uri=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&text=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/?HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&body=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" rel="external noopener nofollow" title="Share via Email" 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">Share via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Print" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Print</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-03-19T19:41:45+09:00","datePublished":"2025-03-19T19:41:45+09:00","dateModified":"2025-03-19T19:41:45+09:00","headline":"HTML\u306e\u57fa\u672c\u3068\u69cb\u9020","name":"HTML\u306e\u57fa\u672c\u3068\u69cb\u9020","keywords":[],"url":"https:\/\/bunkao.com\/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0\/","description":"HTML\uff08HyperText Markup Language\uff09\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u6a19\u6e96\u7684\u306a\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u8a00\u8a9e\u3067\u3059\u3002\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3084\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u969b\u3001HTML\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u69cb\u9020\u5316\u3057\u3001\u8996\u899a\u7684\u306a\u8981\u7d20\u3084\u30ea\u30f3\u30af\u3001\u30e1\u30c7\u30a3\u30a2\u306a\u3069\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002HTML\u306f\u30a6\u30a7\u30d6\u306e\u57fa\u76e4\u3068\u306a\u308b\u6280\u8853\u306e\u4e00\u3064\u3067\u3042\u308a\u3001\u4ed6\u306e\u8a00\u8a9e\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u52d5\u7684\u3067\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u7528\u3044","copyrightYear":"2025","articleSection":"\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf","articleBody":"HTML\uff08HyperText Markup Language\uff09\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u6a19\u6e96\u7684\u306a\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u8a00\u8a9e\u3067\u3059\u3002\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3084\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u969b\u3001HTML\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u69cb\u9020\u5316\u3057\u3001\u8996\u899a\u7684\u306a\u8981\u7d20\u3084\u30ea\u30f3\u30af\u3001\u30e1\u30c7\u30a3\u30a2\u306a\u3069\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002HTML\u306f\u30a6\u30a7\u30d6\u306e\u57fa\u76e4\u3068\u306a\u308b\u6280\u8853\u306e\u4e00\u3064\u3067\u3042\u308a\u3001\u4ed6\u306e\u8a00\u8a9e\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u52d5\u7684\u3067\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u3089\u308c\u307e\u3059\u3002\nHTML\u306e\u57fa\u672c\u7684\u306a\u69cb\u6210\u8981\u7d20\nHTML\u6587\u66f8\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u57fa\u672c\u7684\u306a\u8981\u7d20\u304b\u3089\u6210\u308a\u7acb\u3063\u3066\u3044\u307e\u3059\u3002\u6700\u3082\u91cd\u8981\u306a\u8981\u7d20\u306f\u300c\u30bf\u30b0\u300d\u3068\u547c\u3070\u308c\u3001\u3053\u308c\u306b\u3088\u308a\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3084\u69cb\u9020\u304c\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002\u30bf\u30b0\u306f\u901a\u5e38\u3001\u89d2\u62ec\u5f27\uff08< >\uff09\u3067\u56f2\u307e\u308c\u3066\u304a\u308a\u3001\u958b\u59cb\u30bf\u30b0\u3068\u7d42\u4e86\u30bf\u30b0\u306e\u30da\u30a2\u3068\u3057\u3066\u4f7f\u308f\u308c\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u6bb5\u843d\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\n1. \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30bf\u30a4\u30d7\u5ba3\u8a00\uff08DOCTYPE\u5ba3\u8a00\uff09\nHTML\u6587\u66f8\u306e\u6700\u521d\u306b\u8a18\u8f09\u3055\u308c\u308b\u306e\u304cDOCTYPE\u5ba3\u8a00\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u6587\u66f8\u304c\u3069\u306eHTML\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u66f8\u304b\u308c\u3066\u3044\u308b\u304b\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u793a\u3059\u3082\u306e\u3067\u3001HTML5\u306e\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8f09\u3057\u307e\u3059\uff1a\nhtmlCopyEdit\n\n2. \u30bf\u30b0\nHTML\u6587\u66f8\u5168\u4f53\u3092\u56f2\u3080\u6700\u3082\u57fa\u672c\u7684\u306a\u30bf\u30b0\u304c\u30bf\u30b0\u3067\u3059\u3002\u3053\u306e\u30bf\u30b0\u5185\u306b\u306f\u3001\u30da\u30fc\u30b8\u5168\u4f53\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002\u30bf\u30b0\u306f\u958b\u59cb\u30bf\u30b0\u3068\u7d42\u4e86\u30bf\u30b0\u3092\u6301\u3061\u3001\u6587\u66f8\u5168\u4f53\u3092\u793a\u3057\u307e\u3059\u3002\nhtmlCopyEdit\n \n\n\n3. \u30bf\u30b0\n\u30bf\u30b0\u306f\u3001HTML\u6587\u66f8\u306e\u30e1\u30bf\u60c5\u5831\u3084\u30ea\u30f3\u30af\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306a\u3069\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u90e8\u5206\u3067\u3059\u3002\u3053\u306e\u90e8\u5206\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u76f4\u63a5\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u306f\u306a\u304f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3084\u52d5\u4f5c\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u307e\u3059\u3002\u30bf\u30b0\u5185\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8981\u7d20\u304c\u542b\u307e\u308c\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\n\n\u30bf\u30b0\uff08\u6587\u66f8\u306e\u6587\u5b57\u30a8\u30f3\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3084\u8a00\u8a9e\u3092\u6307\u5b9a\uff09\n\u30bf\u30b0\uff08\u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u8a2d\u5b9a\uff09\n\u30bf\u30b0\uff08\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u30ea\u30f3\u30af\uff09\n\u30bf\u30b0\uff08\u5185\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u5b9a\u7fa9\uff09\n\u30bf\u30b0\uff08JavaScript\u30b3\u30fc\u30c9\u3092\u633f\u5165\uff09\n\nhtmlCopyEdit\n \n \u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb\n \n\n\n4. \u30bf\u30b0\n\u30bf\u30b0\u306f\u3001\u5b9f\u969b\u306b\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u542b\u307e\u308c\u308b\u90e8\u5206\u3067\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u3001\u753b\u50cf\u3001\u30ea\u30f3\u30af\u3001\u30dc\u30bf\u30f3\u306a\u3069\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a4\u30f3\u30bf\u30e9\u30af\u30c8\u3059\u308b\u3059\u3079\u3066\u306e\u8981\u7d20\u306f\u3053\u306e\u90e8\u5206\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u6bb5\u843d\u3084\u30ea\u30b9\u30c8\u3001\u753b\u50cf\u306a\u3069\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30bf\u30b0\u304c\u542b\u307e\u308c\u307e\u3059\u3002\nhtmlCopyEdit\n \u30a6\u30a7\u30eb\u30ab\u30e0\u30da\u30fc\u30b8\n \u3053\u308c\u306fHTML\u306e\u4f8b\u3067\u3059\u3002\n\n\nHTML\u306e\u57fa\u672c\u7684\u306a\u30bf\u30b0\u3068\u305d\u306e\u4f7f\u7528\u4f8b\nHTML\u306b\u306f\u3055\u307e\u3056\u307e\u306a\u30bf\u30b0\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u306f\u6700\u3082\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u57fa\u672c\u7684\u306a\u30bf\u30b0\u3067\u3059\u3002\n1. \u898b\u51fa\u3057\u30bf\u30b0\nHTML\u306b\u306f6\u7a2e\u985e\u306e\u898b\u51fa\u3057\u30bf\u30b0\uff08\uff5e\uff09\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u3089\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u91cd\u8981\u306a\u898b\u51fa\u3057\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u306f\u6700\u3082\u91cd\u8981\u306a\u898b\u51fa\u3057\u3001\u306f\u6700\u3082\u4f4e\u3044\u91cd\u8981\u5ea6\u306e\u898b\u51fa\u3057\u3092\u610f\u5473\u3057\u307e\u3059\u3002\nhtmlCopyEdit\u6700\u3082\u91cd\u8981\u306a\u898b\u51fa\u3057\n\u6b21\u306b\u91cd\u8981\u306a\u898b\u51fa\u3057\n\n2. \u6bb5\u843d\u30bf\u30b0\n\u6bb5\u843d\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u304c\u6bb5\u843d\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u3001\u6587\u66f8\u5185\u3067\u5185\u5bb9\u304c\u533a\u5207\u3089\u308c\u307e\u3059\u3002\nhtmlCopyEdit\u3053\u308c\u306f\u6bb5\u843d\u3067\u3059\u3002\n\n3. \u30ea\u30b9\u30c8\u30bf\u30b0\nHTML\u3067\u306f\u9806\u5e8f\u4ed8\u304d\u30ea\u30b9\u30c8\uff08\uff09\u3084\u9806\u4e0d\u540c\u30ea\u30b9\u30c8\uff08\uff09\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30ea\u30b9\u30c8\u306e\u9805\u76ee\u306f\u30bf\u30b0\u3067\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n\n\u9806\u5e8f\u4ed8\u304d\u30ea\u30b9\u30c8\uff1a\n\nhtmlCopyEdit\n \u6700\u521d\u306e\u9805\u76ee\n \u6b21\u306e\u9805\u76ee\n\n\n\n\u9806\u4e0d\u540c\u30ea\u30b9\u30c8\uff1a\n\nhtmlCopyEdit\n \u30a2\u30a4\u30c6\u30e01\n \u30a2\u30a4\u30c6\u30e02\n\n\n4. \u30ea\u30f3\u30af\u30bf\u30b0\n\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002href\u5c5e\u6027\u306b\u30ea\u30f3\u30af\u5148\u306eURL\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\nhtmlCopyEditExample\u30b5\u30a4\u30c8\n\n5. \u753b\u50cf\u30bf\u30b0\n\u753b\u50cf\u3092\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u306f\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002src\u5c5e\u6027\u306b\u753b\u50cf\u306eURL\u3092\u6307\u5b9a\u3057\u3001alt\u5c5e\u6027\u306b\u306f\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u306e\u4ee3\u66ff\u30c6\u30ad\u30b9\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002\nhtmlCopyEdit\n\nHTML5\u306e\u65b0\u3057\u3044\u8981\u7d20\nHTML5\u3067\u306f\u3001\u5f93\u6765\u306e\u30bf\u30b0\u306b\u52a0\u3048\u3066\u65b0\u3057\u3044\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u8981\u7d20\u304c\u8ffd\u52a0\u3055\u308c\u3001\u6587\u66f8\u306e\u610f\u5473\u69cb\u9020\u3092\u3088\u308a\u660e\u78ba\u306b\u3057\u307e\u3057\u305f\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u3084\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\uff08\u30d6\u30e9\u30a6\u30b6\uff09\u304c\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u3088\u308a\u7406\u89e3\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u306f\u305d\u306e\u4e00\u90e8\u3067\u3059\u3002\n\n: \u30da\u30fc\u30b8\u3084\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n: \u30da\u30fc\u30b8\u3084\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u30d5\u30c3\u30bf\u30fc\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n: \u72ec\u7acb\u3057\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n: \u8907\u6570\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u3057\u307e\u3059\u3002\n: \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ea\u30f3\u30af\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n\nhtmlCopyEdit\n \u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30bf\u30a4\u30c8\u30eb\n\n\n \u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\n \u8a18\u4e8b\u306e\u5185\u5bb9...\n\n\n \u00a9 2025 \u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u540d\n\n\nHTML\u306e\u5c5e\u6027\nHTML\u306e\u30bf\u30b0\u306b\u306f\u3001\u30bf\u30b0\u306e\u52d5\u4f5c\u3084\u5916\u89b3\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u5c5e\u6027\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u5c5e\u6027\u306f\u3001\u30bf\u30b0\u306e\u958b\u59cb\u30bf\u30b0\u5185\u306b\u8a18\u8ff0\u3055\u308c\u3001name=\"value\"\u306e\u5f62\u5f0f\u3067\u6307\u5b9a\u3055\u308c\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u30bf\u30b0\u306ehref\u5c5e\u6027\u3084\u3001\u30bf\u30b0\u306esrc\u5c5e\u6027\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002\n1. class\u5c5e\u6027\nclass\u5c5e\u6027\u306f\u3001CSS\u3067\u7279\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\nhtmlCopyEdit\u3053\u306e\u6bb5\u843d\u306b\u306f\u7279\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002\n\n2. id\u5c5e\u6027\nid\u5c5e\u6027\u306f\u3001HTML\u8981\u7d20\u306b\u4e00\u610f\u306e\u8b58\u5225\u5b50\u3092\u4ed8\u3051\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002JavaScript\u3084CSS\u3067\u3053\u306eid\u3092\u5229\u7528\u3057\u3066\u3001\u8981\u7d20\u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u308a\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3057\u305f\u308a\u3057\u307e\u3059\u3002\nhtmlCopyEdit\u30d8\u30c3\u30c0\u30fc\u5185\u5bb9\n\nHTML\u306e\u91cd\u8981\u6027\u3068\u5f79\u5272\nHTML\u306f\u30a6\u30a7\u30d6\u958b\u767a\u306e\u57fa\u76e4\u3068\u306a\u308b\u6280\u8853\u3067\u3042\u308a\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u5185\u5bb9\u3068\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u3084\u52d5\u7684\u306a\u6a5f\u80fd\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u306f\u3001HTML\u3060\u3051\u3067\u306a\u304f\u3001CSS\uff08Cascading Style Sheets\uff09\u3084JavaScript\u3068\u3044\u3063\u305f\u4ed6\u306e\u6280\u8853\u3082\u5fc5\u8981\u3067\u3059\u304c\u3001HTML\u306f\u5168\u3066\u306e\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u571f\u53f0\u3068\u3057\u3066\u6b20\u304b\u305b\u307e\u305b\u3093\u3002\n\u30a6\u30a7\u30d6\u958b\u767a\u306b\u304a\u3044\u3066\u3001HTML\u306f\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u6700\u9069\u5316\uff08SEO\uff09\u3084\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\uff08A11Y\uff09\u306e\u89b3\u70b9\u304b\u3089\u3082\u91cd\u8981\u3067\u3059\u3002\u610f\u5473\u306e\u3042\u308bHTML\u30bf\u30b0\u3092\u6b63\u3057\u304f\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u306b\u304a\u3051\u308b\u30e9\u30f3\u30ad\u30f3\u30b0\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u8996\u899a\u969c\u5bb3\u3092\u6301\u3064\u30e6\u30fc\u30b6\u30fc\u306b\u3082\u9069\u5207\u306a\u60c5\u5831\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\nHTML\u306e\u9032\u5316\u306b\u3088\u308a\u3001\u3088\u308a\u8c4a\u304b\u306a\u30a6\u30a7\u30d6\u4f53\u9a13\u304c\u53ef\u80fd\u306b\u306a\u308a\u3001\u30a6\u30a7\u30d6\u958b\u767a\u8005\u306f\u305d\u306e\u77e5\u8b58\u3092\u6d3b\u7528\u3057\u3066\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u3067\u9b45\u529b\u7684\u306a\u30b5\u30a4\u30c8\u3092\u4f5c\u308a\u4e0a\u3052\u3066\u3044\u307e\u3059\u3002","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u6587\u5316","logo":{"@type":"ImageObject","url":"https:\/\/bunkao.com\/wp-content\/uploads\/2025\/11\/logo_bunkao123.png"}},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/bunkao.com\/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0\/","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\/11\/logo.png","width":1200,"height":1004}}</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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&url=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&name=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&description=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&media=" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&body=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" rel="external noopener nofollow" title="Share via Email" 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">Share via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Print" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Print</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">Read Next</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/11/logo.png)" class="slide slide-id-2968547 tie-slide-1 tie-standard"> <a href="https://bunkao.com/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%81%a7%e3%82%b3%e3%83%94%e3%83%bc%ef%bc%86%e3%83%9a%e3%83%bc%e3%82%b9%e3%83%88/" class="all-over-thumb-link" aria-label="キーボードでコピー&ペースト"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%81%a7%e3%82%b3%e3%83%94%e3%83%bc%ef%bc%86%e3%83%9a%e3%83%bc%e3%82%b9%e3%83%88/">キーボードでコピー&ペースト</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/11/logo.png)" class="slide slide-id-2968523 tie-slide-2 tie-standard"> <a href="https://bunkao.com/%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3%e9%9f%b3%e3%81%8c%e5%87%ba%e3%81%aa%e3%81%84%e5%af%be%e5%87%a6%e6%b3%95/" class="all-over-thumb-link" aria-label="パソコン音が出ない対処法"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3%e9%9f%b3%e3%81%8c%e5%87%ba%e3%81%aa%e3%81%84%e5%af%be%e5%87%a6%e6%b3%95/">パソコン音が出ない対処法</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/11/logo.png)" class="slide slide-id-2968505 tie-slide-3 tie-standard"> <a href="https://bunkao.com/word%e3%81%a7%e3%81%ae%e6%96%87%e6%9b%b8%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95/" class="all-over-thumb-link" aria-label="Wordでの文書作成方法"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/word%e3%81%a7%e3%81%ae%e6%96%87%e6%9b%b8%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95/">Wordでの文書作成方法</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/11/logo.png)" class="slide slide-id-2968479 tie-slide-4 tie-standard"> <a href="https://bunkao.com/word%e3%81%8b%e3%82%89%e3%81%ae%e5%8d%b0%e5%88%b7%e6%96%b9%e6%b3%95/" class="all-over-thumb-link" aria-label="Wordからの印刷方法"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/word%e3%81%8b%e3%82%89%e3%81%ae%e5%8d%b0%e5%88%b7%e6%96%b9%e6%b3%95/">Wordからの印刷方法</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/11/logo.png)" class="slide slide-id-2968455 tie-slide-5 tie-standard"> <a href="https://bunkao.com/%e7%94%bb%e9%9d%a2%e9%8c%b2%e7%94%bb%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89-3/" class="all-over-thumb-link" aria-label="画面録画の完全ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e7%94%bb%e9%9d%a2%e9%8c%b2%e7%94%bb%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89-3/">画面録画の完全ガイド</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/11/logo.png)" class="slide slide-id-2968431 tie-slide-6 tie-standard"> <a href="https://bunkao.com/windows-8-%e6%9b%b4%e6%96%b0%e3%82%ac%e3%82%a4%e3%83%89/" class="all-over-thumb-link" aria-label="Windows 8 更新ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/windows-8-%e6%9b%b4%e6%96%b0%e3%82%ac%e3%82%a4%e3%83%89/">Windows 8 更新ガイド</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/11/logo.png)" class="slide slide-id-2968407 tie-slide-1 tie-standard"> <a href="https://bunkao.com/word%e6%a4%9c%e7%b4%a2%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/" class="all-over-thumb-link" aria-label="Word検索の完全ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/word%e6%a4%9c%e7%b4%a2%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/">Word検索の完全ガイド</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/11/logo.png)" class="slide slide-id-2968381 tie-slide-2 tie-standard"> <a href="https://bunkao.com/%e3%82%bf%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%e9%80%9f%e5%ba%a6%e5%90%91%e4%b8%8a%e6%b3%95-3/" class="all-over-thumb-link" aria-label="タイピング速度向上法"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e3%82%bf%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%e9%80%9f%e5%ba%a6%e5%90%91%e4%b8%8a%e6%b3%95-3/">タイピング速度向上法</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/11/logo.png)" class="slide slide-id-2968337 tie-slide-3 tie-standard"> <a href="https://bunkao.com/%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e4%bd%9c%e6%88%90%e3%82%ac%e3%82%a4%e3%83%89/" class="all-over-thumb-link" aria-label="デスクトップフォルダ作成ガイド"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e4%bd%9c%e6%88%90%e3%82%ac%e3%82%a4%e3%83%89/">デスクトップフォルダ作成ガイド</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/11/logo.png)" class="slide slide-id-2968317 tie-slide-4 tie-standard"> <a href="https://bunkao.com/%e6%9c%80%e9%81%a9%e3%81%aa%e3%83%a1%e3%83%a2%e3%83%aa%e3%81%a8%e3%82%b9%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b8%e9%81%b8%e3%81%b3/" class="all-over-thumb-link" aria-label="最適なメモリとストレージ選び"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-54" href="https://bunkao.com/category/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf/">コンピュータ</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://bunkao.com/%e6%9c%80%e9%81%a9%e3%81%aa%e3%83%a1%e3%83%a2%e3%83%aa%e3%81%a8%e3%82%b9%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b8%e9%81%b8%e3%81%b3/">最適なメモリとストレージ選び</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">キーボードでコピー&ペースト</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">パソコン音が出ない対処法</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">Wordでの文書作成方法</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Wordからの印刷方法</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-3"> <div class="slide-overlay"> <h3 class="thumb-title">画面録画の完全ガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-4"> <div class="slide-overlay"> <h3 class="thumb-title">Windows 8 更新ガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">Word検索の完全ガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">タイピング速度向上法</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">デスクトップフォルダ作成ガイド</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">最適なメモリとストレージ選び</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/%e4%ba%ba%e7%94%9f%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b%e6%96%b9%e6%b3%95/" style="background-image: url(https://bunkao.com/wp-content/uploads/2025/11/logo-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/%e4%ba%ba%e7%94%9f%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b%e6%96%b9%e6%b3%95/" rel="prev"> <h3 class="post-title">人生を変える方法</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://bunkao.com/%e3%82%ae%e3%83%aa%e3%82%bb%e3%83%aa%e3%83%b3%e3%81%ae%e8%82%8c%e3%81%b8%e3%81%ae%e5%8a%b9%e6%9e%9c/" style="background-image: url(https://bunkao.com/wp-content/uploads/2025/11/logo-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/%e3%82%ae%e3%83%aa%e3%82%bb%e3%83%aa%e3%83%b3%e3%81%ae%e8%82%8c%e3%81%b8%e3%81%ae%e5%8a%b9%e6%9e%9c/" rel="next"> <h3 class="post-title">ギリセリンの肌への効果</h3> </a> </div> </div><!-- .prev-next-post-nav /--> <div id="related-posts" class="container-wrapper"> <div class="mag-box-title the-global-title"> <h3>Related Articles</h3> </div> <div class="related-posts-list"> <div class="related-item tie-standard"> <a aria-label="データベースの種類と特徴" href="https://bunkao.com/%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ae%e7%a8%ae%e9%a1%9e%e3%81%a8%e7%89%b9%e5%be%b4-2/" 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="390" height="220" src="https://bunkao.com/wp-content/uploads/2025/11/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" fetchpriority="high" /></a> <h3 class="post-title"><a href="https://bunkao.com/%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ae%e7%a8%ae%e9%a1%9e%e3%81%a8%e7%89%b9%e5%be%b4-2/">データベースの種類と特徴</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="CPUの主要構成要素" href="https://bunkao.com/cpu%e3%81%ae%e4%b8%bb%e8%a6%81%e6%a7%8b%e6%88%90%e8%a6%81%e7%b4%a0/" 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="390" height="220" src="https://bunkao.com/wp-content/uploads/2025/11/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://bunkao.com/cpu%e3%81%ae%e4%b8%bb%e8%a6%81%e6%a7%8b%e6%88%90%e8%a6%81%e7%b4%a0/">CPUの主要構成要素</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="コンピュータ技術の未来" href="https://bunkao.com/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e6%8a%80%e8%a1%93%e3%81%ae%e6%9c%aa%e6%9d%a5/" 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="390" height="220" src="https://bunkao.com/wp-content/uploads/2025/11/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://bunkao.com/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e6%8a%80%e8%a1%93%e3%81%ae%e6%9c%aa%e6%9d%a5/">コンピュータ技術の未来</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="最初のコンピュータの歴史" href="https://bunkao.com/%e6%9c%80%e5%88%9d%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e3%81%ae%e6%ad%b4%e5%8f%b2/" 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="390" height="220" src="https://bunkao.com/wp-content/uploads/2025/11/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://bunkao.com/%e6%9c%80%e5%88%9d%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e3%81%ae%e6%ad%b4%e5%8f%b2/">最初のコンピュータの歴史</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> </div><!-- .related-posts-list /--> </div><!-- #related-posts /--> </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">Check Also</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="グラフィックカードの選び方" href="https://bunkao.com/%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%ab%e3%83%bc%e3%83%89%e3%81%ae%e9%81%b8%e3%81%b3%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/11/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small 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%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%ab%e3%83%bc%e3%83%89%e3%81%ae%e9%81%b8%e3%81%b3%e6%96%b9/">グラフィックカードの選び方</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="コンピュータとインターネットの基礎" href="https://bunkao.com/%e3%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e3%81%a8%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e3%81%ae%e5%9f%ba%e7%a4%8e/" 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/11/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small 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%82%b3%e3%83%b3%e3%83%94%e3%83%a5%e3%83%bc%e3%82%bf%e3%81%a8%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e3%81%ae%e5%9f%ba%e7%a4%8e/">コンピュータとインターネットの基礎</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="RAMとROMの違い" href="https://bunkao.com/ram%e3%81%a8rom%e3%81%ae%e9%81%95%e3%81%84/" 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/11/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small 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/ram%e3%81%a8rom%e3%81%ae%e9%81%95%e3%81%84/">RAMとROMの違い</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="キーボード入力できない解決法" href="https://bunkao.com/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e5%85%a5%e5%8a%9b%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84%e8%a7%a3%e6%b1%ba%e6%b3%95/" 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/11/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small 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%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e5%85%a5%e5%8a%9b%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84%e8%a7%a3%e6%b1%ba%e6%b3%95/">キーボード入力できない解決法</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="PowerPointプレゼン作成ガイド" href="https://bunkao.com/powerpoint%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e4%bd%9c%e6%88%90%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/11/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small 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/powerpoint%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e4%bd%9c%e6%88%90%e3%82%ac%e3%82%a4%e3%83%89/">PowerPointプレゼン作成ガイド</a> <div class="post-meta"> </div> </div> </li> </ul><!-- .related-posts-list /--> </div> </div><!-- #related-posts /--> </div><!-- .main-content-row /--></div><!-- #content /--> <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> © 著作権 2026, すべての権利を保有  |  <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><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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&url=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&name=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&description=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0&media=" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&redirect_uri=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&redirect_uri=https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/&text=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0" 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=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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/?HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%A7%8B%E9%80%A0%20https://bunkao.com/html%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e6%a7%8b%e9%80%a0/" 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 slide-sidebar-desktop is-fullwidth 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-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul></ul> </div><!-- #mobile-social-icons /--> <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><!-- #mobile-container /--> <div id="slide-sidebar-widgets"> <div id="block-2" class="container-wrapper widget widget_block widget_search"><form role="search" method="get" action="https://bunkao.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >検索</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="検索" class="wp-block-search__button wp-element-button" type="submit" >検索</button></div></form><div class="clearfix"></div></div><!-- .widget /--><div id="block-3" class="container-wrapper widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://bunkao.com/%e6%ad%af%e3%81%ae%e8%86%bf%e7%98%8d%e3%81%ae%e5%bd%b1%e9%9f%bf/">歯の膿瘍の影響</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bunkao.com/%e8%a6%aa%e7%9f%a5%e3%82%89%e3%81%9a%e3%81%ae%e7%97%9b%e3%81%bf%e5%af%be%e7%ad%96/">親知らずの痛み対策</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bunkao.com/%e5%ad%90%e3%81%a9%e3%82%82%e3%81%ae%e6%ad%af%e3%81%ae%e7%97%9b%e3%81%bf%e5%af%be%e7%ad%96-3/">子どもの歯の痛み対策</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bunkao.com/%e8%a6%aa%e7%9f%a5%e3%82%89%e3%81%9a%e6%8a%9c%e6%ad%af%e5%be%8c%e3%81%ae%e7%82%8e%e7%97%87/">親知らず抜歯後の炎症</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bunkao.com/%e7%9f%a5%e6%81%b5%e6%ad%af%e3%81%ae%e7%82%8e%e7%97%87%e6%b2%bb%e7%99%82/">知恵歯の炎症治療</a></li> </ul></div></div><div class="clearfix"></div></div><!-- .widget /--><div id="block-4" class="container-wrapper widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Comments</h2><div class="no-comments wp-block-latest-comments">表示できるコメントはありません。</div></div></div><div class="clearfix"></div></div><!-- .widget /--> </div> </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> <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><div id="reading-position-indicator"></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="Search for" autocomplete="off" placeholder="Type and hit Enter" /> <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">Search for</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 " inputmode="search" type="text" name="s" title="Search for" autocomplete="off" placeholder="Search for" /> <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">Search for</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://bunkao.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-consent-mode-bc2e26cfa69fcd4a8261.js" id="googlesitekit-consent-mode-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/plugins/katex/assets/katex-0.16.22/katex.min.js?ver=2.2.5" 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":"\u003Cdiv class=\"loader-overlay\"\u003E\u003Cdiv class=\"spinner-circle\"\u003E\u003C/div\u003E\u003C/div\u003E","type_to_search":"1","lang_no_results":"Nothing Found","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; //# sourceURL=tie-scripts-js-extra /* ]]> */ </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" 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/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script type="text/javascript" id="wp-consent-api-js-extra"> /* <![CDATA[ */ var consent_api = {"consent_type":"","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; //# sourceURL=wp-consent-api-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://bunkao.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.0.0" id="wp-consent-api-js"></script> <script type="text/javascript" src="https://bunkao.com/wp-content/plugins/katex/assets/render.js?ver=2.2.5" id="katex-render-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://bunkao.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://bunkao.com/wp-includes/js/wp-emoji-loader.min.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><script type="text/javascript"> jQuery.ajax({ type : "GET", url : "https://bunkao.com/wp-admin/admin-ajax.php", data : "postviews_id=2901437&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); </script> </body> </html>