1カラムレイアウトの基本
1カラム（1段組）のレイアウトは、サブコンテンツのないページやサイドメニューの必要ないページ、強調したい内容があるページなどで使用されます。ここでは、1カラムレイアウトの基本的なHTMLとCSSについて説明します。
1カラムレイアウトの基本
1カラムレイアウトは基本的にはページの内容をすべて１つのグループとしてコンテナにまとめます。たとえば、ヘッダー、コンテンツ、フッターがそれぞれ１つずつのシンプルな構成の場合、図で表すと次のようになります。
固定レイアウト（ソリッドレイアウト）
１カラムのレイアウトを固定レイアウトで作成する場合は、コンテナの横幅（width）を絶対値で指定して作成します。そのため、ブラウザの横幅やディスプレイのサイズが変わっても、ページの横幅は常に一定の大きさとなります。
固定レイアウトのメリット
横幅が固定されているので製作者の意図したレイアウトで表示されます。また、可変レイアウトに比べるとシンプルにCSSを記述することができます。
固定レイアウトのデメリット
ウインドウ幅が小さい場合、コンテンツの内容が横にはみ出てしまうこともあります。また、逆にウインドウ幅が大きい場合には必要以上に横幅ができてしまうこともあります。
固定レイアウトのコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<!-- ヘッダーの内容を入力 -->
</header>
<main>
<!-- メインコンテンツの内容を入力 -->
</main>
<footer>
<!-- フッターの内容を入力 -->
</footer>
</div>
</body>
</html>#container {
/* 横幅を指定 */
width: 960px;
/* 左右のマージンをautoにすることで中央配置 */
margin: 0 auto;
}
header {
/* ヘッダーのCSSを記述 */
}
main {
/* メインコンテンツのCSSを記述 */
}
footer {
/* フッターのCSSを記述 */
}
固定レイアウトで横幅を指定した場合や、可変レイアウトで100%よりも小さい値を指定した場合などには、そのままでは画面の左端にページが表示されます。これを中央に配置したい場合は、コンテナの横方向のmarginをautoに指定します。
可変レイアウト（リキッドレイアウト）
1カラムのレイアウトを可変レイアウトで作成する場合は、コンテナの横幅をパーセンテージ（％）やviewport width（vw）などで指定します。そのため可変レイアウトでは、ディスプレイのサイズによってページの横幅も変わります。また、可変レイアウトでは「min-width」や「max-width」を指定しておくことで、ページの最小幅や最大幅を指定しておくこともできます。
可変レイアウトのメリット
ウインドウ幅を有効に利用してコンテンツを表示させることができます。
可変レイアウトのデメリット
可変レイアウトではユーザーの環境によってレイアウトが変化します。そのため、製作者の意図しない見え方となってしまうこともあります。また、ウインドウサイズによっては文字の折り返し幅が大きくなりすぎて、文章が読みづらくなってしまうこともあります。
可変レイアウトのコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<!-- ヘッダーの内容を入力 -->
</header>
<main>
<!-- メインコンテンツの内容を入力 -->
</main>
<footer>
<!-- フッターの内容を入力 -->
</footer>
</div>
</body>
</html>#container {
/* 横幅を指定 */
width: 100%;
/* 最小幅と最大幅を指定 */
min-width: 520px;
max-width: 1280px;
}
header {
/* ヘッダーのCSSを記述 */
}
main {
/* メインコンテンツのCSSを記述 */
}
footer {
/* フッターのCSSを記述 */
}
