🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSレイアウト実用まとめ：flex・表示切替・幅高さ・余白・スクロール

Webページの崩れを直すときは、レイアウト系CSSを個別に覚えるより「横並び」「表示/非表示」「幅と高さ」「余白」「はみ出し」の役割で整理すると扱いやすくなります。

横並びはまずflex

現在のCSSでは、横並びは float より display: flex; を使う方が安全です。2カラムやカード並びにも向いています。

.layout-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.layout-row > * {
  flex: 1;
}

2カラムをスマホ対応にする

.two-column {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .two-column {
    grid-template-columns: 1fr;
  }
}

表示・非表示・インラインブロック

display: none; は完全に非表示にします。横幅や高さもなくなるため、出し入れするUIでは影響範囲に注意します。

.d-none {
  display: none;
}

.d-inline-block {
  display: inline-block;
}

幅・高さ・余白の基本

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.m-0 {
  margin: 0;
}

.section-space {
  padding: 2rem 1rem;
}

はみ出す内容はスクロールさせる

コード、表、長いログのように横や縦にはみ出す内容は、親要素にスクロールを持たせます。

.scroll-box {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 1rem;
}

floatを使うなら解除までセット

古い記事や既存CSSでは float: left; が残っていることがあります。新規実装ではflex推奨ですが、使う場合は回り込み解除を忘れないようにします。

.float-left {
  float: left;
  margin-right: 1rem;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}