フルCSSレイアウトで段組にチャレンジ！（その2）

その1では、floatプロパティを使ったフルCSSレイアウトの方法を紹介しました。今回は、positionプロパティを使った方法を紹介します。

positionプロパティは「どこでも配置モード」でも使われているCSSプロパティで、配置位置を指定するためのものです。

チャレンジする前に、「フルCSSレイアウトで段組にチャレンジ！（その1）」のチャレンジする前にの部分をよく読みましょう。

スタイルシートマネージャーで配置位置を指定する

配置位置を指定するためには、配置方法と配置位置の指定を行う必要があります。

スタイルシートマネージャーを起動し、「追加」ボタンをクリックします。指定する対象（HTMLタグ/クラス/ID）を選択して、「位置」タブを選択します。

この画面はfloatプロパティやwidthプロパティを使うときに出てきましたね。

配置方法の指定

配置方法の指定は、「属性」の「位置」で指定します。指定できる内容は以下の通りです。何も指定しなければ、「指定しない」を指定したモノとして扱われます。

指定しない: 特に配置方法を指定しません。
CSSでの指定は、 position : static;
相対的: 通常の状態で配置される位置からの相対指定で配置するようにします。
CSSでの指定は、 position : relative;
絶対的: このボックスを含むボックスの内、positionプロパティで「static」以外が指定されているボックス（ない場合はhtml要素）を基準として、そこからの距離を指定します。通常の配置方法と異なり、ほかの要素の配置には影響を与えません。
CSSでの指定は、 position : absolute;
固定: ウィンドウの表示領域を基準として、そこからの距離を指定して、配置するようにします。指定したボックスは、ウィンドウ上のその位置に固定され、スクロールをしても位置が変わらなくなります。なお、「absolute」を指定したとき同様、ほかの要素の配置には影響を与えません。
CSSでの指定は、 position : fixed;

配置位置の指定

配置位置の指定は、左、右、上、下で単位と数値を入力します。先に単位を指定して、数値を入力します。

CSSでの指定は、以下の通りです。

左: left : 指定した数値と単位;
右: right : 指定した数値と単位;
上: top : 指定した数値と単位;
下: bottom : 指定した数値と単位;

2段組のレイアウト

左メニュー

右メニュー

HTMLの構造（body要素内）

<body>
  <div class="header">
    ヘッダ部分です
  </div>
  <div class="main">
    <div class="contents"> 
      コンテンツ部分です。
    </div>
    <div class="sidemenu">
      メニュー部分です。
    </div>
  </div>
  <div class="footer">
    フッタ部分です。
  </div>
</body>

な感じでマークアップしましょう。各部分の内容はそれぞれ適切なマークアップを施してください。

左メニューのみ幅固定の場合のCSS

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%;
}
.header{
width : 100%;
height : 50px;
}
.main{
width : 100%;
}
.contents{
margin-left : 150px;
}
.sidemenu{
position : absolute;
left : 0px;
top : 50px;
width : 150px;
}
.footer{
width : 100%;
}
.sidemenu ul{
list-style-type : none;

サンプルページを見る

右メニューのみ幅固定の場合のCSS

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}
body{
  width : 100%;
}
.header{
  width : 100%;
  height : 50px;
}
.main{
  width : 100%;
}
.sidemenu{
  width : 150px;
  position : absolute;
  top : 50px;
  right : 0px;
}
.contents{
  margin-right : 150px;
}
.footer{
  width : 100%;
}
.sidemenu ul{
  list-style-type : none;
}

サンプルページを見る

3段組のレイアウト

HTMLソース

<body>
  <div class="header">
    ヘッダ部分です
  </div>
  <div class="main">
    <div class="contents"> 
      コンテンツ部分です。
    </div>
    <div class="sidemenu">
      メニュー部分です。
    </div>
    <div class="affiriate">
      広告用スペースです。</div>
    </div>
  </div>
  <div class="footer">
    フッタ部分です。
  </div>
</body>

左右のメニュー幅固定、コンテンツ部分幅可変のCSS

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}
body{
  width : 100%;
  color : #333333;
}
.header{
  width : 100%;
  height : 50px;
}
.main{
  width : 100%;
}
.sidemenu{
  width : 150px;
  position : absolute;
  top : 50px;
  left : 0px;
}
.contents{
  margin-left : 150px;
  margin-right : 150px;
}
.affiriate{
  width : 150px;
  position : absolute;
  top : 50px;
  right : 0px;
}
.footer{
  width : 100%;
}
.sidemenu ul{
  list-style-type : none;
}

サンプルページを見る

positionプロパティのメリットとデメリット

メリット

メニュー部分をHTMLの後ろに記述したときのデザインのバリエーションが増えます。アクセシビリティに配慮しながら幅可変のページが作りやすいです。本文を先に記述することで、必要な情報にアクセスしやすいメリットがあります。

パソコンで閲覧するときには気にならないメニュー部分ですが、携帯フルブラウザを使う場合は本文を読むのにかなり手間取ります。本文を読むために下へのスクロールがたくさん必要なページはうんざりします。（筆者はPCサイトビューアーや京ぽんといったMobile OperaでPC向けのサイトを閲覧することが結構あります）

デメリット

メニュー部分が本文より長くなる場合に表示がおかしくなります。あと、中途半端にCSS対応しているブラウザでの表示崩れが出やすくなります。最近のPC向けブラウザはいいのですが、携帯フルブラウザのNetFrontはかなりヤバイです。

レイアウトチェックをするときの注意

ページ編集画面での表示を当てにするのはできません。面倒でもブラウザを起動して確認してください。

OperaやFirefoxもインストールして確認するようにします。というより、先にこれらのブラウザでチェックをしてから、Internet Explorerで確認するようにしてください。Internet ExplorerはCSSの解釈でOperaやFirefoxに劣ります。Internet Explorerで表示させて大丈夫と思っていたら、OperaやFirefoxで崩れているというという失敗は筆者自身何度もやらかしています。

ホームへ戻る