BLOG

Webで段組みのレイアウトが簡単にできる

| HTML / CSS

HTMLやらCSSやらやってて段組みのレイアウトってやつをよくデザイナーからデザインが上がってきました。
いやー昔はむりじゃヽ(`Д´)ノプンプンってデザイナー達とバトってました。
でも今だと結構簡単にできちゃうんですよね。
デザイナーさん今ですよ!

段組の数で指定する

#columns{
  column-count: 2;
}

段組の段数を指定するやり方です。

See the Pen column-count by msys (@msys) on CodePen.

指定した数自分の段組みが組まれます。

段組の幅で指定する

#columns{
  column-width: 48vw;
}

幅で指定し段組の設定をする方法です。

See the Pen column-width by msys (@msys) on CodePen.

%指定は効かないようです。
em、vw、pxなどで指定するといいようですね。

段組の間隔を指定する

#columns{
  column-count: 2;
  column-gap: 3em;
}

デフォルトは1emぐらいなのかな?

See the Pen column-gap by msys (@msys) on CodePen.

デザイン上間隔を指定するのはほぼ絶対するかなって思います。

対応ブラウザは、現状では大体が対応しているみたいですね。
CSS3は便利ですね。どんどん対応できているブラウザも増えていっているし、IE11が消えたらほぼ対応なんじゃないかな?
はよなくなってください。

PAGE TOP