The Trap of Web Design

CSS3 で完全に新しい効果はおいといて、これまでは一工夫必要だったのが楽になることってなんだろう？

いろいろ期待もあって調べてるのだけど、例えばカラム組みあたりに関して言えば、関連するプロパティは増えているけれど、現状で実装可能で、以前と比較して格段に楽になった、なんてことはない気がするんですけど。

---

だいたい、マトモに使えるならカラム組み以外にも使う箇所が多いであろう inline-block は、CSS2.1。このところやっと使えそうな感じだけど、IE 対応以外に「HTML 側の改行コードなんかの影響を受ける」という、ちょっとなんでそうなるの？という問題があって、使う場合には、HTML 側のソースをいぢくる必要がでてくることがあるのが、非常に不満。

また、意味合い的にも、 inline-block はカラム組みをするためのものって訳では無く、inline だけど、サイズを固定したい状況で使うもので、もともと block なヤツを横並びにするためのものってことでは無い、と思う。いや、思うだけで、そういった使い方をしてはいけないという話では無く、そういう意味でいえば、スタイルシートって「結果的に意図した状態になるなら、どんな指定でも良い」とも思う。でもさ−。

ブロックふたつを横並びにしてみたら、なぜか隙間があくから、ネガティブマージンで調整する、とか、いやそもそもそれはどうも HTML のほうの改行を無くしたら大丈夫らしいぞ、と無くすとか、それと同様の処理をさせるためにコメントコードを挿入するとか…こういうことで意図した状態に出来るのは良いけど、なんか、それで本当に良いのでしょうか？と思う。

それに CSS3 の multi column 関係も、どうも、いつもやってるカラム組みの代替えになる訳ではないぞ、という感じなんですが、どう思いますか？いや、確かに multi column で可能な、縦複数列にしたい場合はあるのですが、それでよくあるパターンの「左メイン、右にサイドバー」ができるかといえば…実は出来ません。（一工夫すると出来るし、現状、ブラウザが非対応のプロパティがちゃんと動けばほぼなんとかなる、筈ですが）

尚、最近になって、もしかしてコレは！と思ったのは、display: table-cell; ですね。いわゆるカラム組み構成をするのに使えます。ただし、問題は後方互換処理で、結局、display 上書き指定で、inline-block や、inline（IE 対策）、加えて float なんてーのをかますので、遠回りしちゃうだけだから使いづらいんです。ちなみにコイツも CSS3 でなくて、すでに 2.1 にあるもんなんですよね。

そんなこんなで、結局、現状では、以前と変わらず、フロートとネガティブマージンを使ったカラム組みから逃れられてません。

CSS3 については分かってない面があるので、自分がまだ知らないだけで「カラム組みはこれでチョー簡単！」なんて手法があるかもしれませんので、そうならぜひとも知りたいです。

そういうのがあったらあったでヤッタ！と思う反面、結局、今すぐ切り替えられるかというと、どうしたって互換処理を必要とするし、一度安定した手法から変更するのはそう簡単なことじゃありませんね。

P.S.

MDN の別冊だかで、スタイルシートの基本、みたいな本が、書店の雑誌コーナーに並んでたのですが、その最初のテクニックが、レイアウトするのに position を覚えよう、だったんですが、これはないでしょう、と思った。

position: absolute; てーのは、いってみれば、最終手段としてとっておくもので、それ以外の（relative な）配置処理では思うようにいかない状況や、どうしたってこれは position: absolute; が必要です、って状況があって、そういう場合に使うんであって、形的に意図した結果になるにしても、最初から position: absolute; アリキでスタイルシートコーディングをすると、とてつもなく大変なことになってしまう（と、思う）

なにが問題って、 position: absolute; で好きな場所に配置できるぞ、となれば、HTML 側の構造を完全に無視することだって可能という点だったり、制作者の環境ではそれで良いかもしれないが、実際の多くの閲覧者を無視する状況に陥りやすい（フォントサイズ可変とかの話といえば、分かりやすいでしょうか？）ということだったりするんだけど…。

ただ、考えようによっては、スタイルシートの position ってプロパティは、それこそ配置を処理するものだから、このさい全部をポジショニング使うっていうほうが、実は正しいのかもしれない、なんて考えもあるんですが…自分は通常はそうしてません。そこんとこを「どうしてさ」って聞かれても、うまい答えが見つかりませんが。

ま、とにかく、 position: absolute; の使い方を知る事自体はよいけれど、ソレでレイアウトする前に、覚えるべきことあるんじゃ、なんですか？と心配になった、という話。