column-width …… カラム幅を指定する
広告
column-widthプロパティは、カラム幅を指定する際に使用します。
カラム幅は長さ値で指定しますが、値は0より大きくなくてはなりません。
column-widthプロパティで指定するのは最適な(最善の)カラム幅です。
実際のカラム幅は、スペースを埋めるために指定値より広くなったり、
スペースが足りない場合には狭くなるかもしれません。
column-widthプロパティの解釈が多少柔軟になっているのは、
多くのスクリーンサイズに合わせられる拡張性のあるデザインを実現するためです。
カラム幅を厳密に設定するには(水平テキストでは)、widthプロパティ、column-widthプロパティ、column-gapプロパティ、column-rule-widthプロパティ
のすべての長さ値を指定する必要があります。
- auto
-
カラム幅は他のプロパティの指定で決定される
(例えば、widthプロパティやcolumn-countプロパティなどで、全体の幅やカラム数などが指定されれば、自ずとカラム幅も算出される)(初期値)
- 長さ
- 長さで最適な(最善の)カラム幅を指定
- 初期値
- auto
- 適用対象
- table要素の内側のボックス以外のブロックコンテナ
- 値の継承
- しない
div.sample {
width: 300px;
column-width: 290px;
}
<html>
<head>
<link rel="stylesheet" href="sample.css"
type="text/css">
</head>
<body>
<div class="sample">
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
</body>
</html>
↓↓↓
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
広告