メイン領域――右カラム | CSS電光石火

• 記事領域の確保

•  

前回は左サイドバーを作成し、その大きさを決めました。
今回は記事部分に当たる領域を確保し、最も重要なfloatの使い方をお伝えします。
では早速右カラムを確保してみましょう。

•  

• 										
  (2-4-A)
  
  CSS-Side
  ：
  ：
  ：
  #left-column{
   background:#009900;
   width:210px;
  }
  #right-column{
   background:#FF9900;
  }
  
  
  html-Side
  :
  :
  :
  <div id="main">
   <div id="right-column">右カラム</div>
   <div id="left-column">
    <ul>
     <li><a href="" title="">menu01</a></li>
     <li><a href="" title="">menu02</a></li>
     <li><a href="" title="">menu03</a></li>
     <li><a href="" title="">menu04</a></li>
    </ul>
   </div>
  </div>
  :
  :
  :
  
  										
  									

•  

ひとまず、上記のように変更してください。CSS側の#right-columnに対するbackgroundプロパティは、いつものように背景色等にまぎれないよう、色付けを行うためです。
html側には「右カラム」の文章を挿入します。
なぜここに挿入するかといいますと、要素は明示的に高さを指定しない限り、内容物の大きさに合わせて高さを自動調節するからです。つまり、内容物が空の場合は一切その内容を表示しない事になります。したがって、今回は内容物をひとまず表示する意図として「右カラム」という文字列を表示してみました。
ここまでの結果をプレビューしてみましょう。

すると、上記のように、サイドバーの上へと右カラムが現れてしまいました。この時点では本文が拡大するたびにサイドバーを下へと押しやってしまい、使えません。そこで、次のコードを記入します。

•  

• 										
  (2-4-B)
  #left-column{
   background:#009900;
   width:210px;
   float:left;
  }
  #right-column{
   background:#FF9900;
   float:right;
   width:100%;
   margin-left:-210px;
  }
  										
  									

•  

上記のように変更しました。ここからの理解が大変ですから、しっかりと噛み砕きながら進んでください。
まず、サイドバー側である#left-columnにfloat:left;をかけ、左に寄せると同時に右カラムを回り込ませます。さらに#right-columnにfloat:right;をかけ、右側に寄せます。この時点でプレビューすると、#left-columnは左に、#right-columnは右に寄せられているのが確認できるはずです。しかしこの状態では記事本文を書く領域としてはあまりに可変的で使えませんので、この要素の大きさを変えなくてはなりません。そこで、#right-columnにwidth:100%;で、親要素の#mainの横幅一杯に幅を確保します。
しかし、このままでもうまくは行きません。そこで今度はmargin-leftで#right-columnから左側へと向かってマージンを相殺（ネガティブマージン）し、#left-columnをめり込ませます。
これで一応、ブログ風の領域が一通り確保できた事になります。
ただ、この概念は難しく、言葉で説明してもまず伝わらないでしょう。
したがって、以下に図解します。

ここまでで概ね完成ですが、まだ最後の仕上げが残ってます。既にブラウザでプレビューしてお気づきの方もいらっしゃると思いますが、「右カラム」と表記した文面が消えてしまっています。
これは、上記説明にある「めり込み」によって現出するもので、現在「右カラム」の文字列はレフトカラム（サイドバー）へと隠れてしまっている事になります。このまま本文に記事を書くと、ところどころが途切れた文章になりますので、どうにかしなくてはなりません。そこで、以下のような処置を施します。

•  

• 										
  (2-4-C)
  
  html-Side
  :
  :
  :
  <div id="main">
   <div id="right-column">
    <div id="right-column-padding">右カラム</div>
   </div>
   <div id="left-column">
    <ul>
     <li><a href="" title="">menu01</a></li>
     <li><a href="" title="">menu02</a></li>
     <li><a href="" title="">menu03</a></li>
     <li><a href="" title="">menu04</a></li>
    </ul>
   </div>
  </div>
  :
  :
  :
  
  
  CSS-Side
  :
  :
  :
  #right-column{
   background:#FF9900;
   float:right;
   width:100%;
   margin-left:-210px;
  }
  #right-column-padding{
   padding-left:210px;
  }
  
  										
  									

•  

まず(2-4-C)のhtml側では、新たに<div id="right-column-padding"></div>という要素を設け、そこへ「右カラム」の文字列を移動します。次にCSS側で新たに記述した#right-column-paddingへの指定を行います。そこでは左カラム（#left-column）へと向かってpadding-leftでパディングを指定して間隔を確保しており、この場合左カラムの大きさ、即ち210px分の大きさを避けて、隙間が確保されます。図解すると右図のようになります。
プレビュー後、「右カラム」と書いた文字列がちゃんと現れている事を確認してください。
その後、色々と本文に文字列を挿入して見てもいいでしょう。右カラムが本文の大きさに併せて拡大する事が確認できるはずです。