0

CSSで長い文章を段組みで見せるcolumnプロパティの使い方

CSSで長い文章を段組みで見せるcolumnプロパティの使い方

 

文書を読んでもらいたいマガジン系のサイトなどで、長文を1ページ内で表示したい場合、いくつかのボックスに分けて段組みレイアウトにするなどして、視覚的に読みやすい配慮が必要になってきます。その際に、複数の<div>などを配置するよりもひとつの<div>のなかでの段組みになるようにcolumnプロパティというものがあります。

そこで、columnプロパティを利用して長文を段組みレイアウトにする方法をご紹介します。

Can I use…(column)
W3C勧告候補 (Candidate Recommendation)なのでベンダープレフィックスを記述します。

下記のサンプルの文章を利用して見ていきましょう。
<div>で囲まれたエリアにいくつかの<p>文章(パラグラフ)を配置しています。

 

サンプルHTML

 

デモサンプル

 

横幅指定なしの2段組みレイアウトの場合

 column1

 column-countプロパティ・・・段組みの数を指定

 

横幅指定あり200pxの段組みレイアウトの場合

column2

「column-count」と「column-width」は共存できないようで、両方の記述があると「column-count」の方が優先され「column-width」は無視されてしまうようです。ですので大枠の横幅を固定したい場合、<div>要素の幅を「width」で指定し「column-width」で段組みを指定する必要があります。

 

大枠の横幅指定あり100pxの2段組みレイアウトの場合

column3

 

 横幅指定あり100pxの段組みレイアウトの(段と段の間隔幅指定50px)場合

column4

段の感覚を指定する際は「column-gap」プロパティを指定します。

 

デモサンプル




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > CSSで長い文章を段組みで見せるcolumnプロパティの使い方