インライン要素（インラインボックス）とは？
インライン要素（インラインボックス）は、テキストや他の要素を横に並べて表示するための要素です。主に文章の中で特定の部分を装飾したり、リンクを作成したりするのに使われます。
インライン要素の特徴
- 横に並ぶ
- インライン要素は、他のインライン要素と横に並んで表示されます。ブロック要素のように新しい行で始まりません。
- 幅や高さが内容に応じて決まる
- インライン要素は、その中にあるテキストやコンテンツのサイズに応じて幅や高さが決まります。
- ブロック要素を内包できない
- 基本的にインライン要素の中にブロック要素（例:
<div>）を含めることをしません。ただしa要素は、ブロック要素を含む記述を行います。
- 基本的にインライン要素の中にブロック要素（例:
- 主にテキストを操作するために使用される
- 文章の中で特定の文字列を太字にしたり、リンクを設定したりするために使います。
HTMLのインライン要素とは、行内に他の要素と共存して表示される要素のことです。ブラウザはこれらの要素を行の一部分として扱い、要素の前後に改行が挿入されません。一般的なインライン要は、次のようなものがあります
<a>: ハイパーリンクを作成するために使用されるインライン要素。<img>: 画像を表示するために使用されるインライン要素。<strong>や<b> <em>: テキストを強調表示するために使用される要素。<strong>と<b>は通常、太字、<em>は斜体で表示されますが、ブラウザやスタイルシートによって異なります。<span>: テキストの一部をグループ化するために使用される汎用的なインライン要素。<input>: フォーム内の入力フィールドを作成するために使用される要素。
これらの要素は、通常、ブロック要素（例: <div>や<p>）の中に含まれますが、必要に応じてテキストや他の要素と同じ行に配置することもできます。
一方で、ブロック要素は通常、自身が占有する領域全体を占めるため、他の要素と同じ行に配置することはできません。代わりに、ブロック要素は新しい行で開始し、それに続く要素を次の行に配置します。
a要素 （anchor element）
<a>要素は、HTML文書内でハイパーリンク（ハイパーテキストリンク）を作成するための要素です。ハイパーリンクは他のWebページ、ファイル、位置、またはリソースにジャンプするための手段として使用されます。
<!--文字リンク-->
<a href="https://example.com">Visit Example.com</a>
<!--画像リンク-->
<a href="https://example.com">
<img src="example.jpg" alt="Example Image">
</a>
<!--相対的なリンク-->
<a href="/about">About Us</a>
<!--絶対アドレスなリンク-->
<a href="https://example.com" title="Visit Example.com">Example.com</a>
<!--絶対アドレスを別ウィンドウで開く-->
<a href="https://example.com" target="_blank">Open in New Window</a>
<!--メールアドレスのリンク-->
<a href="mailto:info@example.com">Contact Us</a>
img要素 (image element)
<img>要素は、HTML文書内に画像を表示するための要素です。<img>要素は空要素であり、開始タグと終了タグの間にコンテンツを持ちません。代わりに、画像のソースを指定するためのsrc属性を使用します。
<img src="画像のURL" alt="代替テキスト">
src：表示する画像のURLを指定します。この属性は必須です。alt：画像の代替テキストを指定します。画像が読み込めない場合や、視覚障害者向けの補助技術が利用される場合に表示されます。この属性は推奨されますが、必須ではありません。
強調タグとは？（<strong> <em> <b> <i>）
HTMLには、文章の中で特定の語句を強調・装飾するためのタグ（要素）がいくつかあります。特に以下の4つは、インライン要素として頻繁に使用される「強調タグ」に分類されます
| 要素 | 主な目的 | 見た目（デフォルト） | 意味的な強調 |
|---|---|---|---|
<strong> | 意味的に重要な内容 | 太字 | あり（高い） |
<em> | 意味的に軽い強調（感情など） | 斜体 | あり（中程度） |
<b> | 視覚的に目立たせる | 太字 | なし |
<i> | 特別な語句・言葉の区別 | 斜体 | なし |
<strong>：内容に強い重要性がある強調
<strong>要素は、その中に含まれるテキストを強調表示するために使用されるHTML要素です。<strong> は HTML要素内で、内容の重要性、重大性、または緊急性が高いテキストを表します。
- 意味的な強調（HTML5では「その部分が重要であることを示す」）
- スクリーンリーダーなどでも「強調」として認識されやすい
- 見た目は太字（
font-weight: bold）
<p>この文の中で、<strong>非常に重要な部分</strong>を示します。</p>
<em>：文章中の軽い強調、抑揚や感情を示す
- 「本当に」「ぜひ」など、感情的な語調の強調に使う
- ネスト（入れ子）することでより強い強調が可能
- デフォルトでは斜体表示
<p>この方法は、<em>本当に</em>おすすめです。</p> <p><em><strong>絶対に</strong></em>確認してください。</p> 常に重要な部分</strong>を示します。</p>
<b>：視覚的に太字にするだけの装飾
- 見た目だけを太字にしたいときに使う（意味的な強調はなし）
- たとえばキーワードや見出し内の視認性アップのために使う
<p>ログインには <b>メールアドレス</b> と <b>パスワード</b> が必要です。</p>
<i>：語句の区別・引用・分類目的の斜体
- 外来語、専門用語、思考中の語句などに使用
- 書名や用語の区別にも利用される
<p>この文の中で、<stro<p>この言葉は <i>ラテン語</i> に由来しています。</p> <p>この映画は <i>Inception</i> を参考にしています。</p>
実際に使ってみよう！
以下は4つのタグを組み合わせた実例です。
<p> <strong>重要:</strong> パスワードを誰にも教えないでください。<br> これは <em>とても大事な注意事項</em> です。<br> <b>更新が必要な項目</b> を確認してください。<br> 専門用語：<i>Responsive Web Design</i>（レスポンシブ・ウェブデザイン） </p>
使い方まとめ
| タグ | 使う場面 | アクセシビリティ対応 |
|---|---|---|
<strong> | 重要性が高い内容の強調 | ✅ 音声読み上げでも強調される |
<em> | 感情的・語調の強調 | ✅ 抑揚で読み上げされる |
<b> | 見た目を太く装飾 | ❌ 意味は伝わらない |
<i> | 専門用語・強調語の表現 | ❌ 意味は伝わらない |
span要素 (span element)
<span>要素は、HTML文書内で行内のテキストや他のインライン要素をグループ化するための汎用的なコンテナ要素です。具体的には、<span>要素は特定のスタイルや属性を適用するための目印として使用されます。
<p>この文の中で <span style="color: red;">赤いテキスト</span> を含めます。</p>
ここでは、<span>要素が赤い色のテキストを囲んでいます。<span>要素にはstyle属性が含まれており、その中で赤い色を指定しています。このように<span>要素を使用することで、テキストや要素の特定の部分にスタイルを適用することができます。
また、意味合いを持たないので<span>要素はJavaScriptやCSSと組み合わせてさまざまな目的に使用されます。例えば、JavaScriptを使用して特定のテキストに対して動的な操作を行ったり、CSSで特定のセレクタを指定するために<span>要素が使用されます。
input要素 (インライン要素）
<input> 要素は、ユーザーに対してテキスト入力、ボタン、セレクトメニュー、ラジオボタン、チェックボックスなど、さまざまな種類の入力フィールドを提供するために使用される多目的のHTML要素です。
<input> 要素の、基本的な属性と使用法が以下になります。
<input type="text" name="username" value="値" placeholder="例：">
type属性は、入力フィールドのタイプを指定します。例えば、テキストボックス、パスワード、ラジオボタン、チェックボックスなどがあります。一般的な値には、”text”、”email”、”password”、”radio”、”checkbox” などがあります。name属性は、入力フィールドの名前を指定します。フォームがサーバーに送信される際に、この名前がデータのキーとして使用されます。value: 入力フィールドの初期値を指定します。value=”送信”placeholder: 入力フィールドに表示される、うっすらと表示される文字列＝プレースホルダーテキストを指定します。placeholder = “000-0000-0000”
type属性
<input> 要素の type 属性は、その入力フィールドがどのような種類のデータを受け入れるかを指定。
text (標準テキスト)
テキストボックスを作成します。一行のテキスト入力を受け入れるための基本的なフィールドです。
<input type="text" name="username">
password（パスワード）
パスワードを受け入れるためのフィールドで、入力された文字が黒い点で隠されるようになります。
<input type="password" name="password">
checkbox（チェックボックス）
チェックボックスを作成し、ユーザーが選択するかどうかを示します。value 属性でチェックされた場合の値を指定します。
<input type="checkbox" name="subscribe" value="1"> メールの購読
radio（ラジオボタン）
ラジオボタンを作成し、同じ name 属性を持つボタン群の中でユーザーは一つだけを選択できます。value 属性で選択された場合の値を指定できます。
<input type="radio" name="gender" value="male"> 男性 <input type="radio" name="gender" value="female"> 女性
file（画像・ファイル）
ファイルのアップロードを許可するためのフィールドです。ユーザーはファイルを選択して送信できます。
<input type="file" name="fileUpload">
number（数字）
数値を受け入れるテキストボックスを作成します。min、max、step 属性を使用して数値の範囲とステップを指定できます。
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
date（日付）
日付の選択が可能な入力フィールドを作成します。
<input type="date" name="birthdate">