トップページ→よくあるレイアウト崩れ
よくあるレイアウト崩れ

よくあるレイアウト崩れ

スタイルシートで段組やブログをカスタマイズする際に、1番厄介な部分の説明します。

まず初めにブラウザの違いによる表示の違いを考えなければいけません。
また、親BOXの幅に対しコンテンツ部分のBOXの幅とサイドバー部分のBOXの幅を足したものが大きくなると レイアウトが崩れる原因となります。

よくあるのが「カスタマイズしたら、サイドバーが落ちた」みたいな現象。
レイアウトを崩さない為のヒントを簡単に説明しますのでご参考までに!

〜borderの扱い〜

実はborderの太さは幅に影響を与えています。
Internet Explorer5及び5.5では関係ないのですが、最近のものは「border」にも気を使わなければなりません。 例えば、上記の指定に更に4辺とも 1px のborderを指定したとします。
幅は更に左右の1px分、合計 2px 分追加して 232px となります。


〜デフォルトスタイルをリセットしていませんか?〜

ブラウザによって表示が違う場合デフォルトのスタイルを放置しているかもしれません。
マージンやパディングはブラウザによって解釈が違うのですが、
はじめにリセットしていない場合、後から修正したらサイト全体に影響を及ぼすことになるので、修正したい箇所だけにひとまずマージンやパディングを0に、リストならリストのスタイルをnoneに設定してみるといいかもしれません。


まとめ

W3Cの定めるCSS2では width:190px; とした場合、190pxはborderやpaddingやmarginを除いた部分を意味します。
よって、レイアウトする際はborderやpaddingやmarginの幅も考慮に入れて段組、カスタマイズしましょう。

CSSレイアウトの長所・短所

実際にCSSレイアウトを行う前に、その長所・短所に関して把握しておきましょう。当然ながら万能な手法ではなく、短所と言うべき点も存在します。

サイト枠組みの作り方

スタイルシートは、より構造的にレイアウトを整える事ができ、HTMLだけでは表現しきれないレイアウトが可能になります。このページでは2カラム、3カラム構造の実例に沿ったCSSのサンプルを紹介しています。

メニュー部分の作り方

最近のホームページのメニューでよく使用される、HTMLの「li」とCSSの「a:hover」要素を利用したJavaScriptなしのロールオーバーメニューに関して調べます。HTMLとCSSだけで構成されるので、軽いロールオーバーメニューが作成できます。

[PR] ポイントでお小遣い稼ぐならi2iPoint
i2i.jpが運営する安心できるポイントポータルサイトi!
[PR] 通販でダイビング器材を買おう!
人気のダイビング器材がたくさん揃ってるショップ!
[PR] 安心のペット火葬なら水鈴舎にお任せ下さい。
水鈴舎では訪問ペット火葬を東京・横浜を中心に24時間・365日応対でペットの火葬を真心を込めてお手伝いさせて頂きます。
[PR] FX初心者必見のブログ「FX投資家・メイの逆張り相場ブログ」
専業FXトレーダー・メイのトレード日記ブログ!初心者の入門から逆張りのチャートの読み方まで解説!
[PR] いよいよ始まる電力自由化!電力の比較ならエネチョイス
エネチョイスでは電力会社150社を比較して一括見積もりすることが可能!あなたに合った電力会社を見つけよう!