HTMLインライン要素とブロックレベル要素の基本概念と使用例

HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素とブロックレベル要素の概念を理解しましょう。

ブロックレベル要素:一般的に、他の要素のコンテナです。インライン要素や他のブロックレベル要素を保持できます。ブロックレベル要素は、他の要素が同じ行に配置されるのを防ぎます。幅と高さの属性を設定できます。通常のフローのブロックレベル要素は垂直に配置されます。一般的なブロック要素は「div」です

インライン要素 (インライン要素):インライン要素には、テキストまたは他のインライン要素のみを含めることができます。インライン要素はブロックレベル要素の子孫です。インライン要素を使用すると、他のインライン要素を同じ行に配置できます。高さと幅は設定できません。一般的なインライン要素は「a」です。

ブロックレベル要素の概念によれば、ブロックレベル要素の前後には改行があり、これは要素の前後に <br> タグを追加することと同じであることがわかります。ブロックレベル要素はブロックまたは長方形として考えることができるので、ブロックレベル要素は高さと幅の属性を設定できます。

例：
cssファイル:

コードをコピー

コードは次のとおりです。

#div1{
幅:200px;
高さ:200px;
背景:#666
}
div2{
幅:200px;
高さ:200px;
背景:#F00
}

html ファイル:

コードをコピー

コードは次のとおりです。

<div id="div1">
div1
ブロックレベル要素は、他の要素が同じ行に配置されないようにします。
</div>
<div id="div2">
div2
ブロックレベル要素は、他の要素が同じ行に配置されないようにします。
</div>

表示効果:

2つのdiv要素が同じ行にありません

インライン要素の概念によれば、インライン要素の前後に改行がないことがわかります。インライン要素は線として考えることができるため、高さと幅の属性を設定することはできません。

ブロック要素タグ

住所 - 住所
ブロック引用 - ブロック引用
中央 – 中央に揃える
dir - ディレクトリ一覧
div - よく使われるブロックレベル要素であり、CSSレイアウトのメインタグでもある
dl - 定義リスト
フィールドセット - フォームコントロールグループ
フォーム - インタラクティブフォーム
h1 - 大きなタイトル
h2 - サブタイトル
h3 - レベル 3 の見出し
h4 - レベル 4 の見出し
h5 - レベル 5 の見出し
h6 - レベル 6 の見出し
hr - 水平区切り線
isindex - 入力プロンプト
メニュー - メニューリスト
noframes - フレームオプションコンテンツ（フレームをサポートしていないブラウザの場合、このブロックコンテンツが表示されます）
noscript - オプションのスクリプトコンテンツ（スクリプトをサポートしていないブラウザに表示されます）
ol - ソートフォーム
p - 段落
テキストの事前フォーマット
テーブル
ul - 順序なしリスト

インライン要素

a - アンカーポイント
abbr - 略語
頭字語 - 最初の文字
b - 太字（非推奨）
BDO - ビディオーバーライド
大きい - 大きいフォント
br - 改行
引用 - 引用
コード - コンピュータコード (ソースコードを引用する場合に必要)
dfn - フィールドを定義する
em - 強調
フォント - フォント設定（非推奨）
i - イタリック体
img - 画像
入力
kbd - キーボードテキストを定義する
ラベル - テーブルラベル
q - 短い引用
s - ハイフン
samp - サンプルコンピュータコードを定義する
選択 - 項目の選択
小 - 小さいフォントのテキスト
span - 一般的に使用されるインラインコンテナ。テキストブロックを定義します。
ストライク - ダッシュ
強い - 太字の強調
下付き文字
sup—上付き文字
textarea - 複数行のテキスト入力ボックス
tt - タイプライターテキストを定義します
var - 変数を定義する