七転び八起きブログ

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

2005年09月30日   :: JavaScript

次期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っぽいです。視線の動きにさえ注意して上手く使えば段組は確実に可読性を向上させると思いますし、デザインの幅も広がりますので、よさげではないでしょうか( ´-`)

■トラックバック

このエントリーのトラックバックURL:
http://www.7korobi8oki.com/mt/mt-tb.cgi/72

» あなたがこの危険な情報を知る最後の訪問者です。 from セックステクニック??女性心理の穴をついて虜にする方法??
書店では絶対に手に入らないアダルト業界初の禁断セックス洗脳ノウハウを限定公開中 あなたがこの危険な情報を知る最後の訪問者 注:本セックスマニュアルは単な... [続きを読む]

トラックバック時刻: 2007年10月08日 21:27

» 完全自動ネット出会い促進ツール ミクシィメモリアル from mixi 出会い 完全自動ツール ミクシィメモリアル
mixiの出会いを確実なものにするために!恋愛の大家3人の知恵と知識がつまった、完全自動ネット出会い促進ツール ミクシィメモリアルの紹介です。何も考えずこのツー... [続きを読む]

トラックバック時刻: 2007年10月10日 15:33

» この方法ならヤレる!無料冊子の紹介。 from mixi 出会い 完全自動ツール ミクシィメモリアル
「一ヶ月で数十人の女性と知り合う? そんなの無理に決まってんじゃん」こんな事言う人山ほどいるので、もう聞き飽きました!!そこで、あなたに一つお聞きしますが「まさ... [続きを読む]

トラックバック時刻: 2007年10月10日 20:01

» あなたがこの危険な情報を知る最後の訪問者です。 from セックスしたい女性の心理を巧みについて●●●する方法
書店では絶対に手に入らないアダルト業界初の禁断セックス洗脳ノウハウを限定公開中 あなたがこの危険な情報を知る最後の訪問者 注:本セックスマニュアルは単な... [続きを読む]

トラックバック時刻: 2007年10月11日 19:58

» 女性にモテル凄い方法! 催眠って? from タケちゃんの気ままに生きる
女性に対してこんな接し方があったとは…。催眠術ですよ!なんだ、馬鹿馬鹿しい!!怒りを買いそうです。まあ、とりあえず、コチラを見てくださいませ。ちょっとどうですか... [続きを読む]

トラックバック時刻: 2007年10月20日 02:55

» 運命の彼女に出会いたいあなたへ from セックステクニック??女性心理の穴をついて虜にする方法??
友達が「悔しがる」ほどあなたが心底惚れるいい女と出会うための”5つ”の入り口とその攻略法とは…コンビニで好みのタイプの女性バイトを見つけたでも、わかっているのは... [続きを読む]

トラックバック時刻: 2007年10月20日 16:54

» 愛情のあるセックス from 懸賞の紹介と懸賞プログラムでの小遣い稼ぎ
セックステクニックにも色々なことがありますね。 でも一番安心できることが必要ではないでしょうか。 お互いに安心してadarutoなセックスに浸ることができる。 ... [続きを読む]

トラックバック時刻: 2007年11月02日 18:33

» mixiで簡単お金儲け!月収81万円稼ぐ方法 from mixiで簡単お金儲け!月収81万円稼ぐ方法
あなたにも mixi と Yahoo で1日27000円 の収入を毎日得たノウハウを教えます! [続きを読む]

トラックバック時刻: 2007年11月07日 23:23

» たった2ヶ月で月収93万円を稼いだmixiノウハウ「mixiで月収93万円の不労所得を得た男」 → http://mixi93manfuro.jugem.jp/ from mixiで月収93万円の不労所得を得た男で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「mixiで月収93万円の不労所得を得た男で稼ぐのはあなた?」というサイトを作りましたのでトラックバックさせていた... [続きを読む]

トラックバック時刻: 2007年11月08日 15:42

» 今まであなたに見向きをしなかった男性が本能的にあなたに『だけ』しか見えなくなる方法「モテない女からモテる女へ??5分で男に恋をさせる魔法??」 → http://otokoniaiteni.jugem.jp/ from 23年間まったく男に相手にされなかった負け組女が、たった半年で13人の男性に告白された!究極の恋愛術!【モテない女からモテる女へ??5分で男に恋をさせる魔法??】で恋愛するのはあなた?
初めまして、いつも楽しく拝見しています。この度「23年間まったく男に相手にされなかった負け組女が、たった半年で13人の男性に告白された!究極の恋愛術!【モテない... [続きを読む]

トラックバック時刻: 2007年11月08日 19:06

» トラックバック失礼いたします。m(_ _)m from セックステクニックの決定版!レズビアンが語る究極のセックスバイブル!!
初めまして、いつも楽しく拝見させていただいてます!^^ 実はこの度、 『アセックステクニックの決定版!レズビアンが語る究極のセックスバイブル!!』 という... [続きを読む]

トラックバック時刻: 2007年11月09日 00:56

» 女性をトリコにするのは簡単でした。 from 早漏克服法と包茎手術でモテる男に!
実はAV男優も使っていた!元ホスト600人斬り、枕営業を駆使してホストクラブでトップにのし上がっ... [続きを読む]

トラックバック時刻: 2007年11月09日 20:28

» 極秘洗脳法 from 極秘洗脳法
始めまして、この度、極秘洗脳法というサイトを作りましたのでトラックバックさせていただきました。女性とエッチがシタいと思っている人には有益な情報だと思いますのでよ... [続きを読む]

トラックバック時刻: 2007年11月09日 22:54

» 高機能・激安 ミクシィあしあとツール「mixzilla みくじら」 → http://choukoukinoum.jugem.jp/ from 【超高機能】mixi自動巡回ツールの革命「Mixzilla」【激安】で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「【超高機能】mixi自動巡回ツールの革命「Mixzilla」【激安】で稼ぐのはあなた?」というサイトを作りました... [続きを読む]

トラックバック時刻: 2007年11月12日 12:55

» 女性がスケベで淫乱になって… from 早漏克服法と包茎手術でモテる男に!
実はAV男優も使っていた!元ホスト600人斬り、枕営業を駆使してホストクラブでトップにのし上がっ... [続きを読む]

トラックバック時刻: 2007年11月13日 22:11

» 1日125人のマイミク、1日2288 件のユニークアクセスを獲得できるミクシィツール 「ミクシィクエスト / mixiQuest」 → http://moukarubaken.jugem.jp/ from 【Vista対応】【今までのツールは何!?ミクシィツールの最終最強版・遂に登場!】迷宮のようなミクシィの中を快適に探検する為の必須アイテム!『 ミクシィクエスト / mixiQuest 』 で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「【Vista対応】【今までのツールは何!?ミクシィツールの最終最強版・遂に登場!】迷宮のようなミクシィの中を快適... [続きを読む]

トラックバック時刻: 2007年11月16日 20:58

» Mixi『あしあとツール』のトップブランドです 「ミクシィクエスト2 / mixiQuest2」 → http://saishuumaniar.jugem.jp/ from 【Vista対応】【ミククエが衝撃の進化!ミクシィツールでステップメール!?RSS!?】迷宮のようなミクシィの中を快適に探検する為の必須アイテム!『 ミクシィクエスト2 / mixiQuest2 』 で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「【Vista対応】【ミククエが衝撃の進化!ミクシィツールでステップメール!?RSS!?】迷宮のようなミクシィの中... [続きを読む]

トラックバック時刻: 2007年11月16日 21:46

» ノーリスクの即金ノウハウ♪ from 確実に稼ぐ!耳寄り情報♪
がんばって働く会社員の方へ(^^)「なるほどこれなら確実に儲かる…なんでいままで誰も気づかなかったんだろう」私はここを見てそう思いました。見てもらえたでしょうか... [続きを読む]

トラックバック時刻: 2007年11月17日 00:27

» 愛する二人のために・・・ from 愛する二人のために カート用
1173人とエッチした元風俗嬢が明かす、女を簡単にイカせる男の秘密のテクニックとは? こんにちは、タイトルは凄いんですが?? 内容はいたって真剣! 真剣ですよ。... [続きを読む]

トラックバック時刻: 2007年11月17日 21:49

» ゾッとする程衝撃的な心理誘導「洗脳」 from ゾッとする程衝撃的な心理誘導
このプログラムは非常に危険です。18歳未満の方の入場は禁止します。また絶対に犯罪等には利用しない... [続きを読む]

トラックバック時刻: 2007年11月17日 22:14

» ゾッとする程衝撃的な心理誘導「洗脳」 from ゾッとする程衝撃的な心理誘導
このプログラムは非常に危険です。18歳未満の方の入場は禁止します。また絶対に犯罪等には利用しない... [続きを読む]

トラックバック時刻: 2007年11月17日 22:15

» 1日125人のマイミク、1日2288 件のユニークアクセスを獲得できるミクシィツール 「ミクシィクエスト / mixiQuest」 → http://moukarubaken.jugem.jp/ from 【Vista対応】【今までのツールは何!?ミクシィツールの最終最強版・遂に登場!】迷宮のようなミクシィの中を快適に探検する為の必須アイテム!『 ミクシィクエスト / mixiQuest 』 で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「【Vista対応】【今までのツールは何!?ミクシィツールの最終最強版・遂に登場!】迷宮のようなミクシィの中を快適... [続きを読む]

トラックバック時刻: 2007年11月18日 20:05

» 私、モテるわよ・・・。妬まれるくらい。まだなら、これ。「愛されるための「恋愛成功変身術」 ダンロード版」 → http://aisarerutamen.jugem.jp/ from 愛されるための「恋愛成功変身術」 ダンロード版で愛されるのはあなた?
初めまして、いつも楽しく拝見しています。この度「愛されるための「恋愛成功変身術」 ダンロード版で愛されるのはあなた?」というサイトを作りましたのでトラックバック... [続きを読む]

トラックバック時刻: 2007年11月21日 17:20

» まじめな女の子でもナメナメしたい from 早漏克服法と包茎手術でモテる男に!
>>>ホストがどこでもしゃぶられる理由はコレだHIV STD 感染注意 ヤリすぎ 女はエッチ!先... [続きを読む]

トラックバック時刻: 2007年11月25日 22:11

» 【女性のためのセックスマニュアル】 from 彼氏に愛される恋愛人間関係を作る101のアドバイス
女性のセックスマニュアル??男を骨抜きにするHテクニック【女性のためのセックスマニュアル】トロけるH... [続きを読む]

トラックバック時刻: 2007年11月29日 17:43

» 脳から治す早漏克服 FR法 from 厳選500社の最新情報
脳から治す早漏克服 FR法http://sbic001.blog120.fc2.com/blog-entry-870.html FR法、100%というわけでは... [続きを読む]

トラックバック時刻: 2007年12月01日 08:34

» 【特進アフィリエイトプロジェクト!】 from 特進アフィリエイト
アフィリエイトの成功で夢の沖縄移住を手にした加藤宏幸が贈るほったらかしアフィリエイトノウハウの金字塔 【特進アフィリエイトプロジェクト!】2ヵ月後から月5万円... [続きを読む]

トラックバック時刻: 2007年12月05日 20:46

» モテる男、デキる男、女性を依存させる男になれる"ある3つのステップ"「恋愛傀儡師養成マニュアル」 → http://renaikugutsus.jugem.jp/ from 恋愛傀儡師養成マニュアル【井上 誠/motemagic.com】でセックスするのはあなた?
初めまして、いつも楽しく拝見しています。この度「恋愛傀儡師養成マニュアル【井上 誠/motemagic.com】でセックスするのはあなた?」というサイトを作りま... [続きを読む]

トラックバック時刻: 2007年12月08日 13:22

» もう、彼女の浮気は心配ないよ。不安ならこれ。「彼女を守る技術」 → http://kanojowomamor.jugem.jp/ from 【彼女を守る技術】【朝未音 司/合同会社 インスパイア】で彼女を守るのはあなた?
初めまして、いつも楽しく拝見しています。この度「【彼女を守る技術】【朝未音 司/合同会社 インスパイア】で彼女を守るのはあなた?」というサイトを作りましたのでト... [続きを読む]

トラックバック時刻: 2007年12月08日 17:01

» 私はモテた。これまで恋人達の脳に自分のイメージをセットしてきて。まだなら、これ。「【eフェロモン ZERO】??究極の恋愛脳をセットする?? 」 → http://iferomonzero.jugem.jp/ from 【eフェロモン ZERO】??究極の恋愛脳をセットする?? 【朝未音 司/ホストアカデミー】で恋愛するのはあなた?
初めまして、いつも楽しく拝見しています。この度「【eフェロモン ZERO】??究極の恋愛脳をセットする?? 【朝未音 司/ホストアカデミー】で恋愛するのはあなた... [続きを読む]

トラックバック時刻: 2007年12月12日 12:42

» 私は、もう十分に男を虜にしてました。これからなら、これ。「大好きな彼を射止める恋愛法則」 → http://daisukinakare.jugem.jp/ from 大好きな彼を射止める恋愛法則【渡瀬亜希子/株式会社ホットライン】で稼ぐのはあなた?
初めまして、いつも楽しく拝見しています。この度「大好きな彼を射止める恋愛法則【渡瀬亜希子/株式会社ホットライン】で稼ぐのはあなた?」というサイトを作りましたので... [続きを読む]

トラックバック時刻: 2007年12月12日 16:34

» ダイエット方法 from ダイエット方法
ダイエット方法の効果的な実践とは? [続きを読む]

トラックバック時刻: 2008年01月01日 23:03

» 伝説のテクニックマニュアル from 伝説のSEXテクニックマニュアル
「相手を満足させるだけのSEXができない・・・」「SEXすればするほど、気持ちがすれ違う。」そんな経験はありませんか?大変ですよね・・。僕自身も、数年前までは、... [続きを読む]

トラックバック時刻: 2008年01月07日 18:34

■コメントはこちらから

サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)


情報を登録する?


mail TOP