CSS - column-span

トップ > CSSリファレンス > column-span

概要

属性名 column-span
none | all
初期値none
適用可能要素ブロックレベル要素(float:left|right, position:absolute のものを除く)
継承継承しない
メディアVisual
サポートC3 / e10 / Ch?(-webkit) / Op11.1 / Sa?(-webkit)

説明

マルチカラムの中に章題を記載する時など、その要素がすべてのカラムをまたいで表示させるか否かを指定します。

説明
noneカラムをまたぎません。(初期値)
autoすべてのカラムをまたいで表示します。

使用例

CSS
.multicol {
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
}
.multicol h3 {
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
  background-color: #ccf;
}
HTML
<div class="multicol">
いろはにほへとちりぬるを...
<h3>タイトル</h3>
あいうえおかきくけこ...
</div>
表示
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

タイトル

あいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをん

関連項目

colums, colum-count, colum-width, colum-gap, colum-rule, colum-rule-color, colum-rule-style, colum-rule-width, break-before, break-after, break-inside, colum-fill

リンク


Copyright (C) 2015 杜甫々
初版:2015年10月25日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/column-span.htm