雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。
Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。
今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。
対応ブラウザ
おなじみの Can I use から引用。(2016年05月25日現在)
＜2020年01月追記＞
現在は全ての主要ブラウザで対応可能になりました。
使い方
タグに、カラム数を示すCSSプロパティcolumns を追加するだけで簡単にマルチカラムになります。|
1 2 3 4 5 |
<div class="sample"> 関東山地（秩父山地）の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。 中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。 山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。 </div> |
|
1 2 3 |
.sample{ columns:2; } |
▼出力結果
高尾山は、関東山地（秩父山地）の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
対応ブラウザで確認するとこの長い文章が2カラムの文章になっていると思います。
カラムの間の余白を設定
カラム間にはデフォルトで1文字分の余白がつきますが、 column-gap を設定すると余白を広げたり縮めたり出来ます。emでもpxでも好きな数値を入れます。|
1 2 3 4 |
.sample{ columns:2; column-gap:5em; } |
▼出力結果
高尾山は、関東山地（秩父山地）の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
ちょっと大げさに開けていますが、5文字分の余白ができました。
カラムの間に区切り線を設定
カラム間にはデフォルトでは何もついていませんが、 column-rule を設定すると区切り線が付けられます。borderのように、色と線幅と線種をまとめて記述してやります。|
1 2 3 4 5 |
.sample{ columns:2; column-gap:5em; column-rule:#000 solid 1px; } |
▼出力結果
高尾山は、関東山地（秩父山地）の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント（夏季限定）等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯（カシなどの常緑広葉樹）と冷温帯系の落葉広葉樹林（ブナ・イヌブナ・ナラ・ホオノキなど）・中間温帯林（モミ・ツガなどの針葉樹林）の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。
余白に線が追加されました。
様々な解像度の端末が増えてきた昨今、とても便利なCSSですね。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/DlpOxisnPjk
