alcusの日記 with GUINNESS

■ [tips]映画のスタッフロールみたいに２カラムでセンタリング

これは

映画のスタッフロールみたいなのを作ってみたかったのです。

やってること

左側のdt要素は右そろえに、右側のdd要素は左そろえ（デフォルト）で設定してあります。こういう長い文章でも大丈夫みたいです。FireFox1.0.7とIE6で確認しました。

下線がひいてありますが

このテーマのdt要素の設定がそんな感じなので。特にキャンセルしてありませんです。

dl要素のcompactについて

段違いでなくしたかったので設定してみたのですが効いていないみたいです。まぁこれでもいいかなぁ、と思ってます。

dl {
	display: compact;
}
dl dt {
	position: relative;
	width: 30%;
	left: 20%;
	margin-right: 0.3em;
	text-align: right;
}
dl dd {
	position: relative;
	width: 30%;
	left: 50%;
	margin-left: 0.3em;
}

■ [memo]ColorBlender.com

はてなブックマーク経由でこちらのページより。前回*1のColorMixerと同じくはてな青ヘッダで比べてみた*2のだけど結果はほぼ同じ。あんまし面白くない。まぁ「これと似た色でもうちょっと軽い感じで」とかいう調整につかえるかなぁ、というところかな。

http://colorblender.com/

■ CSS3で新聞っぽくマルチカラムできるかも？

slashdot経由*1で FireFox1.1候補の新機能を読む。といってもまだまだ機能は増減するはずなので1.1リリース時は別物になっている可能性は大きいのだけど、その中で

[CSS3]マルチカラムレイアウト

マルチカラムレイアウト 草案の試験的な実装です。これにより、新聞紙面のような段組レイアウトを簡単に実現できるようになります。

Deer Park Alpha 1 - Web 開発者向け新機能

というわけでCSS3草案のマルチカラムが目に見える形で実装されるわけで。同じくCSS3草案である縦書き*2も実装されれば前のエントリ（id:alcus:20050516#p1）で書いた「新聞っぽい縦書き」が実現できますね。

ただCSS3の前バージョンCSS2.1がそろそろ固まるか？といった状況なんでCSS3実現はまだまだ先になりそうです。

http://www.w3.org/TR/css3-multicol/

■ [memo]縦書きマニュアル

縦書きに関していろいろとまとめられています。やっぱりスクロールなんですよね。参考になりました。

http://www012.upp.so-net.ne.jp/tateruby/manual/index.html

■ どんな風に縦書きされたいか

g:beta:id:alcus:20050513 からこちらへ。追記：比較的長い文章での縦書きサンプルの意味もあったので g:beta:id:alcus:20050517#p1 にコピーしました。

縦書き日記は誰でも一度はやってみたい形態の１つではあると思うけど実際やってみると見た目上の問題がいろいろでてくる。特にそれは長い文章のときに顕著なのでこうしてちょっと長々書いてみます。

比較的長い本文をもつ縦書き日記を表示する方法としては次の３つがあるかと思います。

1. 横に長くする
2. 縦に長くする
3. 新聞っぽく段組する

横に長くする方法

縦方向サイズを設定することで横に長い日記がつくれます。一番収まりのいいのは日記全体を縦書きにする方法でしょうか。しかしはてなでは「横書きのヘッダーをどう落ち着かせるか」という問題があります。

また日記の一部（例えば日付ごと）を横にスクロールする形式で納めることも可能ですが本文部分が浮いた印象があります。

縦に長くする方法

横幅を指定する、CSS的には一番楽な実現方法ではないでしょうか。ただ読む際には目線にあわせて１行毎に縦スクロールさせる必要があります。

新聞っぽく段組する

これが実現できれば一番収まりがいいのではないでしょうか。ただ現状ではうまく実現する方法はないように思います。１つの手段としてサーバー側で「ブラウザにどう表示されるかをちゃんと考慮したHTMLを出力させる」という方法がありますが、閲覧者すべてのブラウザに対し「今縦幅はいくつか？横幅はいくつか？」と計算させるのは現実的ではないでしょう。

そのほか共通の問題

まず縦書きで表示できるブラウザがIE系しかないこと。また縦書きが標準機能となっていないこと（今はたまたまIEが表示しているだけ）が問題です。縦書きに特化したCSSを組むと他のブラウザではまともに読めない状態になりやすいです。

またコメント欄を縦書きにした場合、コメント入力欄は横書きなので*1入力したときに違和感が感じられます。

■ [memo]EasyRGB と ColorMixer

たださんの日記*1で知った ColorMixer 。普段使っている EasyRGB と似ているようで実はそんなに似ていないっぽい。

• http://www.easyrgb.com/harmonies.php?ENTRY1=24&ENTRY2=65&ENTRY3=206#Result
• http://colormixers.com/mixers/cmr/?color=1841CE

リンク先はそれぞれ、はてなダイアリーの青ヘッダをベースに計算させた結果。ColorMixerのほうが同系色の組み合わせをつくってくるのにたいし EasyRGB はアクセントになる色を作ってくる感じか？