blockとtable-cellの組み合わせ

displayプロパティーの値のひとつであるtable-cellは、通常tableやinline-tableと組み合わせて使う。リストに使うと空白を作らずに各項目を並べられ、かつfloatプロパティーを使うより色々面倒くさくない。その場合にtableやinline-tableではなくblockと組み合わせると、table-cellの幅の自動調整が行われなかったり、他にもマークアップ上での制約や組み合わせ必須なプロパティーなどがないという特徴があり、スタイリングの自由度が上がる。

ul {
  margin: 0 auto;
  padding: 0;
  display: table;
  width: 80%;
}

li {
  display: table-cell;
}

tableと組み合わせる場合、幅の自動調整によりリスト項目の内容により幅がまちまちになってしまうので、widthプロパティーを使うのが難しくなる。キレイに等分させるというのなら別に問題はないのだけど、リスト項目の幅は必要最小限で左(または右、中央でも)に詰めたいなどというナビゲーションでよくあるケースに対応できない。

nav {
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  display: inline-table;
}

li {
  display: table-cell;
}

inline-tableでは、センタリングするにはその親でtext-align: centerなどとすることになる。リストへのスタイルだけで完結しないので、マークアップに依存してしまうことになる。スタイリングの自由度自体は高く、ナビゲーションでやりたい場合は親にnav要素等があるので、大体はこれで良かったりもする。

ul {
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 80%;
}

li {
  display: inline;
}

古くから使われているinlineを使うものは、空白ができてしまう有名なアレを解消するのが面倒くさい。改行か項目の終了タグを消したりfont-size: 0にしたり。前者ではHTMLの大幅な編集作業が必要になり、後者ではem単位が使用できなくなる上、フォント・サイズの相対指定も不可能になる。

ul {
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 80%;
}

li {
  display: table-cell;
}

table-cellだけ使うというのは、横並びリストの空白を消すという目的で多用されているため知っている人は多い。けどポイントはそこじゃなくて、table-cellを指定する以外にほとんど制約とデメリットがないという点。

多くのCSSテクニックにはデメリットが付きものだけど、そのことまで言及されることはあまりない。overflow: hiddenを使ったclearfixではbox-shadowプロパティーによる影がカットされる可能性があるとかそういうの。デメリットを調査・理解して使う必要があるということなんだけど、それと同時にアンテナを伸ばして様々なテクニックを知り、デメリットのない(より少ない)テクニックを選択するということが重要。