position:absoluteの危険性。

個人的には、float等でまかなえ切れない複雑なレイアウトの場合に、
レイヤー感覚で良く使います。

top:10px; left:10px;とかで、思い通りの位置に配置出来ちゃうので、
場合によっては結構便利なんですが、
配置するものの内容に「テキスト」がある場合は、要注意です。
というより、使わない方が良いです。

■HTML
<div id="wrap">
  <p id="absTx01">絶対配置テキスト01絶対配置テキスト01絶対配置テキスト01絶対配置テキスト01</p>
  <p id="absTx02">絶対配置テキスト02絶対配置テキスト02絶対配置テキスト02絶対配置テキスト02</p>
</div>
<p id="followTx">続きのテキスト続きのテキスト続きのテキスト続きのテキスト続きのテキスト続きのテキスト続きのテキスト</p>

■CSS
div#wrap{
  margin:0;
  padding:0;
  width:500px;
  height:80px;
  position:relative;
  background:#f4f4f4;
}
p#absTx01{
  margin:0;	
  padding:0;
  width:200px;
  position:absolute;
  top:10px;
  left:280px;
  background:#ffeeee;
}
p#absTx02{
  margin:0;
  padding:0;
  width:200px;
  position:absolute;
  top:10px;
  left:10px;
  background:#ffeeee;
}
p#followTx{
  margin:0;
  padding:0;
}

上記のサンプルはこちら

パッと見、特に問題はなさそうに見えますが、
テキストを拡大してみれば、一目瞭然。

これではもう、テキストサイズを変更出来たとしても、
アクセシビリティ以前の問題ですね。
表示崩れと言っても、過言ではないと思います。

下に続くテキストが無い場合等、一定の条件であれば問題ありませんが、
使用する際には、それなりに注意が必要です。

ただ、Windows Internet Explorer 7で、
現状のOperaにも実装されている「ズーム機能(※)」がつくようなので、
将来的には問題なく使える日が、来るかも知れませんね。

※ズーム機能
テキストのみを拡大するのではなく、ページ全体を拡大してくれる機能。
Windowsに搭載されている「拡大鏡」みたいな機能。

Add Bookmark

Post Comment

TrackBack URL

http://blog.trustworks.biz/cgi-bin/mt-tb.cgi/20

2010/01

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Studying

  • RSS2.0
  • Skype