無料でホームページ素材を提供しています。

サイトマップ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

ホーム	掲示板	ブログ	FAQ	お問い合わせ

CSSを使った2カラムレイアウト

実はテーブルをレイアウトに応用するのはあまりおすすめされていません。できればこちらを使用してください。

ブラウザー表示例

ブラウザー表示

タイトル部カラム

左カラム

右カラム

著作権カラム

外部CSSソース

/**********************************************************************/

body {
text-align : center;       /* コンテンツのセンタリング */
}

/**********************************************************************/

/* コンテンツの土台作成 */

div#container {
bg-color: #FFFFFF; /* 背景色 */
border-style: solid;       /* 枠線の種類 */
border-width: 0px;         /* 枠線の幅 */
line-height : 1.5;         /* 行間 */
margin-left : auto;        /* 左側からの位置を自動算出 */
margin-right : auto;       /* 右側からの位置を自動算出 */
padding: 0px 0px 0px 0px;  /* 内側余白 */
text-align : left;         /* body要素で指定したセンタリングを戻す */
width : 760px;             /* コンテンツ幅を760pxに設定 */
}

/**********************************************************************/

/* タイトル部カラムの作成 */

div#header {
bg-color: #FFFFFF; /* 背景色 */
border-style: solid;       /* 枠線の種類 */
border-width: 0px;         /* 枠線の幅 */
clear: all;                /* ブロックレベル解除 */
line-height : 1.5;         /* 行間 */
margin: 0px 0px 0px 0px;   /* 内側余白 */
padding: 0px 0px 0px 0px;  /* 外側余白 */
width: 100%;               /* カラムの幅（コンテンツの土台に対して100%） */
}

/**********************************************************************/

/* 左カラムの作成 */

#clm_lft {
bg-color: #FFFFFF; /* 背景色 */
border-style: solid;       /* 枠線の種類 */
border-width: 0px;         /* 枠線の幅 */
float: left;               /* カラムの左寄せ */
font-size: 100%;           /* テキストの大きさ */
line-height : 1.5;         /* 行間 */
margin: 0px 0px 0px 0px;   /* 内側余白 */
padding:0px 0px 0px 0px;   /* 外側余白 */
width: 570px;              /* カラムの幅（760/4*3） */
}

/* 右カラムの作成 */

#clm_rgt {
bg-color: #FFFFFF; /* 背景色 */
border-style: solid;       /* 枠線の種類 */
border-width: 0px;         /* 枠線の幅 */
float: right;              /* カラムの左寄せ */
font-size: 100%;           /* テキストの大きさ */
line-height : 1.5;         /* 行間 */
margin: 0px 0px 0px 0px;   /* 内側余白 */
padding:0px 0px 0px 0px;   /* 外側余白 */
width: 190px;              /* カラムの幅（760/4） */
}

/**********************************************************************/

/* 著作権カラムの作成 */

div#clm_footer {
bg-color: #FFFFFF; /* 背景色 */
border-style: solid;       /* 枠線の種類 */
border-width: 0px;         /* 枠線の幅 */
clear: all;                /* ブロックレベル解除 */
font-size: 100%;           /* テキストの大きさ */
line-height : 1.5;         /* 行間 */
margin: 0px 0px 0px 0px;   /* 内側余白 */
padding:0px 0px 0px 0px;   /* 外側余白 */
width: 100%;               /* カラムの幅（コンテンツの土台に対して100%） */
}

HTMLソース

<!-- コンテンツの土台▼▼ -->
<div id="container_1">

<!-- TTL部カラム▼ -->
<div id="header">
タイトル部カラム
</div>
<!-- TTL部カラム▲ -->

<!-- 左カラム▼ -->
<div id="column_lft">
左カラム
</div>
<!-- 左カラム▲ -->

<!-- 右カラム▼ -->
<div id="body_2_r">
右カラム
</div>
<!-- 右カラム▲ -->

<!-- footer_1▼ -->
<div id="footer_1">
著作権カラム
</div>
<!-- footer_1▲ -->

</div>
<!-- コンテンツの土台▲▲ -->

</body>
</html>

仕様

コンテンツの自動センタリング
コンテンツ幅は760ピクセル
左が本文、右がメニュー

《もくじへ│▲このページのトップへ

メニュー

グラフィック素材
HTMLとJavaScript素材
資料
おすすめランキング
HTML辞典
JavaScript辞典
便利情報
ホームページ運営講座
ホームページ用語集
リンク

Sponcerd Links

Recommend

│ホーム │FAQ │動作環境について │注意事項 │素材と資料の使い方 │

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送