昨日、CSS Holic 第3回勉強会に参加してきました。

サンプルのデザインをもとに、5名くらいでサイト構成やページのマークアップ方法などをグループディスカッションをしながら検討し、最後に発表という内容でした。自分では当たり前だと思っていたことが実はマイノリティだったことを知ったりしてともて有意義な時間を過ごせました。皆さん、お疲れさまでした。

さて、グループディスカッション終了後に、参加者の方からこんなことしたいんだけどどうするよ？と質問にあがった内容が、なかなか面白かったです。

質問内容

上図が質問にあがった内容のスクリーンショットです。ポイントは以下の2つですね。

• 右下に表示されている矢印は、マウスオーバー時に右下にずれるような感じ
• テキストの左側にある枠線ですが、テキストが複数行になった時でも1行目分の高さである

右下の矢印

サンプルを見る限り、枠線や矢印部分も含め、このエリア全体がクリッカブルなリンクとなるような感じですね。というわけで、この矢印はa要素なり、要素が足りないようであればa要素の中にさらにspan要素を入れ込むなどして、そいつにdisplay: block;を指定してやったあとに背景画像として表示してあげればOKでしょう。

左上を基点にして背景の位置を考えてしいますと、テキスト量によって高さが変化する部分ですので、矢印の位置が一定になりません。背景画像は要素の右下に表示し、マウスオーバー時の右下にずれるような感じは、余白までを含めて画像を切り出してしまうことで解決可能です。

テキストの左側にある枠線

次に、テキストの左側にある枠線です。枠線ということでCSSのborderプロパティが考えられますが、テキストが複数業になった場合にも1行目分の高さが保たれるというのが曲者ですね。inline要素のborderとした場合にも、テキストの左側を縦あわせしないとですので、なかなか難しいことになります（できるかどうか試してません）。

画像を埋め込んで解決しました

というわけでどうしたものかと悩んだのですが、img要素で画像を埋め込んでしまえばすんなり行きました。文字サイズが拡大された時に、画像の大きさもそれに追随してくれるように、画像の高さをCSSでem指定します。指定する値はテキストのline-height分の高さを指定してあげればOKでしょう。

その他、floatの指定などを細かく行いましたが、実際に指定を行ってみたサンプルを用意しましたので、ご興味がありましたらご確認ください。

僕以外の回答例

@debiruさんの回答：CSS Holic / sample1_rev2

address要素について

また、当日はaddress要素に関しましても若干議論がありました。改めてHTML4.01の邦訳を参照してみますと、以下のようにあります。

ADDRESS要素は、文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示すのに用いられる。 たいてい、文書の冒頭か末尾に現れる。

こちらを読む限り、たいていの場合はサイト所有者の連絡先をマークアップするのに用いられるのがaddress要素ということになりますね。例外としましては、サイト所有者と違う組織・団体の方などの文書がサイト内にある場合などでしょう。そういった場合にはその違う組織・団体の方などの連絡先をaddress要素でマークアップすることになるということですね。

「ユーザーがその連絡先にサイトのミスを指摘すると編集を迅速に行えるのかどうか？」などが出ましたが、仕様にないことを考えだすとキリがなくなって来てしまいますので、仕様として決まっていることをそのままに受け止め、その情報が「文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先」なのかどうか？だけを判断すればそれほど難しいことはないのではないでしょうか。

仕様書回りのことに関しましては、同日に開催された『日本ウェブ協会アカデミックプログラム Vol.7「HTML仕様書を読む」』の動画が公開されています。太田さんの話術だけでも結構おもしろいですので、一度ご覧になってみると良いと思います。