リンク文字列を選択するには(続き)

2007年4月28日(土) 13時12分 by level
B ?
Tags: Firefox, 機能, Tips

先日のリンク文字列を選択するにはというエントリの続きです。コメントでも指摘がありましたが、

リンクの文字の上または下からドラッグして選択してますねぇ
すごい微妙な操作だけど。

の真相を調べてみました。以下そのためのサンプルです。

リンク文字列を選択するには - えむもじら
リンク文字列を選択するには - えむもじら

ソースは以下のとおり。

<div style="border:1px solid; padding:0px; background: #CCC;
 line-height:2em">
<span style="background: #FFF;"><a ...>...</a></span><br />
<span style="background: #FFF;"><a ...>...</a></span>
</div>

背景が白くなっている部分が span 要素で、その上下の灰色部分が line-height による行間部分です。この行間部分からドラッグを開始して左右に動かすとリンクにマウスオーバーすることなくリンク文字列の選択ができました。これは Firefox、Opera、IE7 共通の動作です。

一方、div によるボックスに padding:10px を指定したのが下の例です。

リンク文字列を選択するには - えむもじら
リンク文字列を選択するには - えむもじら

padding 領域からドラッグを開始したときの動作は、Opera は無反応、Firefox は padding-top 領域の場合は選択可能、IE7 は上下とも選択可能という面白い結果でした結果でした。(ちなみに Opera では padding 領域からドラッグを開始して、行間領域にずらすと選択が可能になります。Firefox はだめ。)

さらに試しに、ボックスの外からドラッグしてみると、Firefox と IE7 ではボックスの上部からドラッグしても選択ができました。下側からはだめです。うーむ、奥が深い。

さらにさらに、以下のようにリンクの範囲を少し変えてみると、Firefox では上で述べた技がリンク文字列に対しては一切使えなくなりました。もう訳がわかりません。

リンク文字列を選択するには - えむもじら
リンク文字列を選択するには - えむもじら

結論: 通常、padding 領域や行間領域の範囲は明確にはわからないのですが、リンク領域にオーバーしないぎりぎりの部分でドラッグすれば選択できる場合があるということは覚えておいて損はしないかもしれません。

追記: Trunk で試したところ、全部 OK でした。つまり、ボックスの数ピクセル上から数ピクセル下まで、リンク文字列にかからない範囲であればリンク文字列の選択が可能です。ただし、ボックスの外側の有効範囲が Firefox 2 に比べて少し狭くなっています。

コメント (4)

1 4/28 15:28 通りすがり
(c1) [2007/04/28 15:28:26] by 通りすがり

Firefox1.5ですけど、下からなら最後の例でも選択できますね。
Firefox2やtrunkは知りませんけど

2 4/28 21:57 無明
(c2) [2007/04/28 21:57:52] by 無明

 へぇボタンの代りに「おぉ!!」ボタンを連打ですよ??

3 4/29 02:36 通りすがり
(c3) [2007/04/29 02:36:37] by 通りすがり

ごめんなさい。記事の内容を良く見ずに、短絡的に書き込んでしまいました。
(c1)は、忘れて下さい。

4 10/11 11:39 通りすがり2
(c4) [2009/10/11 11:39:50] by 通りすがり2

誰でもやっていると思いますが、
リンクの「リ」の字の
やや左側からドラッグを始めて、
一旦、えもじむらの「ら」の字の
やや右側までオーバーするように
ドラッグしてから選択したい文字の
箇所まで戻るのが普通ではないでしょうか。

トラックバック

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. 閾値以下のデータしかありません。