CSS3による複数列レイアウト（雑誌風）

 
 Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Nunc libero magna、venenatis quis、aliquet et、rutrum in augue。 Donec vel tempor dolor。 Donec volutpat fringilla porta非ヌルルトルを停止します。ちょっとしたコモディティオルナレミ、アメットアリケットjusto bibendumノン。 Integer bibendum convallis sapien、に座ってamet tincidunt orci placeratを表示します。Integer vitae consequat augue。 //等々 
 

…の幅を指定します 600px スタイルシートから、それだけです.

それでは、列の作成を始めましょう。.

以下の例では、コンテンツを以下のように分割します。 2列 とともに 列数 財産。このプロパティは、指定された数でコンテンツを列にレンダリングし、ブラウザに各列の適切な幅を決定させるようブラウザに指示します。.

 記事-webkit-column-count：2; -moz-column-count：2;列数：2。  

カウントで定義されているのとは別に、列は幅を指定して作成できます。 列幅 プロパティを設定し、適切な場所にいくつの列を生成するかをブラウザに決定させる.

この例では、列幅を次のように指定します。 150px, その結果、コンテンツは3列に分割されました。.

 記事-moz-column-width：150px; -webkit-column-width：150ピクセル。列幅：150ピクセル。  

仕様に記載されているように。実際の列幅は、利用可能なスペースに応じて、指定された列幅より広くなったり狭くなったりします。また、widthの値が明示的に指定されていない場合は、 “自動” これがデフォルトと見なされます。 “列なし”.

列ギャップ

列ギャップ 各列を区切るスペースを定義します。ギャップ値は、 em または px, 仕様に記載されているように 値を負にすることはできません. 以下の例では、ギャップを指定します。 30px, だから、列の間のスペースは少し広く見える.

 記事-webkit-column-gap：30px; -moz-column-gap：30px。カラムギャップ：３０ｐｘ。  

列ルール

列の間に罫線を追加したい場合は、 列ルール このプロパティは、 境界 財産。それでは、列の間に点線の境界線を付けたい場合は、次のように書くことができます。

 記事-moz-column-rule：1pxドット付き#ccc; -webkit-column-rule：1pxドット付き#ccc;列ルール：1pxドット付き#ccc;  

列スパン

このプロパティは、 コルスパン に 表 タグ。このプロパティの一般的な実装は、すべての列にわたってコンテンツの見出しを広げることです。これが例です.

 記事h1 -webkit-column-span：all;列スパン：すべて。  

上記の例では、 h1 すべての列にまたがる場合、および列の範囲が指定されている場合, 1 がデフォルトとして使用されます。残念ながら、この記事の執筆時点では、このプロパティはOperaとChromeでしか機能しません。.

最後の言葉

今のところ、CSS3で複数の列を作成するために必要不可欠なものはすべて揃いました。最初に述べたように、このモジュールは現代のブラウザでは非常にうまく機能しますが、Internet Explorerではまだ機能しません。.

最終的には、CSS3で列を作成する方法についてかなりよく理解できたことを願います。また、実験の時間がある場合は、以下のコメントボックスでメソッドと結果を共有してください。この記事を読んでいただきありがとうございます。.

• デモ
• ソースをダウンロード