【CSS講座⑤】 CSSでレイアウトする

CSS(スタイルシート)を使ってレイアウトする方法はいくつかありますが、ここでは代表的な、「float」を使った段組みレイアウトをご紹介します。

下図の様なレイアウトをする場合を考えてみます。多くのブログやウェブページは基本的にはこのようなレイアウトで構成されています。

 

ブロック要素を作る

まずは各エリアを構成するブロック要素を作成していきます。
htmlのbody内は以下の様になります。

<div id=”whole”> <!– 全体を包括するブロック –>
 
  <div id=”header”> <!– HEADER部分を構成するブロック –>
      HEADERの内容
  </div>
 
  <div id=”contents”> <!– CONTENTS部分を構成するブロック –>
      CONTENTSの内容
  </div>
 
  <div id=”menu”> <!– MENU部分を構成するブロック –>
      MENUの内容
  </div>
 
  <div id=”footer”> <!– FOOTER部分を構成するブロック –>
      FOOTERの内容
  </div>
 
</div> <!– whole End –>

 

レイアウトする

上記で作成した各ブロックをCSS(スタイルシート)によって制御し、レイアウトしていきます。

/* まず全体のmarginとpaddingをリセットします。*/
* {
  margin: 0;
  padding: 0;
}
 
#whole {
  width: 800px; /* サイト全体の幅を指定 */
  margin: 0 auto; /* 左右のmarginにautoを指定するとセンタリングします */
}
 
#header {
  width: 100%; /* whole内で100%の幅になります */
  height: 50px; /* 高さを指定 */
}
 
#contents {
  width: 650px;
  float: right; /* CONTENTS部分を右に寄せます */
}
 
#menu {
  width: 150px; /* CONTENTS部分と合わせてwholeの幅と同じになるように */
  float: left; /* MENU部分を左に寄せます */
}
 
#footer {
  width: 100%;
  height: 50px;
  clear: both; /* floatを解除します */
}

あとは各エリアの中に更にボックスを作ったり、marginやpaddingを設定していけば、見栄えの良いページを作ることができます。

Copyright© 2018 おすすめ レンタルサーバーの選び方 All Rights Reserved.