2009年08月28日

overflowの中のposition

こんにちは、馬場です。


webページ内で、
縦に長いコンテンツがあった場合、
その部分をスクロールさせることが
あると思います。

例えば、
会員登録の利用規約や
サイドメニューの新着部分等で
使うことがあると思いますが、
スクロールさせる場合は
overflowを使うことで実現できます。


今回は
スクロール(overflow)の中で、
positionを使った際の注意点について
お話させていただきます。
(IE限定の注意点です。)




▼スクロールしない・・・(IE限定)


スクロールについては、
overflow:autoし、
heightを設定することで、
heightの値を超えた内容が
スクロールで確認できるようになります。

(widthを設定し、表示内容がその値を超えれば
横へのスクロールとなります。)


例えば、スクロールの中で、
テキストの後ろにアイコン表示をするために
positionで位置調整をしようとすると
IEでは、そのアイコンがスクロールしなくなってしまいます。

(「テキストの横に並ぶ画像の位置合わせ」についてはコチラ


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
スクロールしても、アイコンの位置が変わっていません。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper01">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper01 {

overflow:auto;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper01 img {

position:relative;
top:2px;

}


position:relative
(通常の位置を基準とした相対的な配置)
なので、
スクロールしないのが正しいと
思えなくもないですが、
どうなのでしょうか?


私、個人的には
ややこしいので、
スクロールしていただきたいところです。

WindowsのIE6.0と7.0で
スクロールしないことを
確認しました。
(IE8.0では解決しているようです。)



▼無事にスクロール


IEだけスクロールしないのでは、
ひどく気持ちが悪いので
いろいろと試していると
解決策が見つかりました。

overflowを設定している要素へ
positoin:relativeを設定することで
無事にスクロールしていきました。


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
アイコンの位置が変わっているのが確認できます。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper02">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper02 {

overflow:auto;
position:relative;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper02 img {

position:relative;
top:2px;

}


「なんだか、できそうな感じがする」
と思い、設定してみたのですが、
本当にできてしまいました。

IEの気持ちが少しわかった気がします。。。


posted by baba at 20:19 | Comment(0) | TrackBack(0) | 情報

2009年08月21日

『table-layout』を使おう! その3

こんにちは。
溝上です。

『table-layout』を使おう! その3』をお送りします。
3回続いたtable-layoutの紹介も今回で最終回となります。
それでは今まで同様にtable-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼ページの表示速度がUPする


前回前々回とtable-layoutを調べ始めたとき、もっとも驚いた効果が
ページの表示速度がUPするです。
前回でも説明しましたが、table-layoutがfixedの場合
1行目が読み込まれた時点でth,tdの幅を決定しているようです。
その為、表示に関する処理が省かれ、ページの表示速度がUPする・・・らしいです。
これはもう実際にサンプルを作って計測してみるしかない!
というわけでどうぞ。

(cssサンプル)
body {
  padding:15px;
}
.section {
  width:100%;
  padding-bottom:30px;
}
table {
  table-layout:fixed;
  width:100%;
}
table th,
table td {
  border:1px solid #000000;
}
htmlコーディング例
<div class="section">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>



autoの場合
fixedの場合
※とても巨大なtableのサンプルを使用しています。注意!

上記のサンプルを私の環境でキャッシュを消しながら10回ずつ表示させ、
Firefoxのアドオン『YSlow』を使って表示速度を計ってみました。
(私のやった結果なのであくまで参考程度にどうぞ)

(※単位:秒) auto fixed  
1回目 0.409 0.395  
2回目 0.402 0.403  
3回目 0.4 0.392  
4回目 0.411 0.392  
5回目 0.431 0.398  
6回目 0.4 0.391  
7回目 0.415 0.399  
8回目 0.417 0.403  
9回目 0.4 0.402  
10回目 0.415 0.401
平均 0.41 0.3976 0.0124

おお、早くなってる。
fixedを指定した場合、autoと比べ確実にちょっとだけ早くなっています。
・・・本当にちょっとですね。
もっと劇的に効果がわかるようなソースが見つけられれば良かったのですが・・・

でもCSSのプロパティを1行追加して表示速度がUPする、
というのはとても魅力的だと思います。
使える場面ではどんどん指定していくと素敵ですね。
posted by baba at 19:23 | Comment(0) | TrackBack(0) | 情報

2009年08月10日

marginとpadding その2

こんにちは。島津です。

前回『margin』『padding』プロパティの基本をご紹介しました。
本日は『margin』プロパティについて、もう少し詳しいお話をします。

とりあえず今回は、押さえておいた方がいいものとして
この2つについてご説明します。
 

floatと同じ方向にmarginを設定するときの注意

IE6の有名なバグで、float使用時に同じ方向にmarginを指定すると
marginの幅が指定値の倍になってしまいます。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:150px;
background-color:#BCD8DA;

}
.inner {

float:left;
width:50px;
margin:5px 0 5px 50px;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
かと言って、IE6のために倍になるのを見越して半分の値を指定すると
他のブラウザで見たときに余白が狭くなってしまいますね。
これを回避したい場合、例えば以下のような方法があります。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:100px;
padding-left:50px;
background-color:#BCD8DA;

}
p {

float:left;
width:50px;
margin:5px 0;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
内側の要素の左marginで空けていた余白を、外側の要素の左paddingに変更しました。
これならIE6でも他のブラウザでも、同じ表示結果になります。
 

要素のmargin同士がぶつかるとどうなるか

上側の要素に下マージン10px、下側の要素に上マージン10pxが
設定されていた場合、2つの要素の間隔は何pxになるでしょうか?

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0 0 10px 0;
padding:0;

}
Pタグの下マージン10px + DIVタグの上マージン10px = 20px
…とはなりません。

marginはあくまで他の要素本体に対する距離を指定するもので、
他の要素のmargin領域に対しては効きません。
ですので、margin同士がぶつかった場合、結果的には小さい方が無視され
数値の大きい方が優先されます。

※FireFox2.0、FireFox3.0、Windows Safari3で確認済。
※ただし、IEでは例外的に、margin同士が重ならず加算した値分だけ
 余白が空くようです。(キャプチャ参照)

両方の要素の余白を合算させたいなら、例えば以下のような方法があります。
▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0;
padding:0 0 10px 0;

}
この例では、上側の要素の下余白にmarginではなくpaddingを使っています。
paddingは内側の余白なので要素本体の一部ということになり、
Pタグの下余白を活かしながらもブロック間にまとまった余白が出来ました。

こんなふうに、marginだけでどうもうまくいかなくなったときは
paddingも併用してみるとうまくいくことがあります。
いろいろ試してみましょう。


次回はもう片方の『padding』プロパティについて、
もう少し詳しくお話したいと思います。
posted by baba at 21:03 | Comment(0) | TrackBack(0) | 情報
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。