今月のピックアップ - あなたのサイトに相互リンクシステムを! / 相互リンクのtooland

レイアウト崩れの原因について

2008-05-12 Mon

レイアウト崩れの原因解説2

SeeSaaブログカスタマイズによるレイアウト崩れの原因についてのステップ解説2です。

マージン/marginやパッディング/padding、線/borderが与える影響について




Web標準に準拠したCSSの解釈では、要素の[width]には padding / border は含みません。

つまり[width: 200px;]とした場合、パッディング/padding、線/borderを除いた部分を200pxとし、もしパッディング/padding、線/borderを指定していれば、それは200pxに加算されるという事です。

サンプルとして下記のような指定があったとします。

#container{ width: 800px; }
#left-links{ width: 200px; }
#content{ width: 600px; }

800px = 200px + 600px

なので、レイアウトは崩れません。では、カスタマイズしようと考え下記のようにしました。

#container{ width: 800px; }
#left-links{
width: 200px;
margin-right: 10px;
}
#content{ width: 600px; }

これは簡単ですね。余白の10px分が問題となります。

810px = 200px + 10px + 600px

なので、全体の幅800px内に収まりきらないので、レイアウトが崩れます。(この場合は#contentがサイドバーの下に落ちてしまいます。)

この場合の解決策は

  1. 全体を810pxにする。
  2. #left-linksを190pxにする。
  3. #contentを590pxにする。

では、下記のようにしました。

#container{ width: 800px; }
#left-links{
width: 200px;
padding: 10px;
}
#content{ width: 600px; }

ここは重要です!

上記で、Web標準に準拠したCSSの解釈では、要素の[width]には padding は含まないと書きました。この時考えなければいけない事は、貴方が

  • #left-links全体を200pxにしたいのか
  • #left-linksのデータ領域を200pxにするのか

という点です。今、上記の指定では#left-linksの幅は220pxで解釈されます。

この場合の解決策は

#left-links全体を200pxにする場合

#container{ width: 800px; }
#left-links{
width: 180px;
padding: 10px;
}
#content{ width: 600px; }

800px = 180px + 20px + 600px

#left-linksのデータ領域を200pxにする場合

#container{ width: 800px; }
#left-links{
width: 200px;
padding: 10px;
}
#content{ width: 580px; }

800px = 200px + 20px + 580px

#left-linksのデータ領域を200pxにする場合:その2

#container{ width: 820px; }
#left-links{
width: 200px;
padding: 10px;
}
#content{ width: 600px; }

820px = 200px + 20px + 600px

このように線/borderについても同じ考え方となります。



タグ-[ レイアウト崩れ ]

[ 人気ブログランキングへ ] [ レイアウト崩れの原因について ] [ Comment(0) / TrackBack(0) ] [ ▲Top ]

データベースを用いた一覧表示サイトをまるごと簡単に作れる!

儲かりすぎ注意!アフィリエイトで儲かっている方は絶対にクリックしないで下さい!

ラブコスメティック

セクシャルヘルスケア商品の詳細・購入はこちら

シックス・アパート

企業サイトもPingoo!でアクセスUP

ブログ記事を投稿するだけで原稿料を貰える

わずか10秒程度でホームページの問題点が丸裸に!UNFINISHED無料ホームページ診断

▲Page Top

この記事へのコメント

コメント

お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

▲Page Top

最近の記事

簡単にリンク集が作成できる便利ツール (04/05)

その他のリンク (08/29)

SEO見直し完了 (06/03)

SEO実施 (06/02)

ボックスモデルを理解する (05/31)

SeeSaaブログ用テンプレート11 (05/30)

オリジナルテンプレート10の訂正 (05/29)

SeesaaSEO的<h1>そのA (05/28)

SeesaaSEO的<h1>その@ (05/28)

SeeSaaブログ用テンプレート10 (05/28)

最近のコメント
最近のトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。