HTML 要素: ブロックレベル要素とインライン要素
Degui Adil / EyeEm /ゲッティイメージズ
HTML Web ページの構成要素として機能するさまざまな要素で構成されています。これらの各要素は、ブロックレベル要素またはインライン要素の 2 つのカテゴリのいずれかに分類されます。これら 2 種類の要素の違いを理解することは、Web ページを構築する上で重要なステップです。
ブロック レベルの要素
では、ブロックレベル要素とは何でしょう?ブロック レベル要素は、Web ページで新しい行を開始し、親要素の使用可能な水平方向のスペースの幅全体を拡張する HTML 要素です。段落やページ分割など、コンテンツの大きなブロックを作成します。実際、ほとんどの HTML 要素はブロックレベルの要素です。
ブロック レベルの要素は、HTML ドキュメントの本文内で使用されます。インライン要素だけでなく、他のブロックレベルの要素も含めることができます。
インライン要素
ブロックレベル要素とは対照的に、インライン要素:
- 行内で開始できます。
- 新しい行を開始しません。
- その幅は、タグで定義されている範囲でのみ拡張されます。
インライン要素の例は、 、太字内に含まれるテキスト コンテンツのフォントを作成します。インライン要素は通常、他のインライン要素のみを含むか、何も含まない場合があります。
タグを破る。
HTML には、まったく表示されない 3 番目のタイプの要素もあります。これらの要素は、ページに関する情報を提供しますが、Web ブラウザーでレンダリングされたときには表示されません。
例えば：
- スタイルとスタイルシートを定義します。
- メタデータを定義します。
- これらの要素を保持する HTML ドキュメント要素です。
インライン要素タイプとブロック要素タイプの切り替え
次のいずれかの CSS プロパティを使用して、要素のタイプをインラインからブロックに、またはその逆に変更できます。
- |_+_|
- |_+_|
- |_+_|
の CSS display プロパティを使用すると、インライン プロパティをブロックに変更したり、ブロックをインラインに変更したりできます。 表示しない まったく。
表示プロパティを変更する場合
通常、表示プロパティはそのままにしておきますが、インライン表示プロパティとブロック表示プロパティを入れ替えると便利な場合があります。
- |_+_|と |_+_|
- |_+_|と |_+_|
- |_+_|と |_+_|
一般的なインライン要素の書式設定の誤り
Web デザインの初心者が犯す最も一般的な間違いの 1 つは、インライン要素に幅を設定しようとすることです。インライン要素の幅がコンテナー ボックスによって定義されていないため、これは機能しません。
インライン要素はいくつかのプロパティを無視します:
Microsoft Internet Explorer (Microsoft Edge に置き換えられました) は、過去にこれらのプロパティの一部をインライン ボックスに誤って適用していました。これは規格に準拠していません。これは、Microsoft の Web ブラウザの新しいバージョンには当てはまらない場合があります。
要素が占める幅または高さを定義する必要がある場合は、インライン テキストを含むブロック レベルの要素に適用する必要があります。