ディスプレイの幅が広くなってくると、文字が横に長すぎて読みづらくなる
文字列を自動的に複数行に分けてくれて、しかも、文章量にあわせて自動的に、改行位置を決めてくれる。必ずしも必要のない機能ではあるのですけど、読みやすさを提供したい時には、この方法は知っていても損はないとは思います。2015年8月11日現在、この機能はJimdoにはありません。
column-count: 2
１行にしめる文字数は15文字から3４文字程度が読みやすいとされています。
今後、レスポンシブＷＥＢデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。
『段組（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム（もしくはコラム）デザインなどとも呼ばれる。』
上記カラムのHTMLのソース
<div style="-moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2;">
<p>１行にしめる文字数は15文字から3４文字程度が読みやすいとされています。
今後、レスポンシブＷＥＢデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。<strong>段組</strong>（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム（もしくはコラム）デザインなどとも呼ばれる。段組みWikipedia</p>
</div>
追加するすたいるシート
-moz-column-count: 2;
-webkit-column-count: 2;
-o-column-count: 2;
-ms-column-count: 2;
レスポンシブWEBデザインに利用するなら最大値設定をしておくと良い
通常、column-count: 2と言う風にカラムの数を設定する。
これだと2つには別けることは出来るが、2つに別けるだけ。
最大値設定とは、columns: 4
480px;のように、最大で4つに別ける、最大で480pxの幅に設定するというもの。どんなに広げても4つ以上には分割しない。480px以上のカラムは作らない。
この設定をしておくことで、幅を小さくした時に、自動的に分割数などを調整してくれる。
マルチカラムのプロパティー
column-gap …… カラム間のスペース
column-rule …… カラムの区切り線の形状と幅と色
column-gap:2.5em; 2文字半分のスペース
１行にしめる文字数は15文字から3４文字程度が読みやすいとされています。
今後、レスポンシブＷＥＢデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。段組（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム（もしくはコラム）デザインなどとも呼ばれる。段組みWikipedia
追加するスタイルシート
-moz-column-gap: 2.5em;
-webkit-column-gap:2.5em;
-o-column-gap: 2.5em;
-ms-column-gap: 2.5em;
column-rule:1px dotted #CCC;
１行にしめる文字数は15文字から3４文字程度が読みやすいとされています。
今後、レスポンシブＷＥＢデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。段組（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム（もしくはコラム）デザインなどとも呼ばれる。段組みWikipedia
追加するスタイルシート
-moz-column-rule:1px dotted #CCC;
-webkit-column-rule:1px dotted #CCC;
-o-column-rule:1px dotted #CCC;
-ms-column-rule:1px dotted #CCC;
コメントをお書きください