ブロック要素とインライン要素

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 54/76。

HTMLでは、要素はページ上での表示方法に基づいて、ブロックレベル要素またはインライン要素のいずれかに分類されます。これら2つのタイプの要素の違いを理解することは、適切に構造化され、視覚的に魅力的なレイアウトを作成するために不可欠です。ブロックレベル要素とインライン要素の特性と動作について詳しく見ていきましょう。

ブロックレベル要素

ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を占有し、左右に可能な限り広がります。これはコンテンツの「ブロック」を作成します。

ブロックレベル要素の例には、以下のようなものがあります：

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

インライン要素

インライン要素は新しい行から始まらず、そのコンテンツを収めるのに必要な幅だけを占有します。これにより、インライン要素はテキストの行内やブロックレベル要素の中に流れるように配置されます。

インライン要素の例には、以下のようなものがあります：

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

チャレンジ

簡単

さまざまな要素が含まれるHTMLドキュメントが与えられています。あなたのタスクは、どの要素がブロックレベルで、どの要素がインラインであるかを特定し、その違いを強調するためにいくつかの基本的なCSSを適用することです。以下の手順に従ってください。

すべてのブロックレベル要素（div、p、h1）をターゲットにするCSSルールを記述します。それらのbackground-colorをlightgrayに設定し、1px solid blueのborderを追加します。
すべてのインライン要素（span、a、img）をターゲットにするCSSルールを記述します。それらのbackground-colorをlightyellowに設定し、1px solid redのborderを追加します。

ブロックレベル要素が利用可能な全幅を占有して新しい行から始まるのに対し、インライン要素は必要な分だけのスペースを占有し、行内で流れるように配置される様子を観察してください。

チートシート

HTML要素は、その表示動作に基づいて、ブロックレベル要素またはインライン要素のいずれかに分類されます。

ブロックレベル要素

ブロックレベル要素は新しい行から始まり、利用可能な全幅を占有し、左右に可能な限り広がります。

例: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

インライン要素

インライン要素は新しい行から始まらず、コンテンツを収めるのに必要な幅だけを占有します。これらはテキストの行内、またはブロックレベル要素の中に配置されます。

例: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

自分で試してみよう

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>