このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則51 2カラムの可変レイアウトにはネガティブマージンを使用する

法則51 2カラムの可変レイアウトにはネガティブマージンを使用する

XHTMLソース

<div id="header">
 <p> テキスト</p>
<!-- / #header --></div>
<div id="main">
 <div id="inner">
  <p> テキスト</p>
 <!-- / #inner --></div>
<!-- / #main --></div>
<div id="sub">
 <p> テキスト</p>
<!-- / #sub --></div>
<div id="footer">
 <p> テキスト</p>
<!-- / #footer --></div>

CSSソース

#header {
     height: 80px;
}
#main {
     float: left;
     width: 100%;
}
#inner {
     margin-left: 200px;
}
#sub {
     float: left;
     width: 200px;
     margin-left: -100%;
}
#footer {
     clear: both;
     width: 100%;
}

第3章 用途と目的に合わせたレイアウトの法則 一覧

  1. 法則46 マルチカラムレイアウトはfloatプロパティで実現する
  2. 法則47 マルチカラムレイアウトではclearプロパティの使い方に注意する
  3. 法則48 positionプロパティで自由度の高いレイアウトを実現する
  4. 法則49 floatプロパティによる2カラムレイアウトの基本を理解する
  5. 法則50 サイト全体の文書構造を整理してからCSSを記述する
  6. 法則51 2カラムの可変レイアウトにはネガティブマージンを使用する
  7. 法則52 固定幅の2カラムレイアウトをエラスティックレイアウトにする
  8. 法則53 floatプロパティを使用して柔軟な3カラムレイアウトを実現する
  9. 法則54 positionプロパティでより柔軟なマルチカラムレイアウトを実現する
  10. 法則55 カラム落ちの原因と対処方法を理解する
  11. 法則56 背景画像を工夫してフロートボックスの下辺を揃える
  12. 法則57 見出しの横に表示するボタンはpositionプロパティで実現する
  13. 法則58 画面中央の配置はposition/marginプロパティで実現する
  14. 法則59 エラスティックレイアウトで横幅サイズを指定して可読性を高める

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS