FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  • コメント : -
  • | このエントリーを含むはてなブックマーク
  • トラックバック : -
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/58-eafbcfc8

-件のトラックバック

-件のコメント

[C84] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

ボックスモデルハックについて

ボックスモデルハックと聞いて、はっ?何それっ!と思われるかもしれませんので、簡単に(、、、というか詳しくは分かりません)説明をすると、古いバージョンのIEや他のブラウザにおいても、CSS(スタイルシート-widthとheight-)を正しく解釈させる方法とでもいうんでしょうか?

例えばですねぇ~

私のブログでは、どのように設定しているのか?記述してみますと、 div#wrapper { float : left; /* 左側に回り込む */ width : 780px; /* primary-column+secondary-columnの幅 */ } div#primary-column { float : right; /* 右側に回り込む */ width : 600px; /* 古いIE用の幅 */ padding : 0 20px; /* パディング */ voice-family : "\"}\""; /* 古いバージョンのIEが理解できない2行を入れる。 */ voice-family : inherit; /* 古いバージョンのIEが理解できない2行を入れる。 */ width : 560px; /* CSSを正しく解釈出来るブラウザ用のコンテンツ幅 */ } html>body div#primary-column { width : 560px; /* Opera用のコンテンツ幅 */ }

となっており、レイアウトが崩れてしまうのを極力避けているようになっているんですね。

ただこんなことをしなくても、少しくらいマージンとパディングがずれてもレイアウトが崩れないようにするとかすればいいだけの話なんですけどね。

実は、本家サイトでお小遣いサイトを以前作った時に最初はテーブルで一部分カスタマイズしていたんですけど、テーブルを使うとサイトが重くなってしまうのがいやだったので、スタイルシートのみでレイアウトに挑戦したときに覚えたものなんですね。

ですので、学校で習ったとかではありませんので、全てが正しい説明になっていないかもしれません。

また、ブログをカスタマイズする上で、ボックスモデルハックを使わなくてもいいようにする方法として、次のような方法もありますんで、参考にしてみてください。

■ サンプル ■

#box {
width: 100px;
border: 5px;
padding: 20px;
}


のように設定すると、通常ならば【幅150PX】のボックスができあがるハズですよね。

しか~し、IE6以前では、100PXのボックスの中で処理しようとしてしまいますので、どうするのかと言うと、

#box {
width: 150px;
}


、、、と設定した上で、

#box div {
border: 5px;
padding: 20px;
}


と設定するんですね。

つまりボックスの中にあるボックスでマージンやらパディングやらを設定するんです。

そうすることで、ボックスモデルハックを使わなくてもよくなるということなんですね。

これの欠点としては、やたらとDIV要素が多くなってしまい、検索エンジンに好かれないかもしれません。


<<< BACKさあ!ブログ(blog)をカスタマイズしよう!のTOPページへ>>>


スポンサーサイト

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/58-eafbcfc8

0件のトラックバック

1件のコメント

[C84] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。