1行の文字数が多い文章は読みにくいと感じる場合があります。しかし、この問題は、マルチカラムを使ってレイアウトすれば、簡単に解決できます。マルチカラムは印刷物ではよく見かけるレイアウト手法ですが、CSSのマルチカラム（段組）レイアウトモジュール機能を使えば、Webサイト上でも印刷物と同じような段組が実現できます。
しかし、Webデザインでマルチカラムを使うことに関して、1つだけ難点があります。それは文章のサイズを調整できないということ。このチュートリアルでは、どのスクリーンサイズにも適応するレスポンシブなマルチカラムの設定方法を紹介します。まず始めは基本から、そして徐々に上級者向けの手法を説明していきます。
ブラウザー対応の状況
ブラウザーでマルチカラムレイアウト対応するにはプレフィックスを使うと良いでしょう。
「Can I use」の統計によると、世界の95.32%のブラウザーはこのプレフィックスに対応しています。少数ですが、IE10+やEdge、そして Opera Miniのようなブラウザーはマルチカラムレイアウトに完全対応しています。FirefoxやChromeのようなブラウザーはプレフィックス設定が必要です。
もし古いブラウザー（一般的にIE9以下を指す）への対応が必要であれば、古いバージョンのポリフィルも入手できます。もちろんブラウザーがもともとマルチカラムレイアウト機能に対応していなければ、レイアウトはシングルカラムになってしまいますですので、そのような場合はポリフィルの使用はお勧めできません。
CSSマルチカラムレイアウトモジュールにはいろいろな種類のプロパティがあります。それらを1つ1つ見ていきましょう。
カラムカウント（段組数）とカラム幅
colum-countプロパティは、設定したい要素をいくつのカラムで表示させるのかを指定できます。「auto」または1以上の数字を入力しましょう。「auto」で設定すると、カラム数はcolumn-width（カラム幅）プロパティによって自動的に決定されます。数字を入力すれば、全てのカラムが均等幅に設定されます。
column-widthプロパティは各要素のカラムごとの幅を設定します。そこまで厳密には決められません。たとえば、十分なスペースがなければカラムは狭くなります。このプロパティも「auto」か1以上の数字を入力します。「auto」にした場合、幅はcolumn-countプロパティによって決まります。空いているスペースがそれぞれのカラムに均等に振り分けられるということです。
もしくは、ショートハンドカラムプロパティを使えばカラム数と幅の両方を一気に設定できます。カラムプロパティのシンタックスは以下のようになります。
.example {
columns: ||
}
このプロパティを実際に使った例をいくつか紹介します。それぞれの例の横に解説が付いています。
.example {
columns: 10em; /* column-width: 10em / column-count: auto */
columns: 4; /* column-width: auto / column-count: 4 */
columns: 4 auto; /* column-width: auto / column-count: 4 */
columns: auto 10em; /* column-count: auto / column-width: 4 */
columns: auto; /* column-count: auto / column-width: auto */
columns: auto auto; /* column-count: auto / column-width: auto */
}
ご覧の通り、最初のカラムの定義は4組目のショートハンド。2組目に見えるのは3組目のショートハンドです。基本的に、整数がどのユニットにも割り振られない場合、それはcolumn-countとして組み込まれます。
こちらからこのCodePenのデモを実際に試すことができます。
実際にウィンドウをリサイズすると、以下の点に気づきます。
- column-countプロパティは設定した値とカラム数を常に同じ値に維持する。変わるのはカラムの幅のみ。
- column-widthプロパティは空きスペースに応じて自動的にカラム数を変える。カラム幅は設定した値よりも大きくなり、カラム数はそれに従って調整される。もし空きスペースが十分でなければ全てのカラム幅が小さくなることもある。
- columnプロパティはcolumn-countで設定した値を最大カラム数として採用する。そうすることでカラム数は制限数を超えることがなく、幅はそれに応じて調整され、カラム幅は設定した値に近くなる。
カラムのギャップとカラムのルール
column-gapプロパティを使用するとカラム間のスペース幅を決められます。「normal」または0以上の数字を入力できます。「normal」で設定すると、各ブラウザー定義のデフォルト値に従ってカラム間のスペースが設定されます。
Column-ruleプロパティはカラム間に線を入れることができるショートハンドで、border-leftやborder-rightプロパティに似ています。このプロパティは以下のようなシンタックスになります。
.example {
column-rule: || ||
}
column-rule-widthでは、幅を「3px」などの値や「thin」「medium」「thick」のような単語で設定できます。column-rule-styleでは「dashed」「dotted」「solid」などの値が使用できます。border-styleプロパティで有効な値は全てcolumn-rule-styleで使用でき、有効な色の値を使用すればcolumn-rule-colorでどんな色でも設定できます。
このCodePenのデモで実際にこれらのプロパティを一緒に使ってみました。
カラムフィルとカラムスパン
column-fillプロパティでは、コンテンツをどのように仕分け、さまざまなカラムをどう表示するかを設定できます。ここは「auto」か「balance」と設定しましょう。「auto」にした場合、カラムは連なって表示されますが、「balance」にすればコンテンツは均等な間隔で表示されます。
覚えておくと良いのは、カラムの要素に高さを設定した場合、Firefoxはコンテンツの高さを自動で調整します。しかし、その他のブラウザーはカラムを連なって表示させます。
column-spanプロパティでは、要素がどのようにカラムをまたがるかが指定できます。有効な値は2つあり、「all」または「none」です。「all」に設定した場合、要素は全てのカラムにまたがって表示されます。ちなみに、このプロパティはFirefoxでは対応していません。
Here is a CodePen demo that “spans” a blockquote element across all columns
CodePenのデモで引用タグの要素を全カラム上に広げてみました。
Firefoxでは引用タグはカラムの途中で切れてしまうので、適していないかもしれません。
マルチカラムでレスポンシブなレイアウトを作ろう
さて、さまざまなプロパティや値を理解したところで、次はレイアウトをレスポンシブかつ、ユーザーフレンドリーにすることに注力しましょう。
column-countとcolumn-widthにはどちらも気をつけたい点があります。column-countは大きな端末ではカラム数を保てますが、小さい端末になるとカラムが小さく割り振られてしまいます。同様に、column-widthは小さい端末上で狭くなりすぎないようにしますが、大体は大きい端末で表示されるカラムのままになってしまいます。
どのサイズの画面でもレイアウトがきれいに見えるようにするためには、column-countとcolumn-widthの両方を設定する必要があります。こうすることで幅とカラム数をコントロールできます。この時点では、まだ修正しなければならない点がいくつかあると思いますが、それは次の段落で説明します。
水平スクロールの修正
カラムの高さを設定した場合、ビューポートを狭くすると水平スクロールバーが表示されます。コンテンツは垂直方向に拡張することができないため、水平方向に拡張します。水平スクロールが出てきたらブラウザーのサイズを調節し、幅の値を知ることでこれを修正できます。そして、カラムの高さをメディアクエリを使ってブラウザーの幅よりも低い「auto」に指定します。下記がそのコードになります。
.responsive-height {
height: 250px;
}
@media (max-width: 1040px) {
.responsive-height {
height: auto;
}
}
こちらのCodePenデモでその問題と修正方法を参照してください。
こちらの2つの例がどのように反応するか、ウィンドウのサイズをリサイズして確認しましょう。
長すぎるカラムを修正する
カラムがあまりにも長過ぎる場合は、ユーザーは全てのコンテンツを読むために上下にスクロールを繰り返さなければならないので、ユーザーにとって使いにくい可能性があります。カラムの高さがビューポートの高さよりも大きくなった場合は、マルチカラムをなくすと良いでしょう。こちらもメディアクエリを使って実行することが可能です。
@media (min-width: 800px) {
.long-columns {
columns: 3 200px;
}
}
この場合は、ユーザーが上下にスクロールしなくても良い状態になったときだけマルチカラムを使うようにしています。
こちらでマルチカラムとメディアクエリを使用しているデモをご覧ください。
最後に
以上、CSSのマルチカラムレイアウトモジュールに関するチュートリアルはいかがでしたか？ お役に立てれば嬉しいです。ここで取り上げたプロパティはレスポンシブデザインにする際に役立つと思います。もし古いブラウザーを使っている場合、マルチカラムはシングルカラムになってしまうのでご注意を。
