The Trap of Web Design

一番簡単なカラム組みの続き。

inline-block （inline、inline-table のときも）で横並びカラム構成したら、HTML 側で改行してる箇所だとピッチリ並ばず隙間があくことの対処を JavaScript（jQuery）で。HTML 側をいぢくって、改行消すとか、コメントコードいれるとか、自分はそういうことをしたくないってことなんで、HTML 側を変更すりゃ大丈夫、って方は不要です。

jQuery(function(jQuery){
    var body = jQuery('body').html().replace(/\n/g,'');
    jQuery('body').empty().append(body);
});

---

考えては見たものの、こういうことをスクリプトでやってよいもんかどうか、微妙です。いちおう、スクリプト処理順ではじめの方にいれるもんですが、他にスクリプト処理ある場合、影響あるかもしれないなぁ。

一応、思ってたレイアウトはできたんで、いつも通り960 Grid System を参考にしつつ、カラム組みパターン構成ひな形つくっておいた。

でもやっぱり非対応ブラウザ対策、IE 用ハックなんかもいるから、ややこしいことには変わりないですな。新しい仕組み使って楽しようとしても、古い環境対処がついてまわり、ソッチはどんどん増えていく。

大枠のカラムに使う場合、記述順で最初に書いた奴をメインカラムとして、右や真ん中にすることがあります。IE 以外は 2番目に書いた奴を左に配置したい場合、フロートかませば完了なんですが、IE はそれだけで済まない。これまで同様のフロートとか、ネガティブマージン処理がいりますね。

あと IE8 は inline-block なんかはてっきりきちんと対応してるのかと思って、ie=edge にしたら、てんでボロボロ。ie=7 にして、6, 7 と同様のスクリプト処理いれたら揃った。やっぱりワケ分からん。やっぱりこの IE のモード、ナニをドウ処理してるのか、把握しとかないとなりませんな。

あと、Firefox2 用処理もいるんでしょ？あとでやってみます。

CSS3 ボタンはおまけ。（IE はでません）カドマルは今後はヤリスギに注意だなー、と思う。

ボタン関係は、box-shadow や gladiate の使い方如何で「サワリごごち」が変わる。これまで画像でやりくりしててもソコにこだわってみたりしたけど、コードで数値をチョイといぢって変化を見れるので面白くって仕方無い。