HTMLでインラインレベルおよびブロックレベルの要素を使用する方法

このチュートリアルでは、HTMLのインラインレベル要素とブロックレベル要素の違いと、それらがページ上のコンテンツの位置にどのように影響するかを説明します。

HTMLドキュメントに要素を配置するときは、これらの要素がWebページ上のスペースをどのように占めるかを理解することが重要です。特定の要素は、それらに含まれるコンテンツよりもWebページ上ではるかに多くのスペースを占める可能性があります。さまざまな要素タイプの動作を理解すると、それらがページ上の他の要素の位置にどのように影響するかを予測するのに役立ちます。

一般に、要素には2つの異なるタイプ（インラインレベル要素とブロックレベル要素）があり、これらの間隔のデフォルトは互いに異なる動作をします。以下では、これらの要素のデフォルト設定がWebページ上の位置と、近くの要素の位置をどのように決定するかについて説明します。

インラインレベルの要素

インライン要素は、水平方向の幅が、含まれるコンテンツの幅によって決定される要素です。 <strong>要素と最後のチュートリアルで取り上げた<em>要素は、どちらもインライン要素の例です。

FirefoxのWebDeveloperInspectorを使用して、Webページ上のHTML要素のサイズを検査できます。（Chromeを使用している場合は、代わりにDeveloper Inspect Elementsツールを使用できますが、このチュートリアルではFirefoxのWeb Developerツールについて説明します。）

ブラウザに読み込んだindex.htmlファイルに戻ります。リロードする必要があり、その方法がわからない場合は、前回のチュートリアルのブラウザにHTMLファイルをロードするの手順を参照してください。

次に、上部のメニューバーの[ツール]メニュー項目に移動し、[Web開発者/インスペクター]を選択します。このメニュー項目を選択すると、WebページのHTMLとCSSを検査できるInspectorインターフェイスが開きます。次に、テキストMy strong textにカーソルを合わせると、テキストが水色で強調表示されます。この強調表示は、カーソルがカーソルを置いている要素が占めるスペースの全範囲を示しています。ご想像のとおり、要素の占有スペースは、テキストコンテンツを含めるのに十分な大きさです。

次のセクションで説明するブロックレベルの要素とは異なり、インライン要素は独自の水平方向のスペースを占有しません。したがって、改行<br>要素などの追加のHTML要素で区切りを指定しない場合、インライン要素はWebページ上に並べて表示されます。このサイズ設定のデフォルトは、段落内の1つの単語を、後続のテキストを次の行にプッシュせずに<strong>や<em>などのインライン要素でマークアップしたい場合に便利です。

index.htmlファイルの2行のコードの間に<br>タグを追加してみてください。（テキストエディタでファイルに戻る必要があります。）<br>要素には開始タグのみが必要であり、テキストを折り返すことはありません。

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>

ドキュメントを保存してブラウザにリロードし、結果を確認します。次のようなものを受け取るはずです。

私の強いテキスト 私の強調したテキスト

2つのフレーズは、改行要素<br>で区切られているため、別々の行にあるはずです。

Firefox Web Developer Inspectorを使用して要素のサイズを確認すると、各テキスト要素の幅がテキストコンテンツの幅によって決定されることを確認できます。

！[要素を再度検査する]（ https://assets.digitalocean.com/articles/how-to-build-a-website-with-html/inspect-element2-min.gif ）

ブロックレベルの要素

ブロックレベルの要素は、ウェブページの水平方向のスペースの行全体を占めるという点で、インラインレベルの要素とは異なる動作をします。これは、それらが自動的に新しい行で開始し、後続の要素も自動的に新しい行にプッシュすることを意味します。

たとえば、HTMLの見出し要素（<h1>から<h6>）はブロックレベルの要素であり、コンテンツを自動的に新しい行に配置し、後続のコンテンツを新しい行にプッシュします。これらの6つの見出し要素はそれぞれ、異なる見出しサイズを表します。

これが実際にどのように機能するかを調べてみましょう。 index.htmlファイルの下部で、強調表示されたコードスニペットを貼り付けてみてください。

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

次に、ブロックレベルの見出し要素を調べて、上記のインラインレベルのテキスト要素とどのように異なるかを調べてみましょう。 Firefox Web Developer Inspectorを開き、各要素にカーソルを合わせて、青い強調表示で示されているように、占有されているスペースを検査します。各インラインレベル要素の占有水平スペースがそのテキストコンテンツによって決定され、各ブロックレベル要素の占有水平スペースがWebページ全体に広がっていることを確認できるはずです。

ブロックレベルの要素は、HTMLドキュメントの同じ行にそれらのHTML要素を記述した場合でも、常にインラインレベルの要素を次の行にプッシュします。これを自分で確認するには、index.htmlファイルの同じ行にブロックレベルの要素とインラインレベルの要素を書き込んでみてください。ファイルから既存のコンテンツを消去し、次のコードスニペットを追加します。

<strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>

このHTMLコードがブラウザでどのようにレンダリングされるかを推測できますか？ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

要素がHTMLドキュメントの同じ行に記述されていても、見出し要素<h1>が新しい行で開始され、後続のテキスト要素が新しい行にプッシュされていることに注意してください。

これで、インラインレベルとブロックレベルの要素がどのように配置され、それらが近くの要素の位置にどのように影響するかを理解する必要があります。それらの明確な動作を覚えておくことは、将来HTML要素を配置するときに役立ちます。

今後のチュートリアルでは、新しいインライン要素とブロック要素について学習し続けます。