段組 (CSS)


columns

 columns属性を使うと「段組」を定義できます。段組とは新聞紙面のような縦に分割された文章領域です。

 Firefoxの現在のバージョン(31.0)では、columns属性では認識されないようです。その代りとして、-moz-columnsを使用します。Chromeも同様に、-webkit-columns を使用します。IEはcolumnsで大丈夫です。

<style>
	#news {
	  -moz-columns: 160px 2;
	  -webkit-columns: 160px 2;
	  columns: 160px 2;
	}
</style>
<div id="news">
(CNN) -- After the beheading of another Western captive by ISIS, an international conference 
convenes Monday in Paris to talk about how to tackle the threat posed by the Islamic extremist
 group.
  ....
</div>
(CNN) -- After the beheading of another Western captive by ISIS, an international conference convenes Monday in Paris to talk about how to tackle the threat posed by the Islamic extremist group. The Sunni jihadist group underlined its barbaric credentials over the weekend, posting a video showing the beheading of British aid worker David Haines and threatening the life of another hostage from the United Kingdom. It was the third videotaped killing of a Western hostage released in less than a month. The latest killing, ISIS said, was "a message to the allies of America" -- a direct challenge to the United States. President Barack Obama announced last week that the United States would lead "a broad coalition to roll back this terrorist threat," and that U.S. airstrikes against ISIS would expand from Iraq into Syria.

 

このページの先頭へ戻る