8件中 6-8件目     [ 1 2 ]

labelタグは、inputタグと文字や画像の関連付けをして、その文字や画像をクリックしてもinputタグをクリックしたのと同じように動作させるものだが、この動作はブラウザによって違いが出ることがある。 そこでlabelタグの動作を統一する方法を考えてみる。


Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。

ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。

このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。

ドラッグによる選択をキャンセルするサンプル


IE6では、selectタグはWindowsのコントロールを使用して表示されている。 そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。 特に困るのがz-indexで、JavaScriptでdivタグをドラッグで移動できるようにした場合、ページ内にselectタグがあると、selectタグだけがz-indexを無視して一番上に表示されてしまう。

selectタグがz-indexを無視するサンプル

Opera9、Firefox2では正しく表示される。 IE7ではz-indexの扱いは正しくなっているが、borderやtext-alignは利かない。

このz-indexのバグはiframeタグを使って解決することができる。


2007/11/07 22:24:15 投稿 (2007/11/20 00:52:53 更新) http://www.programming-magic.com/20071107222415/
タグ [ CSS , HTML , Tips ]
修正:
  • 画像を追加 (2007/11/20 00:52:53)
8件中 6-8件目     [ 1 2 ]