CSSラベル表示モードについて1つの記事で学ぶ

タグの種類（表示モード） HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分けられ、ブロック要素、インライン要素とも呼ばれます。

1. ブロックレベル要素

各ブロック要素は通常、単独で 1 行以上を占めます。幅、高さ、配置などの属性を設定できます。Web ページのレイアウトと構造の構築によく使用されます。

一般的なブロック要素には、<h1>～<h6>、<p>、<div>、<ul>、<ol>、<li> などがありますが、その中でも <div> タグは最も一般的なブロック要素です。

機能: (重要)

1. 親の 1 行を占有し、幅はデフォルトでコンテナーの 100% になります。

2. 高さ、行の高さ、外側の余白、内側の余白をすべて制御できます。（幅と高さの設定をサポート）

3. 高さを設定しないでください。高さはコンテンツによって決まります。

4. インライン要素やその他のブロック要素に対応できます。

2. インラインレベル

インライン要素は独立した領域を占有せず、独自のフォント サイズと画像サイズのみに依存して構造をサポートします。通常、幅、高さ、配置などの属性は設定できません。ページ上のテキストのスタイルを制御するためによく使用されます。

一般的なインライン要素には、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> などがあります。その中でも、<span> タグは最も一般的なインライン要素です。

機能: (重要)

1. 隣接する行の要素が同じ行にある場合、行が分割されるとギャップが生じます。

2. 高さと幅は無効ですが、水平方向のパディングとマージンは設定できますが、垂直方向のパディングとマージンは無効です。(幅と高さはサポートされていません)

3. デフォルトの幅は、コンテンツ自体の幅です。

4. インライン要素には、テキストまたは他のインライン要素のみを含めることができます。 （スペシャル）

ヒント:

1. 段落を形成できるのはテキストのみなので、p 内にブロック レベルの要素を配置することはできません。同様に、h1、h2、h3、h4、h5、h6、dt のタグはすべてテキスト ブロック レベルのタグであり、他のブロック レベルの要素を配置することはできません。

2. リンク内にリンクを配置することはできません。

3. ブロックレベル要素とインライン要素の違い

それぞれの特徴については上記を参照してください。

4. インラインブロック

インライン要素には <img />、<input />、<td> などの特別なタグがいくつかあり、幅、高さ、配置属性を設定できます。これらはインライン ブロック要素と呼ばれます。

特徴：

1. 隣接するインライン要素（インライン ブロック）と同じ行にあり、その間に空白スペースがある。

2. デフォルトの幅は、コンテンツ自体の幅です。

3. 高さ、行の高さ、余白、パディングをすべて制御できます。

5. ラベル表示モード変換表示

Web ページを設計するときに、タグごとに異なる表示モードを設定する必要がある場合があります。これはディスプレイを通じて実現できます。

1. インラインへのブロック転送: display:inline;

2. 行内をブロックに変換します: display:block;

3. ブロック要素とインライン要素をインラインブロックに変換します: display: inline-block;

知識ポイント補足: CSS タグの表示モード

ラベル表示モード

a. ブロックレベル要素（通常はdivタグ）

特徴：

デフォルトの幅 100%

ブロックレベル要素とインライン要素に対応可能

b. インライン要素（通常はspanタグ）

特徴：

c. インラインブロック要素（通常はimgタグ）

！ ！ ！ 3つのモードのラベルを変換可能

表示（モデル属性を表示）

a. ブロックレベルタグモードをインラインタグモードに変換する

div{display:inline;}

b. インラインタグモードをブロックレベルタグモードに変換する

スパン{ディスプレイ:ブロック;}

c. インラインタグモードをインラインブロックタグモードに変換する

a{表示: インラインブロック;}

要約する

CSS タグの表示モードに関する記事はこれで終わりです。CSS 表示モードに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。