HTML要素 インライン要素

インライン要素

HTMLのインライン要素とは、行内に他の要素と共存して表示される要素のことです。ブラウザはこれらの要素を行の一部分として扱い、要素の前後に改行が挿入されません。一般的なインライン要は、次のようなものがあります

  1. <a>: ハイパーリンクを作成するために使用されるインライン要素。
  2. <img>: 画像を表示するために使用されるインライン要素。
  3. <strong><b> <em>: テキストを強調表示するために使用される要素。<strong><b>は通常、太字、<em>は斜体で表示されますが、ブラウザやスタイルシートによって異なります。
  4. <span>: テキストの一部をグループ化するために使用される汎用的なインライン要素。
  5. <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要素 (strong element) 他

<strong>要素は、その中に含まれるテキストを強調表示するために使用されるHTML要素です。<strong> は HTML要素内で、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画しますが単にテキストを太字にするだけには使いません。

<p>この部分は <strong>重要なテキスト</strong> です。</p>

また<strong>要素のように、強調する要素には、他に<b>要素、<em>要素などがあります。

<b>要素と<strong>要素の違い

ブラウザは通常、どちらの要素もデフォルトで太字で表示しますが、意味や目的が異なることに注意する必要があります。

  • <strong>要素は、より高い重要性を持つテキストを強調表示するためのものです。そのテキストが文脈や意味上で重要であることを示すために使用されます。
  • <b>要素は、テキストに注意を引くために使用される単純な強調表示のためのものです。重要性や意味合いを持たない単に太字にするだけの目的で使用されます。

<em>要素と<strong>要素の違い

さらに強調を表す要素とし<em>要素があります。

  • HTML 4では、<strong>要素は単により強い強調として使用されました。つまり、テキストをより目立たせるために使用されました。
  • HTML 5では、<strong>要素は「内容の強い重要性」を表すものとして定義されています。つまり、そのテキストが文脈や意味上で非常に重要であることを示すために使用されます。

<em>要素は、テキストの発音の強調によって文の意味が変わる場合に使用されます。一方、<strong>要素は、文の一部に重要性を加えるために使用されます。

両方の要素を入れ子にして使用することで、それぞれの要素の相対的な重要度や強調度を強調することができます。つまり、<strong><em>を組み合わせて使用することで、より複雑な意味や強調を表現することができます。

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(数字)

数値を受け入れるテキストボックスを作成します。minmaxstep 属性を使用して数値の範囲とステップを指定できます。

<input type="number" name="quantity" min="1" max="10" step="1" value="1">

date(日付)

日付の選択が可能な入力フィールドを作成します。

<input type="date" name="birthdate">