2008-02-28

CSSでブロックレベル要素とインラインレベル要素の変更

こんなCSSを書くと、

a { display : block ; }

大抵のブラウザでは、a要素のcontentの上にマウスカーソルを当てると、マウスポインタや文字の色を変えたりして、リンクであることを知らせるが、それが水平方向にどこまでも伸びてしまう。

そのほかにも、p要素をインラインレベル要素にしたりできる。このインラインレベル要素かブロックレベル要素かを、変更できる機能を使えば、非常に面白いことができる。
たとえば、code要素は、コードを記述するためにある、意味的な要素だ。そこで、このブログでソースコードを記述する際には、この要素を使いたい。また、コードは普通、いくつもの改行がある。そこで、CSS2.1を使い、white-spaceプロパティに、pre-wrapを指定したい。ところがこれが、問題だ。code要素は、インラインレベル要素なので、そのまま指定したのでは、問題がある。そこで、code要素をブロックレベル要素に変えてやればよい。しかし、なぜこんなことをしなければならないのだろう。

No comments:

Post a Comment

You can use some HTML elements, such as <b>, <i>, <a>, also, some characters need to be entity referenced such as <, > and & Your comment may need to be confirmed by blog author. Your comment will be published under GFDL 1.3 or later license with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.