CSS3 の column-count って嬉しいだろうか?

ここんとこずっとお世話になっている W3Schoolsで、全然関係ないのを調べててふと目に留まって気になってたヤツ。

要するにこんな風に「新聞とかみたいな」マルチカラムの実現を「css だけで出来る」、というもので、table を使わなくてよい、というだけで確かに十分に価値があるわけだわね。こんなスタイルね:

 1 <style> 
 2 .multicolumn-0 {
 3   /* Chrome,
 4      Safari,
 5      Opera */
 6   -webkit-column-count: 2;
 7   /* Firefox */
 8   -moz-column-count: 2;
 9   column-count: 2;
10 }
11 </style>
1 <div class="multicolumn-0">
2 要するにこんな風に...
3 </div>

table はどうしても複雑になるからねぇ。うん、嬉しいはずだ、嬉しいだろう。

たださ、みてわかる通りこれは、「アラインメント問題との格闘」、となるわけだね。それに苦労するくらいなら table の方がいいだろう。


すぐに思いつくのは、コード比較をサイドバイサイドで、みたいなことだけど…:

 1 # python 2.7の公式ドキュメントベースの例
 2 from Tkinter import *
 3 
 4 class Application(Frame):
 5     def __init__(self, master=None):
 6         Frame.__init__(self, master)
 7         self.pack()
 8         self.createWidgets()
 9 
10     def createWidgets(self):
11         self.hi_there = Button(self)
12         self.hi_there["text"] = "Hello",
13         self.hi_there["command"] = self.say_hi
14 
15         self.hi_there.pack({"side": "left"})
16 
17         self.QUIT = Button(self)
18         self.QUIT["text"] = "QUIT"
19         self.QUIT["fg"]   = "red"
20         self.QUIT["command"] =  self.quit
21 
22         self.QUIT.pack({"side": "left"})
23 
24     def say_hi(self):
25         print "hi there, everyone!"
26 
27 root = Tk()
28 app = Application(master=root)
29 app.mainloop()
30 root.destroy()
 1 # python 3.4の公式ドキュメントベースの例
 2 import tkinter as tk
 3 
 4 class Application(tk.Frame):
 5     def __init__(self, master=None):
 6         tk.Frame.__init__(self, master)
 7         self.pack()
 8         self.createWidgets()
 9 
10     def createWidgets(self):
11         self.hi_there = tk.Button(self)
12         self.hi_there["text"] = "Hello"
13         self.hi_there["command"] = self.say_hi
14 
15         self.hi_there.pack(side="top")
16 
17         self.QUIT = tk.Button(
18             self,
19             text="QUIT", fg="red",
20             command=root.destroy)
21 
22         self.QUIT.pack(side="bottom")
23 
24     def say_hi(self):
25         print("hi there, everyone!")
26 
27 root = tk.Tk()
28 app = Application(master=root)
29 app.mainloop()
30 #
31 #

無論行数を正確に合わせないとこうなる:

 1 # python 2.7の公式ドキュメントベースの例
 2 from Tkinter import *
 3 
 4 class Application(Frame):
 5     def __init__(self, master=None):
 6         Frame.__init__(self, master)
 7         self.pack()
 8         self.createWidgets()
 9 
10     def createWidgets(self):
11         self.hi_there = Button(self)
12         self.hi_there["text"] = "Hello",
13         self.hi_there["command"] = self.say_hi
14 
15         self.hi_there.pack({"side": "left"})
16 
17         self.QUIT = Button(self)
18         self.QUIT["text"] = "QUIT"
19         self.QUIT["fg"]   = "red"
20         self.QUIT["command"] =  self.quit
21 
22         self.QUIT.pack({"side": "left"})
23 
24     def say_hi(self):
25         print "hi there, everyone!"
26 
27 root = Tk()
28 app = Application(master=root)
29 app.mainloop()
30 root.destroy()
 1 # python 3.4の公式ドキュメントベースの例
 2 import tkinter as tk
 3 
 4 class Application(tk.Frame):
 5     def __init__(self, master=None):
 6         tk.Frame.__init__(self, master)
 7         self.pack()
 8         self.createWidgets()
 9 
10     def createWidgets(self):
11         self.hi_there = tk.Button(self)
12         self.hi_there["text"] = "Hello"
13         self.hi_there["command"] = self.say_hi
14 
15         self.hi_there.pack(side="top")
16 
17         self.QUIT = tk.Button(
18             self, text="QUIT", fg="red",
19             command=root.destroy)
20 
21         self.QUIT.pack(side="bottom")
22 
23     def say_hi(self):
24         print("hi there, everyone!")
25 
26 root = tk.Tk()
27 app = Application(master=root)
28 app.mainloop()



つまりは、根本的にはこの手の用途には向いてないわけだわな。やっぱしこのスタイルの設計意図と同じ目的で使うのが良いということにはなる。例えばこんなだな:

頭ではわかっているのにMewを5年以上ぶりくらいに使った、そして北陸新幹線開通記念にちょっとだけ富山弁してみたで Thunderbird の話したいのに全部 Firebird になっとった。もちっと命名工夫出来んかいね。

知らん人のために言っとくと、

  • FireFox:みんなだいすきぶらうざ
  • Firebird:RDBMS(データベース)
  • Thunderbird:富山県の県鳥

いや…、まぁ Thunderbird は MUA (メールユーザエージェント) な。Firebirdは2年くらい経験があるぞ、sqlite くらい軽量で悪くないぞ、制約がときにキツいけど。

富山県の県鳥「雷鳥」は、北アルプスに生息するね:
wikipediaより



ので、特急列車「サンダーバード」が走ってるね:
wikipediaより

アラフォー以上ならこれが Thunderbird(s) だね:
wikipediaより


サンダーバードじゃないね、サンダーバーズだね:
wikipediaより



タワーレコーズだね、タワーレコードじゃないね:
wikipediaより



「紙というデバイス」と「ディスプレイというデバイス」の違いについて、あなたがどの程度意識的かはわかりませんが、根本的にこのスタイルは、「縦方向の(ページ単位でない)スクロールを要しない」文書以外では避けた方がいいぞ。目線の移動とスクロール操作を同時に快適に行えるほど人間の脳は賢く出来てない。

裏を返せば、jquery.onepage-scroll.jsのような、つまりスライド的な文書では、これは使い途は結構あるかもしれないね。