[stylesheet] www.fujirockfestival.com/artist/のスタイルシートについて

質問

こんにちわ。
スタイルシートについてお聞きしたいことがありますので、カテゴリはHTMLではありますが、質問させていただきます。

表現の方法が難しく、標題がこのようになってしまいましたが、
http://www.fujirockfestival.com/artist/

において、アーティストのリンクがありますが、フォーカスできる範囲が非常に大きくマージンが取られているようなリンクになっています。
ソースを拝見すると、スタイルシートで指定しているらしいというところまではわかったのですが、具体的にどのようなスタイルシートで指定しているのでしょうか。

アクセシビリティといいますか、とても操作的に印象がよく、ぜひ活用したいと思っています。

皆様のお知恵を拝借できませんでしょうか。

回答No.2

steel_gray · ベストアンサー

該当箇所だけ抜き出すと
#artist .section dd a {
display: block;
padding: 7px 0;
height: 1;
}
この部分でしょうか。
要は、アンカー(<a ～>)に display:block を指定する事で、
フォーカスの範囲をテキスト部分からブロックに拡大しています。

お礼

ご回答ありがとうございます。
ドンピシャです。
こんなにすぐご回答いただけて感激です。
ありがとうございました。

回答No.1

preta

a { display:block; }
余白を取る、というよりも、親要素の横幅めいっぱいの領域を持たせているようです。

paddingで余白をとってもよいかと思います。
a { padding:10px; }
a { display:block; padding:10px; }

参考URL：

http://www.mozilla.gr.jp/standards/webtips0015.html

お礼

ご回答いただきありがとうございます。
なるほど。paddingでの指定ができるのですね。
参考になりました。ありがとうございます。