2011年1月アーカイブ

IE6で、tableタグでテーブルを作成していたら、border要素が一部反映されないことがありました。IE6は本当にバグが多くて困ります。

解決方法としては、

CSSコード

table td {
   position:relative;
}

のように、borderが表示されない要素に「position:relative;」を指定すると、表示されることがあります。

新着情報やニュースリリースなどのコンテンツは、tableタグやdlタグを利用するのが、一般的です。

ただし、以下のようなレイアウトにしようとすると、tableタグやdlタグではうまく実装できません。

問題は、日付とテキストに同一のアンカーをつけなければならないということです。

tableタグのtd要素やdlタグのdd要素はブロック要素であり、アンカーはインライン要素です。インライン要素であるアンカーの中に、ブロック要素であるtd要素やdd要素を入れることはできません。

そのため、文字の部分のみにアンカーをつけようとすると、tableタグやdlタグを使用するのはふさわしくないということになります。

もうひとつの問題は、テキスト部分が長くなったら、日付の下にテキストが回りこまずに、テキスト部分の頭をそろえないといけないということです。

ひとつの例ですが、以下のような方法があります。

(X)HTMLコード

<div id="information">
   <h2>新着情報</h2>
   <ul">
      <li><a href="index.html"><span>2011/01/20</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/10</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/03</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/01</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
   </ul>
</div>

CSSコード

#information h2 {
   padding:3px;
   background:#ddd;
}

#information ul {
   margin:0;
   padding:0;
   list-style:none;
}

#information li {
   padding:15px 0 15px 7em;
   text-indent: -7em;
   border-bottom:1px solid #ddd;
}

#information li span {
   display:inline-block;
   width:7em;
   text-indent:0;
}

#information li a {
   text-decoration:none;
   color:#000;
}

#information li a:hover {
   text-decoration:underline;
   color:#AB0404;

}

ポイントとしては、text-indentを駆使することと、spanにwidthを適用するためにdisplayをinline-blockにすることです。

spanは、インライン要素なのですが、インライン要素はwidthやpadding、marginといったものを指定しても有効になりません。そこで、CSSにてdisplayプロパティの値を、文法的にはインラインでありながらも、ブロック要素的な振る舞いもできるinline-blockに変更します。

以前のコラムで、リスト(liタグ)で作ったメニューを横並びにする方法を紹介したのですが、inline要素を使用すると、謎の余白(隙間)が空いてしまうということでした。

これは、ブラウザが改行を空白類文字をして認識してしまうからです。つまり、改行を半角スペースが空いているとみなしてしまいます。

とすると、この余白を消すには、半角スペース分をCSSでネガティブマージンを使用して相殺してしまえばよさそうです。

例えば、以下のようなリストを横並びにします。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSでは、半角スペース分をletter-spacingで制御します。ulのletter-spacingを0.40em分小さくしておいて、liのletter-spacingは元に戻しておきます。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
}

ただし、この方法ではOperaには効きません。

そこでさらに、ulのfont-sizeを0にして、liのfont-sizeを任意の値を指定します。ただしpx表記以外はブラウザ間で差異が出てしまうので注意です。Operaだけに有効なhackがあれば相対表示もできるのですが、無いようなので・・・。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
   font-size:0;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
   font-size:16px;
}

ちなみに、font-sizeでの指定はSafariやChromeといったWebkit系ブラウザでは有効ではないようです。このCSSはWindowsXP上のFarefox3.6.13、Opera11.00、Safari5.0.2、Chrome8.0、IE6で確認済みです。

hrタグは、デフォルトで使用するとデザイン的に味気ないですよね。画像を使用するのが一番見栄えのよいものになりますが、少しだけスタイリッシュにしたい場合などCSSを使用すると便利です。ここでは、1pxの線を引く方法を紹介します。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
   border:solid #000;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
}