@blog.justoneplanet.info

日々勉強

CSSで2カラムレイアウトを実現しよう

■前置き

  • 横2列(2カラム)レイアウトをしたいと考えている方対象
  • テーブルレイアウトからCSSに移行してる方など対象
  • HTMLを書いた事があればまぁ大丈夫かな

■見本

※あくまでも見本なので記載のソースとは異なります。

ヘッダー
サイドバー
コンテンツ
フッター

■HTMLソース(上記レイアウトをスタイル属性で:非推奨

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: right; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

もしくは

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: left; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

なんで非推奨なのかというとスタイルシートとは文章とデザインを分ける目的で作られたのに上記だとHTML内にある。しかもタグの中に書いてあって見にくい。スタイルシートを使うメリットが少ない。

■HTMLソース(ヘッド内へ記述タイプ)

headタグ内に以下の記述をする。

<style type="text/css">
#wrapper {
width: 400px;
}
#header {
background-color: orange;
}
#menubar {
float: left;
width: 100px;
background-color: red;
}
#content {
float: right;
width: 300px;
background-color:blue;
}
#footer {
clear: both;
background-color: orange;
}
</style>

bodyタグ内に以下の記述をする。

<div id="wrapper">
<div id="header">ヘッダー部分</div>
<div id="menubar">サイドバー</div>
<div id="content">コンテンツ部分</div>
<div id="footer">フッター部分</div>
</div>

まぁ、書き方は色いろあると思うけど。

■解説

  • コンテンツの量(分量)に応じて縦の長さは変化します
  • 最終的には<link rel=”stylesheet” type=”text/css” href=”” media=”” />や@importなどを使って外部のCSSファイルを読み込むようにしましょう。(上記、headタグ内のCSSは属性よりも編集しやすく論理構造から切り離されてはいますが、文章の論理構造を記述するべくHTMLファイル内にデザインがある事には変わりません)
  • 上記ソースのメリットの一つとしてid=”content”をHTML上でmenubarより上に持っていける事があります。(音声ブラウザが上から読み上げる際、最初にコンテンツを読み上げてくれるため)

コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment