「段組みに関するCSSプロパティ」の編集履歴(バックアップ)一覧はこちら

段組みに関するCSSプロパティ」(2015/07/09 (木) 19:53:40) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

このページでは、記事を書くときに必要となる知識のひとつである段組みに関するCSSプロパティを解説していきます。~ なお、一つの文章を複数のカラム(列)に渡って記述する場合はCSSプロパティを使って指定する事もありますが、ボックス自体を分ける事も多いようです。~ &color(red){また、ここで解説するプロパティの多くは現在、ベンダープレフィックス-moz-と-webkit-が必要となります。}~ 画像や表など様々なものを乗せる場合は後者の方が扱いやすいかもしれませんね。~ ~ 目次 #contents *column系プロパティのグループ 以下で説明する段組みを画像で説明するとこのような形となります。 ~ *列数を指定できるcolumn-countプロパティ column-count: 3; といったように任意の数値を値として指定する事で、&color(red){指定された値が最大の列数として扱われます。}~ #image(width=400,3段の文章.png) HTML <div id="ex_column"> <h1>カラムの説明</h1> <p>本文省略</p> </div> CSS #ex_column { column-count: 3; } 任意の値以外では、autoを指定する事ができ、autoを指定した場合は、column-widthの値などから自動で適切な列数を導き出してくれます。 ~ *列幅を指定できるcolumn-widthプロパティ column-width: 12em; といったように一列あたりの各カラムの横幅を指定できます。~ こちらのプロパティもautoを指定でき、その場合はcolumn-countの値を参照します。~ 単位の選び方は基本的には自由ですが、line-heightの様にem単位を使用するのが一般的です。~ #image(width=400,column-widthの説明.png) CSS #ex_column { column-width: 20em; } また、column-countプロパティと合わせて columns: -width -count; という一つにまとめた指定も可能です。~ しかしながら、この指定をする場合はしっかりと計算をしておかないとおかしなこと(入りきらないなど)になってしまいますので、注意が必要です。 *それぞれの列の間隔幅を指定できるcolumn-gapプロパティ こちらも任意の数値と単位によって指定する事ができます。 *column-fillプロパティ このプロパティでは、二つの値を選択する事ができます。~ autoとbalanceです。~ &color(red){autoの場合、文章は前詰め}になり、&color(red){balanceの場合は出来る限り格段の内容(高さ)が均一になる}ように調整されます。~ またこのプロパティは段組みの高さが指定されている場合のみ使用する事ができます。 #image(width=400,column-fillの説明.png) #ex_column { height: 150px; column-count: 2; column-fill: auto; /*あるいはcolumn-fill: balance;*/ } 上がauto、下がbalanceです。 *それぞれの段の間に縦線を表示させるcolumn-ruleプロパティ このプロパティでは、縦線をそれぞれの段組みの間に入れる事ができます。~ column-rule: -width -style -color; /*styleはdottedやsolidなど*/ といったようにborderと同じ要領で指定する事ができます。 このプロパティは3つに分解して書くことも可能です。 column-rule-width: column-rule-style: column-rule-color: ~ #image(width=400,column-ruleの説明.png) CSS #ex_column { column-count: 2; column-rule: 3px solid #00ff00; }
このページでは、記事を書くときに必要となる知識のひとつである段組みに関するCSSプロパティを解説していきます。~ なお、一つの文章を複数のカラム(列)に渡って記述する場合はCSSプロパティを使って指定する事もありますが、ボックス自体を分ける事も多いようです。~ &color(red){また、ここで解説するプロパティの多くは現在、ベンダープレフィックス-moz-と-webkit-が必要となります。}~ 画像や表など様々なものを乗せる場合は後者の方が扱いやすいかもしれませんね。~ ~ 目次 #contents *column系プロパティのグループ 以下で説明する段組みを画像で説明するとこのような形となります。 ~ *列数を指定できるcolumn-countプロパティ column-count: 3; といったように任意の数値を値として指定する事で、&color(red){指定された値が最大の列数として扱われます。}~ #image(width=400,3段の文章.png) HTML <div id="ex_column"> <h1>カラムの説明</h1> <p>本文省略</p> </div> CSS #ex_column { column-count: 3; } 任意の値以外では、autoを指定する事ができ、autoを指定した場合は、column-widthの値などから自動で適切な列数を導き出してくれます。 ~ *列幅を指定できるcolumn-widthプロパティ column-width: 12em; といったように一列あたりの各カラムの横幅を指定できます。~ こちらのプロパティもautoを指定でき、その場合はcolumn-countの値を参照します。~ 単位の選び方は基本的には自由ですが、line-heightの様にem単位を使用するのが一般的です。~ #image(width=400,column-widthの説明.png) CSS #ex_column { column-width: 20em; } また、column-countプロパティと合わせて columns: -width -count; という一つにまとめた指定も可能です。~ しかしながら、この指定をする場合はしっかりと計算をしておかないとおかしなこと(入りきらないなど)になってしまいますので、注意が必要です。 *それぞれの列の間隔幅を指定できるcolumn-gapプロパティ こちらも任意の数値と単位によって指定する事ができます。 *column-fillプロパティ このプロパティでは、二つの値を選択する事ができます。~ autoとbalanceです。~ &color(red){autoの場合、文章は前詰め}になり、&color(red){balanceの場合は出来る限り格段の内容(高さ)が均一になる}ように調整されます。~ またこのプロパティは段組みの高さが指定されている場合のみ使用する事ができます。 #image(width=400,column-fillの説明.png) #ex_column { height: 150px; column-count: 2; column-fill: auto; /*あるいはcolumn-fill: balance;*/ } 上がauto、下がbalanceです。 *それぞれの段の間に縦線を表示させるcolumn-ruleプロパティ このプロパティでは、縦線をそれぞれの段組みの間に入れる事ができます。~ column-rule: -width -style -color; /*styleはdottedやsolidなど*/ といったようにborderと同じ要領で指定する事ができます。 このプロパティは3つに分解して書くことも可能です。 column-rule-width: column-rule-style: column-rule-color: ~ #image(width=400,column-ruleの説明.png) CSS #ex_column { column-count: 2; column-rule: 3px solid #00ff00; } ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: