HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのブロック要素とインライン要素の違いをわかりやすく解説

はじめに

HTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。

ブロック要素（Block Elements）とは

ブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。

  • <h1>〜<h6>（見出し）
  • <p>（段落）
  • <article>（記事コンテンツ）
  • <aside>（補足コンテンツ）
  • <pre>（整形済みテキスト）
  • <ul>・<ol>（リスト）
  • <address>（連絡先情報）

ブロック要素のコード例

ここでは、<address>、<p>、<h3>などのブロック要素を使った例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<p>Click on the individual links to work on online compilers:</p>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have compiler for <acronym title="JavaScript">JS</acronym> libraries.</p>
<address>
Contact us at <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
4th Floor,<br>
Incor9 Building,<br>
Kavuri Hills,<br>
Madhapur, Hyderabad,<br>
Telangana 500081
</address>
</body>
</html>

このコードを実行すると、以下のような出力が得られます。各ブロック要素が前後に改行されて縦に積み重なって表示されているのが確認できます。

HTMLのブロック要素とインライン要素の違いをわかりやすく解説

インライン要素（Inline Elements）とは

インライン要素は、ブロック要素とは異なり、前後に改行が入らず、文章の中に自然に組み込まれる要素です。段落の途中にリンクや強調などを配置したい場合に活用されます。代表的なインライン要素には以下があります。

  • <a>（リンク）
  • <abbr>（略語）
  • <button>（ボタン）
  • <code>（コード）
  • <em>・<i>（強調・イタリック体）
  • <textarea>（複数行テキスト入力欄）
  • <time>（日時情報）

インライン要素のコード例

次に、<a>タグや<acronym>タグといったインライン要素を実装した例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have compiler for <acronym title="JavaScript">JS</acronym> libraries.</p>
</body>
</html>

実行結果

コードを実行すると、以下のようにリンクが横並びで表示されます。ブロック要素と違って、要素同士が同じ行に並んでいる点に注目してください。

HTMLのブロック要素とインライン要素の違いをわかりやすく解説

さらに、「JS」の部分にカーソルを合わせると、<acronym>タグのtitle属性に設定した内容がツールチップとして表示されます。

HTMLのブロック要素とインライン要素の違いをわかりやすく解説

補足：displayプロパティによる制御

要素のデフォルトの表示形式は、CSSのdisplayプロパティを使えば変更できます。たとえば、インライン要素である<a>タグにdisplay: block;を指定すればブロック要素のように振る舞わせることができ、逆にブロック要素をdisplay: inline;やdisplay: inline-block;に変更することも可能です。

また、<acronym>タグはHTML5では非推奨（廃止予定）となっているため、現在の開発では代わりに<abbr>タグを使用することが推奨されています。

まとめ

種類主な特徴代表例
ブロック要素前後に改行が入り、幅いっぱいを占有する<div>、<p>、<h1>〜<h6>、<ul>など
インライン要素改行されず、文中に組み込まれる<a>、<span>、<strong>、<img>など

ブロック要素とインライン要素の違いを正しく理解すれば、より柔軟で整ったHTML構造を作れるようになります。まずは実際にコードを書いて、表示の違いを確認してみてください。

  1. HTMLのacronym（頭字語）タグの使い方とHTML5での代替方法

    HTMLのacronym（頭字語）タグとは HTMLの<acronym>タグは、頭字語（アクロニム）を定義するために使用される要素です。頭字語とは、複数の単語の頭文字を組み合わせて作られた略語のことを指します。 注意：HTML5では<acronym>タグはサポートされていません。代わりに<abbr>タグを使用することが推奨されています。 頭字語の具体例 B2B：Business to Business（企業間取引） B2C：Business to Consumer（企業と消費者間の取引） CMS：Content Management System（コンテン

  2. HTMLのaタグhref属性とは？使い方とサンプルコードを解説

    HTMLの<a>要素におけるhref属性は、リンク先となるページのURLを設定するために使用される重要な属性です。基本構文href属性の基本的な書き方は以下の通りです。<a href=URL>「URL」の部分には、リンク先として指定したいアドレスを記述します。指定できる内容は多岐にわたり、相対パス、絶対パス、スクリプト、プロトコルなどが利用可能です。サンプルコード①：Webページへのリンクまずは、<a>要素のhref属性を使って外部サイトやサイト内ページへリンクを設定する基本的な例を見てみましょう。<!DOCTYPE html> <html