テキスト選択がうまくできなくなる落とし穴 | デザインってオモシロイ -MdN Design Interactive-


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




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


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

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

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


  .ue {margin-top: 30px;
margin-left: 10px;
position: absolute;
top: 100px;
width: 200px
}

.shita {margin-top: 30px;
margin-right: 10px;
margin-left: 220px;
position: absolute;
top: 100px
}
【1】外部CSSファイルソース


<div class=" ue ">上段の表示要素</div>
<div class=" shita ">下段の表示要素</div>
【2】ふたつの<DIV>タグで段組み表示をする


.ue{position: absolute; width: 80px;} 
.shita{margin-left: 90px;}
【3】正しいソース

解説:横山 剛

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




twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.14-1.20