シンプルな(X)HTMLのCSSレイアウトサンプル全15種

下記のシンプルなソースとCSSで実現可能なCSSレイアウトのサンプル全15種類を紹介します。固定幅の1カラム、2カラム、3カラムがあります。応用すれば可変幅もできます。

<body>
  <div id="header">
    <!-- ヘッダー -->
  </div>
  <div id="main">
    <!-- 主要情報 -->
  </div>
  <div id="navigation">
    <!-- ナビゲーション -->
  </div>
  <div id="complementary">
    <!-- 関連情報 -->
  </div>
  <div id="footer">
    <!-- フッター -->
  </div>
</body>

CSSソースはサンプルのHTMLファイル内に直接記述してあります。

  • Layout00
  • Layout01
  • Layout02
  • Layout03
  • Layout04
  • Layout05
  • Layout06
  • Layout07
  • Layout08
  • Layout09
  • Layout10
  • Layout11
  • Layout12
  • Layout13
  • Layout14

主要なブラウザで表示確認しており、IE6/7でも問題なく表示されます。

自由にいじれるよう、サンプル全15ファイルが入ったzipファイルも用意しましたので、是非ダウンロードしてみてください。

css-layout.zip(20.4KB)