Firefox 3が対応したdisplayプロパティの値（2）

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

inline-blockボックスを利用した横組みメニューのレイアウト

　横組みのメニューも、floatプロパティを利用するレイアウトの1つだ。メニューは

と
• によるリスト形式で記述することが多いが、
• でマークアップした部分はblockボックスの一種であるlist-itemボックスとなる。そのため、標準では縦に並んだレイアウトになり、横に並べるためにはfloatプロパティを利用することになる。
  リスト形式でマークアップしたメニューの表示（スタイルシートの設定なし）

  
  AAAAAA
  BBBBBB
  CCCCCC
  DDDDDD
  
  

  ※ブラウザで表示を確認する

  　ここでも、段組みのときと同じように「display: inline-block」を利用することができる。

• のボックスをinline-blockボックスに変更すれば、次のようにメニューを横に並べて表示することができる。ここでは、各リンクを四角いボタンの形で表示するため、横幅や背景色なども設定している。
  メニューを横に並べて表示したもの

  ul{
  margin: 0;
  padding: 0;
  }
  
  li{
  display: inline-block;
  width: 100px;
  padding: 10px 0;
  background-color: #00ccff;
  border: solid 1px #666666;
  text-align: center;
  }
  
  a{
  color: #000000;
  text-decoration: none;
  }
  

  ※ブラウザで表示を確認する

  　なお、上のソースではリンクは文字の上でしか機能しない。でマークアップした部分はinlineボックスとなるためだ。の背景をオレンジ色で表示すると次のようになっていることがわかる。

  の背景をオレンジ色で表示したもの

  ul{
  margin: 0;
  padding: 0;
  }
  
  li{
  display: inline-block;
  width: 100px;
  padding: 10px 0;
  background-color: #00ccff;
  border: solid 1px #666666;
  text-align: center;
  }
  
  a{
  color: #000000;
  text-decoration: none;
  background-color: #ffcc00;
  }
  

  ※ブラウザで表示を確認する

  　ボタン全体でリンクを機能させるには、でマークアップした部分の横幅と高さを指定しなければならない。しかし、inlineボックスに対する横幅や高さの設定は無効となる。このような場合も、inline-blockボックスを利用することが可能だ。

  　のボックスをinline-blockボックスに変更して、ボタンの横幅と高さを指定したwidthとpaddingの設定をに適用するように変更すれば、ボタン全体でリンクを機能させることができる。

  ボタン全体をのボックスで表示したもの

  ul{
  margin: 0;
  padding: 0;
  }
  
  li{
  display: inline-block;
  background-color: #00ccff;
  border: solid 1px #666666;
  text-align: center;
  }
  
  a{
  color: #000000;
  text-decoration: none;
  background-color: #ffcc00;
  display: inline-block;
  width: 100px;
  padding: 10px 0;
  }
  

  ※ブラウザで表示を確認する

  　SafariやOpera、Internet Explorer 8（ベータ版）での表示は次のようになる。

  Safariの表示
  Operaの表示
  Internet Explorer 8の表示

  　なお、Internet Explorer 6と7は、やといったインライン要素に対する「display: inline-block」の指定にだけは対応している。そのため、上記のメニューを表示してみると、に対するinline-blockの設定だけが機能することがわかる。

  Internet Explorer 7の表示

  　次回は、Firefox 3がもうひとつ対応したdisplayプロパティの値「inline-table」を紹介する。