CSSデザインノートでタグ「display」が付けられているもの

以前のコラムで、リスト(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で確認済みです。

「IE6以前のブラウザにおいて、floatしたブロック要素にマージン(margin)を指定すると値が2倍になってしまう」というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。

(X)HTMLコード

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSコード

li {
   display:inline;
   float:left;
}

display:inline;にすると、他のブラウザで不都合は起こらないのか?という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、「floatを指定した要素にdisplayプロパティは無視される」と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、('clear'プロパティの指定に従いつつ)そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン(ネガティブマージン)を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}
これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

例えばニュースリリースなどには、定義リスト(dl要素)がよく使われます。その際、日付と記事が横並びになったものもよく見受けられます。

定義リストを横並びにするには、「float:left;」を利用して回り込みをさせます。また、汎用性の高い横並び定義リストを作成するために、spanタグやdivタグを併用します。

基本となる(X)HTMLコード、CSSコードは以下のとおりです。

尚、「* html」ハックを使用しているのは、hasLayoutをtrueにして「-3pxずれてしまう」というIE6のバグを回避するためです。

(X)HTMLコード

<dl class="list">
   <dt><span>2008-05-14</span></dt>
   <dd>
      <div>
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
      </div>
   </dd>
   <dt><span>2008-05-14</span></dt>
   <dd>
      <div>
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
      </div>
   </dd>
</dl>

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list dt {
   float:left;
   width:10em;
}

dl.list dd {
   margin-left:0;
   padding-left:10em;
}

折角ですので、デザインもいくつか紹介します。

テーブルの枠組みタイプ

それぞれの要素を線で囲んでテーブルみたいに見せてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border:1px solid #999;
   border-top:0;
   background:#f1f1f1;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-left:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding:10px;
   border-top:1px solid #999;
   border-left:1px solid #999;
   background:#ffefff;
}

横線タイプ

dt部分(左側)とdd部分(右側)が横線でつながったように見せてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border-bottom:1px solid #999;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
   border-top:1px solid #999;
}

日付にワンポイントタイプ(1)

dt部分(左側)の日付にアクセントを加えてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border-bottom:1px solid #999;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
   border-top:1px solid #999;
}

日付にワンポイントタイプ(2)

dt部分(左側)の日付にアクセントを加えてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list dt {
   float:left;
   width:10em;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dt span{
   position:relative;
   border-bottom:3px double #bf0f0b;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
}

IE6において、高さが指定された要素内にあるインライン要素にpaddingやborderが指定されているとき親要素をはみ出している部分が消えてしまう、という現象が起きるので「position:relative;」を指定してバグを回避します。

参考URL

この記事は以下のコラムを要約しました。

ヘッダーメニューなどによく活用するテクニックですが、本来インラインのリンクをブロック構造にすることで、リンクのテキスト部分だけでなく周りまでリンクの領域が広がるので、様々なレイアウトをすることが可能になります。

例えば、メニュー部分のリンクをブロック構造にすると、メニューバーを画像なしに作成できます。

その際、ブロック要素にするa要素に「display:block;」とともに、幅を指定しておくことが必要です。

(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コード

li.menu a{
   display:block;
   width:200px;
}

最近のブログ記事