CSS: 要素の配置: ブロック要素

div や p や li などのタグはブロック要素と呼ばれることがあります。 その配置方法についての説明です。
CSS display: inline, block, inline-block など

下は div タグのサンプルになっていますが、 p タグや figure タグや li タグなどでも同じように扱えます。

ブロック要素の基本的な配置

インライン要素、インラインブロック要素との違い

• TestHTML_a_inline_block01.html
  リンク (aタグ) のサンプル。 インライン (inline) 要素、 インラインブロック (inline-block) 要素、 ブロック (block) 要素の違い。
  CSS display:inline,blockなど
  a タグをインラインブロックやブロックにしたサンプル

要素のセンタリング

• CSS: 要素の配置: 左右中央, 上下中央

ブロック要素を左右に並べる

ブロック要素を左右に並べるときには CSS の flex を多用します。 また flex がなかった昔からの方法で CSS の float もあります。

関連

• CSS: flex
• CSS: float
• HTML: ページレイアウト
• HTML をドローソフト代わりに使う (1)