【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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

Webデザイン

【Photoshop】クリックするだけ!? AIで風景を置き換える新機能”風景ミキサー”の使い方

PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます! 目次1 どんな機能?2 使い方2.1 手順1:被写体を選択する2.2 手順2:フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能? 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]

Webデザイン

【Illustrator】手書きのスキャン画像をパスデータにする

Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 目次1 「画像トレース」機能の使い方1.1 画像トレースパネルを開く1.2 スキャンしたデータをトレースする1.3 不要な部分を削除する2 YoutubeChannelのご紹介 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]>[画像トレー […]

Webデザイン

【Illustrator】長文をカラム分けして読みやすくする方法

リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 目次1 やり方解説1.1 手順1:四角オブジェクトを配置する1.2 手順2:四角オブジェクトをテキストボックスに変換する1.3 手順3:複数のテキストボック […]

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

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

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

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