ホームページ作成ビギナーズガイド：CSS(スタイルシート)

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート)レイアウト:3カラム 2

divタグとfloatを使った3段組の固定幅レイアウトをアレンジして、幅を可変にしたものです。

上記の固定幅レイアウトを読んでから先にお進み下さい。
また、CSS(スタイルシート)レイアウト:2カラム 2と解説が重複するところは省略しています。

CSS(スタイルシート)のソース

#header {width:100%;}
#wrapper {float:left; width:80%;}
#center {float:right; width:75%;}
#left {float:left; width:24.9%;}
#right {float:right; width:19.9%;}
#footer {clear:both; width:100%;}

[CSS(スタイルシート)レイアウト:3カラム 2]の続きを読む

CSS(スタイルシート)レイアウト:2カラム 2

divタグとfloatを使った2段組の固定幅レイアウトをアレンジして、幅を可変にしたものです。
いわゆるリキッド・レイアウトというやつです。

上記の固定幅レイアウトを読んでから先にお進み下さい。

CSS(スタイルシート)のソース

#header {width:100%;}
#right {float:right; width:70%;}
#left {float:left; width:29.9%;}
#footer {clear:both; width:100%;}

[CSS(スタイルシート)レイアウト:2カラム 2]の続きを読む

CSS(スタイルシート)レイアウト:3カラム 1

上にヘッダー、中央にメインコンテンツ、左右にメニューブロック、下にフッター、の3段組レイアウトの作り方を紹介します。

2段組レイアウトの応用なので、そちらを理解してからお読み下さい。

CSS(スタイルシート)のソース

body {text-align:center; margin:0 auto;}
#outer {width:750px; text-align:left; margin:0 auto;}
#header {width:750px;}

#wrapper {float:left; width:600px;}

#center {float:right; width:450px;}
#left {float:left; width:150px;}
#right {float:right; width:150px;}
#footer {clear:both; width:750px;}

[CSS(スタイルシート)レイアウト:3カラム 1]の続きを読む

前のページ｜HOME｜次のページ

ホームページ作成ビギナーズガイド

[PR]

CSS(スタイルシート)レイアウト:3カラム 2

CSS(スタイルシート)のソース

CSS(スタイルシート)レイアウト:2カラム 2

CSS(スタイルシート)のソース

CSS(スタイルシート)レイアウト:3カラム 1

CSS(スタイルシート)のソース

メニュー

カテゴリー

リンク

RSS

Appendix