Tree of Courage | WEBデザイン CGI･PHP･javascript･Flash勉強 イラスト置場

恥ずかしながら、今までCSSでpositionをあまり使ってこなかった。
というか。

意図的に出来るだけ使用を避けてきた。

なんというか position:absolute; とか使うと画面の左上からの位置になるけど、
見る人の窓のサイズによっては要素の位置が変なところにきたりするじゃないですか。

そういうのがあってイマイチ好きになれなかったんです。
単なる食わず嫌いってやつですな…
これを使わないとどーしてもレイアウト出来ないってこともなかったので…

でも今日。
どうしてもこれを使わないとスッキリしないサイトを作ることになってしまい、
ググってなんとか理解できました。

こちら　の記事を参考にさせて貰いました。

結論から言うと、便利じゃねーか！！！！（笑）

もっと早く覚えておけばよかった…
食わず嫌いよくない。

目的の親の要素にposition : relative;
目的の要素にposition :absolute;　で位置指定すれば、
親要素からの相対位置なので、理想の位置を指定しやすいし、
窓の大きさとかで位置ズレが起きたりすることもないので便利。

多分この使い方が一番ベストなんだろうね。
ただ最初はテーブルのtdにposition : relative;　入れて、
中のdivにposition :absolute;　を入れたらなんかIEでしか反映されなかったので、
親要素もきちんとdivとか使った方が良さげです。

CSSでレイアウトを組んでいると、どうしてもブラウザ毎に見え方が違ってきます。
中でもIEはバージョンごとに地味にCSSの認識の仕方が違うようで、
CSSを使ったホームページ制作に苦労することも少なくないと思います。

現在はIE7の自動更新もあったりしてIE7ユーザーが増えてきてはいますが、
それでも旧バージョンであるIE6はまだ利用者も結構多いようです。
実はわたしも自宅のはIE6だったりしますが（笑）

ただ会社にIE7環境のパソコンしかないため、IE6でレイアウトがズレたりしていないか
確認することが出来ませんでした。最近までは･･･
じゃあどうしてたかっていうと家で確認してたんですけどね。

でもそれじゃあ手間がやっぱりかかります。
人間というのは欲張りなので1台のPCで簡単に確認出来る方法を望んでしまうんですよね。
特に崩れたレイアウトの原因を探る上では、怪しい部分を修正する度に確認したいわけです。

で、調べてみたらとても便利そうなフリーソフトがあるじゃないですか･･･

Multiple_IE

上記のリンクからDL出来るMultiple_IEというソフトを使いますと、
なんとIE3～6までが利用出来るようになります！
IE3はぶっちゃけいらなそうだけど（笑）
ちなみに利用したいものだけ選択してインストールとかも出来ます。

詳しいインストールの方法はこちらの方が詳しく解説してくれています。

便利なのでWEBデザイナーの方はインストールして損はないかと思いますが、
自己責任でインストールしてくださいますようお願いします。

更新二日目でさっそくですが、自分用のメモとして。

CSSを使い始めた頃、思い通りにレイアウト出来なくて悩んだりすることも多かったのですが、
中でもIEでは問題ないのに他のブラウザで見ると
なんかとんでもないことになってるっていうのが多かった；

今はむしろIEの方がスタイルシートを正しく認識出来てなくて
たまたま理想どおりに表示されていたっていう理屈がわかるんですが、
当時はそれこそブラウザ＝IEだと思ってたのです　orz

慣れない時にCSSでfloatなんかを使ってると
次の要素が変に重なったり背景画像が途切れちゃってたりとかして、
困ったことってないですか･･･？

次の要素で解除出来ればいいですが、レイアウト的にそうもいかない時もあります。
かといって空の要素とかで誤魔化すのは嫌だしねぇ。

検索するとそれを上手いこと解決する方法があちこちに載っていました。

これはあらゆるサイトで利用出来そうですね。
floatしているものを包み込むボックスに対して「clearfix」というクラスを指定して
スタイルシートに以下のように記述すればOKです。

.clearfix:after {
  content: “.”;
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

実際多少の違いはあってもこのclearfixという技を使っているサイトは結構多いみたいです。
便利だもんねぇ。

わたしが参考にさせてもらったのはこちら。
http://blog.d-spica.com/entry/070307clearfix.html