Firefox 3.5のCSS新対応:text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule

エ・ビスコム・テック・ラボ
2009-08-24 15:42:01
  • このエントリーをはてなブックマークに追加

段組みの区切り線のデザインを指定する -moz-column-rule

 CSS 3のMulti Column(マルチカラム)の機能を利用してコンテンツを段組みでレイアウトした場合、column-ruleプロパティで段の間に区切り線を入れることができる。

 Firefox 3.5でcolumn-ruleプロパティをサポートしたことにより、FirefoxはMulti Columnの機能に一通り対応したことになる。ただし、Multi Column関連のプロパティにはベンダープレフィックス(-moz-)をつけて記述する。

 たとえば、次のサンプルでは文章を2段組みで50ピクセルの間隔をあけてレイアウトするように指定し、-moz-column-ruleプロパティで太さ1ピクセルの赤色の区切り線を挿入している。

Firefox 3.5の表示(画像をクリックすると拡大します) Firefox 3.5の表示(画像をクリックすると拡大します)
div     {
        -moz-column-count: 2;
        -moz-column-gap: 50px;
        -moz-column-rule: 1px solid red;
        }
ブラウザで表示を確認する

 -moz-column-ruleで指定した区切り線の太さ、種類、色の設定は、それぞれ-moz-column-rule-width、-moz-column-rule-style、-moz-column-rule-colorの3つのプロパティで指定することもできる。

 なお、段組み関連のプロパティはCSS 3の草案「Multi-column layout」で提案されている。

参照記事

 次回は、トランスフォームや改行処理などの機能を見ていきたい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]