スタイルシート inline-block メモ


ブログ等、htmlを出力するインターネット上のコンテンツは、cssという拡張子のファイルによって、レイアウトが指定されています。


ブラウザごとに、指定できるプロパティや値が対応していなかったり(ここのところは、この色にしろとかいう指定)しますが、だんだんよくなってきています。


ページ内のそれぞれのグループの指定を、divという要素で行うことが多いのですが、既定では、ブロックは、上から下に分けられます。


スタイルシートのない時には、htmlは上から下に呼んでいくことが殆どでしたが、横方向にもレイアウトしたいという欲求がずっとあって、そのようなレイアウトを最初に可能にしたのがtableという表を作成するためのエレメントを使うことでした。


このやり方は、htmlのソースをとても複雑にして、悪影響だとされるようになりました。


それ以来、htmlで、四角いブロックを横に並べるというテクニックは、常に、何らかの課題を負いながら、経過してきました。


例えば、

  • それは、横に何個か並べたdiv要素の高さを自動的に揃えるのが、大変
  • ブロックを横に並べると親ブロックを突き破ったようになってしまう。

などといった問題でした。


そのような中で、現役のすべてのブラウザじゃ使えないけれど、最新のものなら使えるinline-blockという値を試してみたので、公開します。