CSS3のMulti-columnレイアウトを先取りする方法

Share :

次期CSSとして現在WorkingDraftなCSS3ですが、その中に、新聞のような多段カラムを実現するモジュールが予定されています。

具体的にはCSS3 module: Multi-column layout仕様書原文というものです。

昔あったNetscape独自タグのMulticolを思い出させます。

ちなみにCSS3の策定中の草案は色々なサイトで邦訳がされております。

 ・CSS3のモジュール:テキスト

 ・CSS3ハイパーリンクプレゼンテーションモジュール(邦訳)

 ・Web関連技術の仕様書邦訳

もちろん現在のブラウザには基本的には実装されていないのですが(Geckoエンジン系は-moz-つきのでテスト実装されてたんでしたっけ。)、一足先にこれをJavaScriptで使ってしまおうというものが、A List Apart(→A List Apartトップ)に記事としてあげられていました。 該当記事は A List Apart: Articles: Introducing the CSS3 Multi-Column Moduleです。

最初の方では、多段コラムが再び光を浴びてきた事情や、実際にCSS3に加わった際にどういったプロパティになるか、などの解説になります。

そして、「An interim measure for experimentation」の部分から、JavaScriptで一時的に多段カラムを実現する方法の部分になります。

実際どうしたらよいか

まず、サンプルページがCSS3 Multi-Colum Layout Demonstration and Documentation – CSScripting.comです。

ここのTestCaseの部分から各サンプルページに行くことができます。

これを実現するには、一枚のjsファイルを外部から読み込むだけです。

それだけで、後はCSS3のカラム周りのセレクタを使えるようになります。

例えば .article { column-count: 2; column-gap: 20px; } の様に。

実際にローカルでやってみましたが、ちゃんと再現されました(当たり前か)。

気をつけること

JavaScriptがDOM経由でCSSを取得して処理するので、JSファイルを読み出す前にCSSを外部から読み込んでおかないといけません。

なので、header内での順番に注意です。

また、あまり複雑なセレクタだと上手くスタイルを取得できないようです。

できるだけシンプルなセレクタにするべきだそうです。

それに気をつけていれば、ひとまずOKっぽいです。

視線の動きにさえ注意して上手く使えば段組は確実に可読性を向上させると思いますし、デザインの幅も広がりますので、よさげです( ´-`)


Share :
お悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム