CSSWebサイトのレイアウト
ウェブサイトのレイアウト
Webサイトは、多くの場合、ヘッダー、メニュー、コンテンツ、およびフッターに分割されます。
さまざまなレイアウトデザインから選択できます。ただし、上記の構造は最も一般的なものの1つであり、このチュートリアルで詳しく見ていきます。
ヘッダ
ヘッダーは通常、Webサイトの上部（または上部のナビゲーションメニューのすぐ下）にあります。多くの場合、ロゴまたはWebサイト名が含まれています。
例
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
結果
Header
ナビゲーションバー
ナビゲーションバーには、訪問者がWebサイトをナビゲートするのに役立つリンクのリストが含まれています。
例
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
結果
コンテンツ
このセクションのレイアウトは、多くの場合、ターゲットユーザーによって異なります。最も一般的なレイアウトは、次のいずれか（またはそれらを組み合わせたもの）です。
- 1列（多くの場合、モバイルブラウザで使用されます）
- 2カラム（タブレットやラップトップによく使用されます）
- 3列のレイアウト（デスクトップでのみ使用）
1列：
2列：
3列：
3列のレイアウトを作成し、小さい画面では1列のレイアウトに変更します。
例
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
結果
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
ヒント： 2列のレイアウトを作成するには、幅を50％に変更します。4列のレイアウトを作成するには、25％などを使用します。
ヒント： @mediaルールがどのように機能するのか疑問に思いますか？詳細については、CSSメディアクエリの章をご覧ください。
ヒント：列レイアウトを作成する最新の方法は、CSSFlexboxを使用することです。ただし、Internet Explorer10以前のバージョンではサポートされていません。IE6-10のサポートが必要な場合は、floatを使用してください（上記を参照）。
フレキシブルボックスレイアウトモジュールの詳細については、CSSフレックスボックスの章をご覧ください。
等しくない列
メインコンテンツはあなたのサイトの最大かつ最も重要な部分です。
列幅が等しくない場合によくあることなので、ほとんどのスペースはメインコンテンツ用に予約されています。サイドコンテンツ（存在する場合）は、代替ナビゲーションとして、またはメインコンテンツに関連する情報を指定するためによく使用されます。幅は好きなように変更してください。合計で100％になることだけを覚えておいてください。
例
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
結果
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
フッター
フッターはページの下部に配置されます。多くの場合、著作権や連絡先情報などの情報が含まれています。
例
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
結果
レスポンシブウェブサイトのレイアウト
上記のCSSコードの一部を使用して、レスポンシブWebサイトのレイアウトを作成しました。これは、画面の幅に応じて2列と全幅列の間で異なります。
W3Schools Spacesについて聞いたことがありますか？ここでは、Webサイトを最初から作成するか、テンプレートを使用して、無料でホストできます。
無料で始めましょう❯*クレジットカードは必要ありません