にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:24.

段組(マルチカラム)レイアウトが簡単に作成できるCSS3のプロパティ群を解説

チョー簡単に段組が作れるCSS3、columnsプロパティ!CSS3には、「段組(マルチカラム)レイアウト」が簡単に作れる専用のプロパティが用意されています。それをたった1行記述するだけで、3段組だろうと4段組だろうと簡単に作れます。

しかも、「3段組」のように段の個数を指定するだけでなく、「1段は20文字分」のように『段の横幅』だけを指定しておいて、描画領域に入るだけの段を自動で並べるような、柔軟な段組構造も作成できます。それもプロパティを1つ記述するだけ! 驚きの簡単さです。

そんな段組構造が簡単に作れるCSS3について、All Aboutで解説しました。

◆『チョー簡単に段組が作れるCSS3、columnsプロパティ!』(@All About ホームページ作成)

単に段組レイアウトが作れるだけではなく、段と段の間に罫線を引いたり、段と段の余白量を調整したりするのも、それぞれ専用のプロパティを追記するだけで楽々実現できます。

サイドバーを実現したりするような複雑な段組構造には活用しにくいので(というか無理なので)、従来のアクロバットな段組作成方法を完全に駆逐できるわけではないのですが、本文を雑誌のように段組構造にしたい場合にはとても役に立ちます。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---