[CSS]カラム数を指定する「Multiple Column」

新聞のカラムのような配置に有効に使えます。文章を読むときに一行が長すぎると途中でどの行を読んでいたか分からなくなってしまうことがあります。

新聞のように一行の長さを適当に分けて、段組みにしているのがより読みやすくなります。

プロパティ

column-count	カラム数を指定します。
column-gap	カラムの間隔を指定します。値はピクセル(pixel)、%(percentage)で指定できます。
column-rule	カラムの区切り線のスタイルや幅、色を指定します。

column-count:3;

<html>
<style type="test/css">
.news {
   width: 510px;
   column-count: 3;
   -webkit-column-count:3;/*chrome・Safari用*/
   -moz-column-count:3;/*Firefox用*/
}
</style>

column-count: 3;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

An Uber spokeswoman said New Year's Eve 2014 was one of its busiest days. And the company has quadrupled its presence in the last year. It's now operating in over 260 cities across the world -- up from 66 in 2014.

But how much -- or how little -- might riders pay? That's unpredictable due to Uber's price algorithm, which charges riders inordinate sums of money during periods when its cars are most in demand. (Hello, New Years Eve!)

On Tuesday, the company issued a blog post explaining its surge pricing and providing timing guidelines (the highest fares are expected to be between 12:30 and 2:30 a.m., when Ubers are most in demand).

column-gap:35px;

<style type="test/css">
.news1 {
  margin-left:10px;
  margin-bottom:30px;
  width: 510px;
  padding:5px;
  column-count: 3;
  -webkit-column-count:3; 
 /*chrome・Safari用*/
  -moz-column-count:3;/*Firefox用*/
  column-gap:35px;
  -webkit-column-gap:35px;
 /*chrome・Safari用*/
  -moz-column-gap:35px;;/*Firefox用*/
  border:1px solid #00F
}

column-gap:35px;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

column-rule:1px solid red;

<style type="test/css">
.news2 {
  margin-left:10px;
  margin-bottom:30px;
  width: 510px;
  padding:5px;
  column-count: 3;
  -webkit-column-count:3; 
 /*chrome・Safari用*/
  -moz-column-count:3;/*Firefox用*/
  column-rule:1px solid red;
  -webkit-column-rule:1px solid red; 
 /*chrome・Safari用*/
  -moz-column-rule:1px solid red;/*Firefox用*/
  border:1px solid red;
}

column-rule:1px solid red;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.