背景画像でコメントフォームを分かりやすく

?D


question:1146216401やidea:10081を拝見して「確かにそうだなー」と思ったので、CSSでそれっぽいことをしてみた*1。手順は：

  1. 日記のデザインに合わせて、添付のようなイメージを用意。
  2. <form class="comment">の背景画像に指定。

Hatena_simple-*テーマを利用しているこの日記の場合、スタイルシートの指定はこんな感じ：

form.comment {
	background: url(...) no-repeat 0% 100%;
}
form.comment div.commentshort br {
	display: block;
	font-size: 1px;
	line-height: 1px;
}
form.comment div.commentshort input {
	display: block;
	margin: 0 0 0 50px;
	width: auto;
	height: 20px;
}
form.comment div.commentshort textarea {
	display: block;
	margin: 2px 0 2px 50px; _margin: -1px 0 1px 50px;
	width: auto;
	height: 60px;
}

入力欄の高さをpxで指定していたり、IE用に_ハックを使っていたり、br要素に無茶なスタイルを指定していたり*2、とても汚い*3。あと、input要素のdisplay指定やmargin指定の副作用がいくつか出てしまったので、適当に対応してみたり*4。IEでも属性セレクタや隣接セレクタが使えるなら、もう少しスマートにできそうなものだけれど……公式にサポートされるまでのその場しのぎとしては、このくらいかなー。
ただ、idea:7886が仕様変更に伴う影響が大きく、現時点では却下されていることを考えると、idea:10081がそのまま実現されるかどうかは微妙なところ。対応するにしても、入力欄の横にキャプションを付けるのではなく、JavaScriptを使ってvalueの方に「名前」「コメント」を入れておいてフォーカスが当たったら消す――というような、よくある方法に落ち着くんじゃないだろうか。
あと、もしidea:10081が難しいなら、せめてコメント入力欄のp要素にclassを振ってほしいなー……あのp要素が特徴付けされていれば「<form class="comment">に背景画像」みたいな無理をしなくて済むので。

*1:IEとFirefoxでしか確認していません。恐らく他の環境では酷いことになっていると思います。

*2:このせいで、コメントの中に空行があると潰れてしまうのだけれど……これはバグではなく仕様です。

*3:多分、CSSに詳しい人ならもっと上手く書けるはず。

*4:詳細はソースを。属性セレクタを使っているので、IEでは副作用が残っています。