段組み(マルチカラム)をしたい

ディスプレイの幅が広くなってくると、文字が横に長すぎて読みづらくなる

文字列を自動的に複数行に分けてくれて、しかも、文章量にあわせて自動的に、改行位置を決めてくれる。必ずしも必要のない機能ではあるのですけど、読みやすさを提供したい時には、この方法は知っていても損はないとは思います。2015年8月11日現在、この機能はJimdoにはありません。

column-count: 2

1行にしめる文字数は15文字から34文字程度が読みやすいとされています。

今後、レスポンシブWEBデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。

段組(だんぐみ)は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム(もしくはコラム)デザインなどとも呼ばれる。

ウィキペディア(Wikipedia)

上記カラムのHTMLのソース

<div style="-moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2;">

<p>1行にしめる文字数は15文字から34文字程度が読みやすいとされています。

今後、レスポンシブWEBデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。<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文字半分のスペース

1行にしめる文字数は15文字から34文字程度が読みやすいとされています。

今後、レスポンシブWEBデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。段組(だんぐみ)は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム(もしくはコラム)デザインなどとも呼ばれる。段組みWikipedia

追加するスタイルシート
-moz-column-gap: 2.5em;

-webkit-column-gap:2.5em;

-o-column-gap2.5em;

-ms-column-gap2.5em;

column-rule:1px dotted #CCC;

1行にしめる文字数は15文字から34文字程度が読みやすいとされています。

今後、レスポンシブWEBデザインを意識して文字を組む時には、流し込みが使えると便利ですよね。段組(だんぐみ)は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて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;

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422