【CSS】Webでマルチカラムレイアウトが可能に

  • はてブ

雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。

02 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。


今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。


対応ブラウザ(2016年05月25日現在)

おなじみの Can I use から引用。

03
IEは10から。Edgeも対応、Chrome Safari Firefoxではベンダープレフィックスが必要です。スマフォのブラウザでも問題無さそう。



使い方

タグに、カラム数のstyle columns を追加するだけで簡単にマルチカラムになります。


ただベンダープレフィックスをつけないといけないので、正しくはこう。



▼出力結果

高尾山は、関東山地(秩父山地)の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント(夏季限定)等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯(カシなどの常緑広葉樹)と冷温帯系の落葉広葉樹林(ブナ・イヌブナ・ナラ・ホオノキなど)・中間温帯林(モミ・ツガなどの針葉樹林)の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。

対応ブラウザで確認するとこの長い文章が2カラムの文章になっていると思います。


カラムの間の余白を設定

カラム間にはデフォルトで1文字分の余白がつきますが、 column-gap を設定すると余白を広げたり縮めたり出来ます。emでもpxでも好きな数値を入れます。



▼出力結果

高尾山は、関東山地(秩父山地)の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント(夏季限定)等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯(カシなどの常緑広葉樹)と冷温帯系の落葉広葉樹林(ブナ・イヌブナ・ナラ・ホオノキなど)・中間温帯林(モミ・ツガなどの針葉樹林)の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。

ちょっと大げさに開けていますが、5文字分の余白ができました。



カラムの間に区切り線を設定

カラム間にはデフォルトでは何もついていませんが、 column-rule を設定すると区切り線が付けられます。borderのように、色と線幅と線種をまとめて記述してやります。



▼出力結果

高尾山は、関東山地(秩父山地)の東縁に位置する山のひとつ。明治の森高尾国定公園に指定されており、キャンプやバーベキューなど、また、植物の採取、鳥類の捕獲も禁止されている。
中腹には、数多くの建物や文化財を有する高尾山薬王院の他、サル園・野草園や標高500mからの夜景を楽しめる高尾山ビアマウント(夏季限定)等がある。
山頂には、展望台や高尾ビジターセンターがある。長さ1,697kmの東海自然歩道の起点でもある。また明治以降、高尾山薬王院の参拝客に元気をつけてもらおうと振る舞ったのが始まりのとろろそばは高尾山の名物であり、ふもとから山頂に点在する各店がそれぞれメニューを提供している。暖温帯系の照葉樹林帯(カシなどの常緑広葉樹)と冷温帯系の落葉広葉樹林(ブナ・イヌブナ・ナラ・ホオノキなど)・中間温帯林(モミ・ツガなどの針葉樹林)の境界に位置するため植生が豊かであり、しかも都市部に近い割には比較的よく保たれている。

余白に線が追加されました。






様々な解像度の端末が増えてきた昨今、とても便利なCSSですね。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ