CSSのあれこれ

Posted at 2025-08-12

ブロック要素、インライン要素、インラインブロック要素について

幅：親要素いっぱいに広がる（width: 100%が基本）

改行：前後に必ず改行される（縦並びになる）

サイズ指定：width・height 可能

余白：margin・padding は上下左右すべて有効

用途：段落・見出し・区切りなど、大枠の構造

(例)
<div>, <p>, <h1>〜<h6>, <ul>, <ol>, <section>, <article>, <header>, <footer>

幅：中身のコンテンツ分だけ

改行：前後に改行しない（横に並ぶ）

サイズ指定：width・height は基本無視される

余白：margin は左右のみ有効（上下は反映されにくい）

用途：文章の一部（強調、リンク、アイコンなど）

(例)
<span>, <a>, <strong>, <em>, <b>, <i>, <u>, <abbr>, <label>

幅：中身のコンテンツ分だけ（width 指定可能）

改行：前後に改行しない（横に並ぶ）

サイズ指定：width・height 可能

余白：margin・padding 上下左右すべて有効

用途：横並びにしつつサイズを調整したい場合（ボタン、カード、アイコンなど）

(例)
<img>, <button>, <input>, CSSで display: inline-block; にした要素

.parent {
  text-align: center;
}

適用対象：テキスト、inline / inline-block / inline-flex 要素
親要素に設定する必要あり。

.child {
  margin-left: auto;
  margin-right: auto;
  width: 200px; /* 幅必須 */
}

適用対象：block 要素
widthを指定しないと左右 auto が効かない。

.parent 
  display: flex;
  justify-content: center;
}

幅やテキスト種別を問わず使える。

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

固定サイズでも可変サイズでも対応できる。

.parent {
  display: grid;
  place-items: center;
}