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

  • このエントリーをはてなブックマークに追加

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

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


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


対応ブラウザ

おなじみの Can I use から引用。(2016年05月25日現在)

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

<2020年01月追記>
現在は全ての主要ブラウザで対応可能になりました。


使い方

タグに、カラム数を示すCSSプロパティcolumns を追加するだけで簡単にマルチカラムになります。



▼出力結果

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

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


カラムの間の余白を設定

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



▼出力結果

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

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



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

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



▼出力結果

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

余白に線が追加されました。
様々な解像度の端末が増えてきた昨今、とても便利なCSSですね。



YoutubeChannelのご紹介

同様の内容を、動画でご覧になれます。

https://youtu.be/DlpOxisnPjk



執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

iOSアプリでREST APIを使うお話

前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]

プログラミング

AndroidでREST APIを取り扱うお話

前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]

スマホアプリ

無音カメラが国内ではリリースできなかったお話

みなさん、無音カメラ(Silent Camera)で撮影してますか? いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波(!?)に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった?2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは?4 終わりに5 参考 実際どうなった? 結果から言うと、リリースはできませんでした。 […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。