




column-spanプロパティは、要素がまたがる(横切る)カラム数を指定する際に使用します。
■値
- none
- 要素は複数カラムにまたがらない(初期値)
- all
- 要素はすべてのカラムにまたがる
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- マルチカラムコンテナ内に配置されたブロックレベル要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル(sample.css)に記述
div.sample { width: 300px; column-count: 3; } div.sample h5 { background-color: yellowgreen; }
HTMLソース
<h4>column-span: all; を指定しない場合</h4>
<div class=”sample”>
<h5>ある日、かえるは思いたった…</h5>
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<h5>そして、神様のところへ…</h5>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
<h4>column-span: all; を指定した場合</h4>
<div class=”sample”>
<h5 style=”column-span: all;”>ある日、かえるは思いたった…</h5>
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<h5 style=”column-span: all;”>そして、神様のところへ…</h5>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
ブラウザ上の表示
column-span: all; を指定しない場合
ある日、かえるは思いたった…
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
そして、神様のところへ…
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
column-span: all; を指定した場合
ある日、かえるは思いたった…
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
そして、神様のところへ…
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
■関連項目
カラムの数と幅
columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する
カラムの間隔と区切り線
column-gap …… カラムの間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定する