2009年11月アーカイブ

例えば、画像をポラロイド風に見せたいときなど、画像にpaddingを指定しても有効にならない場合があります。

CSSコード

img {
   padding:2px;
   border:1px solid #999;
}

これは(X)HTMLファイルが互換モードになっているためです。DOCTYPE宣言で標準モードにすればpaddingが有効になります。

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。 説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

  1. marginで指定
  2. overflowで指定

以下にサンプル画像を示します。

サンプル画像

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード


<div class="column">
<img src="image.gif" alt="" />
<p>
テキストテキストテキストテキストテキスト
・・・(略)・・・
テキストテキストテキストテキストテキスト
</p>
</div>

1.marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

2.overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

「zoom:1;」はIE6でレイアウトが崩れるのを防ぐために指定します。

横並びのメニューで、左側あるいは右側にmarginで余白を空けた際、最初あるいは最後のメニュー部分だけ余白は必要ではありませんよね。classを指定しないで余白を消す方法です。

横並びのメニュー

first-childあるいはlast-childセレクタを使用すれば簡単に実現できますが、IE6など一部のブラウザでは対応していません。そこで、ネガティブマージンを使用することで、無駄にclassを指定することなく、最後の余白だけ消すことが出来ます。

(X)HTMLコード

<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div >

CSSコード

div.menu {
   width:430px;
   border: solid 1px #000;
}

div.menu ul {
   margin:0;
   padding:0;
   margin-right:-10px;
   overflow:hidden;
   list-style:none;
   zoom:1;
}

* html div.menu ul { /* for IE6 */
   margin-right:-20px;
}

div.menu ul li {
   float:left;
   width:100px;
   margin-right:10px;
   padding:10px 0;
   text-align:center;
   background:#ddd;
}

liにmargin-right:10px;を指定して右側に余白を空け、ulにmargin-right:-10px;を指定してリストの一番右側の余白を相殺します。

IE6ではfloatしたボックスのmarginの値が2倍になるバグがあるので、* htmlハックを利用してIE6用に、2倍の-20pxをulの右側の余白に指定します。このバグを回避する方法はいくつかあるのですが(例えば「display:inline;」を指定する)、今回はこのような処置を取ります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

floatを解除するのに「overflow:hidden;」を使用していますが、以下のページに書いてあるような方法でも構いません。

例えば、以下のようなデザインにしたいとき、liにborder-bottomを指定して、最後のliだけborder-bottomをなしにしなければなりません。

リスト

特定のclassを使用したくない場合、first-childあるいはlast-childセレクタを使用すると簡単に実現できるのですが、IE6ではそれらが実装されていないため使用することが出来ません。

「over-flow:hidden」とネガティブマージン「margin-bottom:-1px」、それとIE6のバグを回避するための「zoom:1」を駆使することでIE6でも無駄にclassを振らずに最後のliのborderを消すことが出来ます。

(X)HTMLコード

<div class="memo">
<h2>メモ</h2>
<ul>
<li>abcdefghijklmn</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>abcdefghijklmn</li>
</ul>
</div>

CSSコード

div.memo {
   border:1px solid #ddd;
}

div.memo h2 {
   margin:10px;
   font-size:160%;
}

div.memo ul {
   overflow:hidden;
   margin:10px 10px 0 10px;
   padding:0;
   list-style-position:inside;
   zoom:1;
}
 
div.memo ul li {
   margin:0;
   padding:10px 0;
   margin-bottom:-1px;
   border-bottom:1px solid #ddd;
}

liにborder-bottomで下線を表示し、margin-bottom:-1px;で下のマージンを1px小さくすると、borderが領域からはみ出ます。ulの領域からはみ出した部分を overflow:hidden;で見えなくしています。こうすることで、最後のliのborder-botomだけ見えなくなります。

同じような考えで、border-topにも適用できます。

IE6では原因はわからないのですが、英数字のみなどのテキストを入れると罫線がおかしくなったりするみたいです。

IE6でのリスト