Wiki ページ一覧を 3 段組にしてみた - miauのブログ

で Redmine サブプロジェクトの Wiki ページ一覧を親プロジェクトに表示してみたんですが。ページ数が多いので、Wiki のトップページが

こんな感じで恐ろしく縦長のページになってしまいました。

これだと目的のページを探すのが大変なので、対策としてこの部分を 3 段組にしてみました。Firefox、Safari/Chrome 限定です。

コンテンツが増えると自動的に高さを調整してくれる方法を探してみたんですが、

の方法を使えばできそうで。CSS 3 ということで IE 等には対応してなそうですが、まあ Firefox や Chrome を使っている人だけでも見やすくなれば十分なので、やってしまいます。

このサイトの例は

div	{
	-moz-column-count: 2;
	-webkit-column-count: 2;
	}

になっていましたが、

によるとベンダープレフィックスを外したものも併記しておいたほうがよいとのことなので、 column-count の指定も追加します。

なお、

のページで動作確認してみましたが、column-count は Chrome や Firefox ではまだ有効になっていませんでした。

Redmine はデフォルトだと div タグやらスタイル指定やらが有効になってなかった気がするので、あらかじめ有効にしておきます。

この環境は

の対応を実施していたので、あらかじめスタイルは有効になっていました。

段組にしたい場所を

<div style="column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;">

:

</div>

で囲むだけです。この場合は 3 段組に指定したいので、すべて値を 3 にしています。

本当は CSS に切り出したほうがきれいなんでしょうけど、CSS って仕組みはわかるんだけど作法がわからない（こういう場合にどんな class 名にしたらいいの？とか）のでベタで書いてます。

ということで、いくらかドキュメントが俯瞰しやすくなりました。

Trac でもページ一覧を載せると縦長ページになってしまいがちですので、この方法は有効な気がしますね。