1カラムのページ
index.html
<!---------------------------------------------------------> <!-- body --> <!---------------------------------------------------------> <body> <!---------------------------------------------------------> <!-- header --> <!---------------------------------------------------------> <header> <h1>ヘッダー</h1> </header> <!---------------------------------------------------------> <!-- main --> <!---------------------------------------------------------> <main> <h2>メインカラム</h2> </main> <!---------------------------------------------------------> <!-- footer --> <!---------------------------------------------------------> <footer> <h3>フッター</h3> </footer> </body>
styles.css
@charset "UTF-8"; * { margin: 0; padding: 0; } body { width: 100%; } header { height: 130px; background-color: skyblue; } main { height: 450px; background-color: pink; } footer { height: 77px; background-color: lightgreen; } h1 { text-align: center; line-height: 130px; } h2 { text-align: center; line-height: 450px; } h3 { text-align: center; line-height: 77px; }
ブラウザー表示
2カラム左サイドバー
index.html
<!---------------------------------------------------------> <!-- body --> <!---------------------------------------------------------> <body> <!---------------------------------------------------------> <!-- header --> <!---------------------------------------------------------> <header> <h1>ヘッダー</h1> </header> <!---------------------------------------------------------> <!-- main --> <!---------------------------------------------------------> <main> <div id="content"> <div id="leftcolumn"> <h2>左サイドバー</h2> </div> <div id="maincolumn"> <h2>メインカラム</h2> </div> </div> </main> <!---------------------------------------------------------> <!-- footer --> <!---------------------------------------------------------> <footer> <h3>フッター</h3> </footer> </body>
styles.css
@charset "UTF-8"; * { margin: 0; padding: 0; } body { width: 100%; } header { height: 130px; background-color: skyblue; } main { height: 450px; } footer { height: 77px; background-color: lightgreen; } h1 { text-align: center; line-height: 130px; } h2 { text-align: center; line-height: 450px; } h3 { text-align: center; line-height: 77px; } #content { display: flex; } #leftcolumn { width: 25%; background-color: yellow; } #maincolumn { width: 75%; background-color: pink; }
ブラウザー表示
2カラム右サイドバー
index.html
<body> <!---------------------------------------------------------> <!-- header --> <!---------------------------------------------------------> <header> <h1>ヘッダー</h1> </header> <!---------------------------------------------------------> <!-- main --> <!---------------------------------------------------------> <main> <div id="content"> <div id="maincolumn"> <h2>メインカラム</h2> </div> <div id="rightcolumn"> <h2>右サイドバー</h2> </div> </div> </main> <!---------------------------------------------------------> <!-- footer --> <!---------------------------------------------------------> <footer> <h3>フッター</h3> </footer> </body>
styles.css
@charset "UTF-8"; * { margin: 0; padding: 0; } body { width: 100%; } header { height: 130px; background-color: skyblue; } main { height: 450px; } footer { height: 77px; background-color: lightgreen; } h1 { text-align: center; line-height: 130px; } h2 { text-align: center; line-height: 450px; } h3 { text-align: center; line-height: 77px; } #content { display: flex; } #rightcolumn { width: 25%; background-color: yellow; } #maincolumn { width: 75%; background-color: pink; }
ブラウザー表示
3カラム左右サイドバー
index.html
<!---------------------------------------------------------> <!-- body --> <!---------------------------------------------------------> <body> <!---------------------------------------------------------> <!-- header --> <!---------------------------------------------------------> <header> <h1>ヘッダー</h1> </header> <!---------------------------------------------------------> <!-- main --> <!---------------------------------------------------------> <main> <div id="content"> <div id="leftcolumn"> <h2>左サイドバー</h2> </div> <div id="maincolumn"> <h2>メインカラム</h2> </div> <div id="rightcolumn"> <h2>右サイドバー</h2> </div> </div> </main> <!---------------------------------------------------------> <!-- footer --> <!---------------------------------------------------------> <footer> <h3>フッター</h3> </footer> </body>
styles.css
@charset "UTF-8"; * { margin: 0; padding: 0; } body { width: 100%; } header { height: 130px; background-color: skyblue; } main { height: 450px; } footer { height: 77px; background-color: lightgreen; } h1 { text-align: center; line-height: 130px; } h2 { text-align: center; line-height: 450px; } h3 { text-align: center; line-height: 77px; } #content { display: flex; } #leftcolumn { width: 20%; background-color: yellow; } #rightcolumn { width: 20%; background-color: yellow; } #maincolumn { width: 60%; background-color: pink; }
ブラウザー表示
まとめ
最初はページ全体のレイアウトをブロック化して
次に、それぞれのブロックを更にブロック化するように
次々に詳細ブロック化することで、比較的簡単にレイアウト設計できます。
コメント