CSS ウェブサイトレイアウト
ウェブサイトのレイアウト
ウェブサイトは通常、ヘッダー、メニュー、コンテンツ、フッターに分けられます：
さまざまなレイアウトデザインが選択可能ですが、上記の構造は最も一般的な構造の1つです。このチュートリアルでは、それを詳細に研究します。
ヘッダー
ヘッダー（header）は通常、ウェブサイトのトップに位置しています（またはトップナビゲーションメニューのすぐ下）。通常、ロゴやウェブサイト名が含まれています：
例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
結果：
ナビゲーションバー
ナビゲーションバーにはリンクリストが含まれており、訪問者があなたのウェブサイトを閲覧するのを助けます：
例
/* ナビゲーションバーのコンテナ */
.topnav {
overflow: hidden;
background-color: #333;
}
/* ナビゲーションバーのリンク */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* リンク - ホバー時の色変更 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
結果：
コンテンツ
どのレイアウトを使用するかは、ターゲットユーザーによって異なります。最も一般的なレイアウトは以下のいずれか（またはそれらを組み合わせて）：
- 1-列レイアウト（通常、モバイルブラウザ用）
- 2-列レイアウト（通常、タブレットやノートパソコン用）
- 3-列レイアウト（デスクトップ用にのみ）
1-列：
2-列：
3-列：
私たちは3列レイアウトを作成し、小さいスクリーン上では1列レイアウトに変更します：
例
/* 3つの互いに隣接して浮動する等しい列を作成します */
.column {
float: left;
width: 33.33%;
}
/* 浮動をクリアするための列の後 */
.row:after {
content: "";
display: table;
clear: both;
}
/* レスポンシブレイアウト - 小さいスクリーン（600ピクセルまたはそれ以下の幅）上では3つの列を並べ替えて並排に配置しない */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
結果：
完全なウェブ技術リファレンスマニュアル
私たちのリファレンスマニュアルは、ウェブ技術の全てをカバーしています。
その中にはW3C標準技術：HTML、CSS、XMLが含まれており、JavaScript、PHP、SQLなどの他の技術もあります。
オンラインインスタンステストツール
CodeW3C.com では、数千の例を提供しています。
オンラインエディタを使用して、これらの例を編集し、コードを実験できます。
簡単で理解しやすい学習方法
一寸金一寸時間、そのため、簡単で理解しやすい学習コンテンツを提供しています。
ここでは、簡単で便利な方法で必要な知識を得ることができます。
ヒント：2列レイアウトを作成するには、幅を50％に変更してください。4列レイアウトを作成するには、25％を使用してください。
ヒント：@mediaルールがどのように機能するか知りたいですか？私たちの CSS メディアクエリ この章で学んだ知識に関する更多信息を学びましょう。
ヒント：列レイアウトを作成するより現代的な方法は、CSS Flexboxを使用することです。ただし、Internet Explorer 10およびそれ以前のバージョンではサポートされていません。IE6-10のサポートが必要な場合は、フロート（上記のように）を使用してください。
フレキシブルボックスレイアウトモジュールに関する更多信息を知りたい場合は、私たちの CSS Flexbox チュートリアル。
不等のバー
メインコンテンツ（main content）は、あなたのウェブサイトで最も大きく、最も重要な部分です。
列の幅が異なることがよくあります。なぜなら、ほとんどのスペースが主内容に割り当てられているからです。サブコンテンツ（あれば）は、通常、代替ナビゲーションや主内容に関連する情報として使用されます。幅を変更しても、合計が100％であることを忘れないでください：
例
.column {
float: left;
}
/* 左右列 */
.column.side {
width: 25%;
}
/* 中間列 */
.column.middle {
width: 50%;
}
/* レスポンシブレイアウト - 3つの列を並べ替えて並排に配置しない */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
結果：
完全なウェブ技術リファレンスマニュアル
私たちのリファレンスマニュアルは、ウェブ技術の全てをカバーしています。
その中にはW3C標準技術：HTML、CSS、XMLが含まれており、JavaScript、PHP、SQLなどの他の技術もあります。
オンラインインスタンステストツール
CodeW3C.com では、数千の例を提供しています。
オンラインエディタを使用して、これらの例を編集し、コードを実験できます。
簡単で理解しやすい学習方法
一寸金一寸時間、そのため、簡単で理解しやすい学習コンテンツを提供しています。
ここでは、簡単で便利な方法で必要な知識を得ることができます。
フッター
フッターはページの下部に位置します。通常、著作権や連絡先情報などの情報が含まれています：
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
結果：
