読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

ネガティブマージンで、固定幅のマルチカラムをレイアウトを実現する

coliss - ネガティブマージンの理解を深め、活用するテクニック集より。ネガティブマージンを使うことで、

    • 画面サイズに合わせて伸縮するカラムと、
    • 固定幅のカラム

から構成されるマルチカラムレイアウトを実現できるらしい。ということでサンプルを作って試してみました。

  • サイトの例をそのまま作ってもアレなので、3ペインにしています。
    • 「コンテンツを表示する可変長のカラム」と「サイドバー1(200px)」「サイドバー2(200px)」から構成されます。
  • CSSを指定する上でのポイントは、以下の通りです。
    • サイドバーカラムの横幅をwidthで固定、コンテンツカラムは「100%」とする。
    • 各カラムを「float:left」に設定。
    • コンテンツカラム(#main)の「margin-right」で「(固定幅にするサイドバーの width,margin,padding,border の合計値) * -1」を指定して、サイドバーをコンテンツカラムの上に重ねる。
    • コンテンツカラムの子要素(#content)でmarginを指定して、サイドバーが重なっている部分にコンテンツを表示しないように抑制する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">

      /** サイドバー */
      #sidebar1, #sidebar2 {
        width:200px;
        float:left;
        padding: 10px;
        margin-left: 10px;
      }
      #sidebar1 {border: 1px solid #dd6666;}
      #sidebar2 {border: 1px solid #66dd66;}

      /** コンテンツ部分 */
      #main {
        width:100%;
        float:left;
        /**
         * ネガティブマージンを使用してサイドバーを #main に重ねる。
         * 固定幅にするサイドバーの width,margin,padding,border の合計値を引くこと。
         */
        margin-right:-464px;
      }
      #content {
        border: 1px solid #6666dd;
        padding: 10px;

        /**
         * サイドバーが重なっている部分にコンテンツを表示しないように
         * marginを指定して押さえる。
         */
        margin-right:464px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
      </div>
    </div>
    <div id="sidebar1">サイドバー</div>
    <div id="sidebar2">サイドバー2</div>
  </body>
</html>

表示イメージはこちら。


なお、↑ではサイドバーを右に表示していますが、左にしたい場合は、

  • 全てのカラムを「float:right」にし、
  • コンテンツカラムとその子要素の「margin-right」を「margin-left」に修正

すればOKです。