Webで段組みのレイアウトが簡単にできる
| HTML/CSS/PHPHTMLやら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が消えたらほぼ対応なんじゃないかな?
はよなくなってください。