テキスト選択がうまくできなくなる落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　MovableTypeなどのBlogやXOOPSで、CSSを使ったレイアウトをする際に、上段にナビゲーション、中央に本文エリア、下段にアフィリエイトリンクの表示、などといった複数の段組みレイアウトをすることがある。この場合、ブラウザ上で1行もしくは1パラグラフ分が丸々選択されてしまい、マウスでのテキスト選択がうまくできなくなる現象が頻繁に見られる。特にBlogは、ユーザーがテキストを引用し、別サイトで紹介していくことによってコミュニケーションが拡大していくのが特徴のメディアであるだけに、テキスト選択機能は最優先事項として対応したい。

　【1】の外部CSSファイルソースの「.ue」が上段本文エリア、「.shita」が下段本文エリアを規定している。実際のHTML上では【2】のふたつの＜DIV＞タグで段組み表示をすることになる。

　【3】のソースの通り、「左側に配置する＜DIV＞を絶対位置に指定」、「そのほかの＜DIV＞にposition: absolute;を記述しない」というルールを守って位置指定をすることで問題を回避できる。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）