CSSで横並びさせる方法 - WEB制作の備忘録

(2020-04-21 加筆)

float

並列させたい要素のスタイルに指定します
要素を回り込みさせることで並列にします
左寄せ、右寄せなど回り込みで横並びにさせます

＜html＞

<ul>
    <li>１番目の要素</li>
    <li>２番目の要素</li>
    <li>３番目の要素</li>
</ul>

＜CSS＞

ul {
  overflow: hidden;
}
li {
  float: left;
}

メリット

ウィンドウの横幅によって自動でカラム落ちします。

デメリット

囲んでいるdiv要素に高さがなくなり、下の要素が上にきてしまうので、囲んでいるdiv要素にoverflow:hidden;を指定します。
並べたい要素の高さが異なる場合、要素にひっかかりうまく並びません。

フレックスボックス（フレキシブルボックス）

並列させたい要素のスタイルに指定すると、その直下の要素が並列になります

＜HTML＞

<ul>
    <li>１番目の要素</li>
    <li>２番目の要素</li>
    <li>３番目の要素</li>
</ul>

＜CSS＞

ul {
  display: flex;
} 
li {
  /* 左右の中央寄せ */
  justify-content: center;

  /* 上下の中央寄せ */
  align-items: center;

  /* 右下寄せ */
  justify-content: flex-end;
  align-items: flex-end;

  /* 左右の均等配置（左右の隙間なし） */
  justify-content: space-between;

  /* 左右の均等配置（左右隙間あり） */
  justify-content: space-around;
}

ポイント

left/topはflex-start、right/bottomはflex-endを使用します。

ナビゲーションをつくる

ナビゲーションなど、横幅を等分して左右にborderを設置した場合、borderの幅は別に加算されるので、カラム落ちします。その場合は、aに横幅を指定して、box-sizing: border-box;を記述するとボーダーが内側に入り、カラム落ちを防げます。

○成功

f:id:hak00810:20200420224402p:plain

×カラム落ち

f:id:hak00810:20200420224515p:plain
＜html＞

<ul class="nav">
<li><a href="#" class="home current">ホーム</a></li>
  <li><a href="spring/" class="spring">春</a></li>
  <li><a href="summer/" class="summer">夏</a></li>
  <li><a href="fall/" class="fall">秋</a></li>
  <li><a href="winter/" class="winter">冬</a></li>
</ul>

float

＜CSS＞

.nav {
  overflow: hidden;
}
.nav li a {
  float: left;
  width: calc(960px / 5);
  height: 46px;
  padding: 12px 0;
  display: block;
  border-left: 1px solid #CCC;
  text-align: center;
  box-sizing: border-box;/*ボーダーを内側に入れてカラム落ちを防ぐ*/
}

display:flex

＜CSS＞

.nav {
  display: flex;
  justify-content: space-between;
}
.nav li a {
  width: calc(960px / 5);
  height: 46px;
  padding: 12px 0;
  display: block;
  border-left: 1px solid #CCC;
  text-align: center;
  box-sizing: border-box;/*ボーダーを内側に入れてカラム落ちを防ぐ*/
}