1. フレキシブルレイアウト（パーセンテージベース）
フレキシブルレイアウトはパーセンテージを利用した設計手法で、固定ピクセル値に依存せず画面幅に応じて要素を伸縮させます。コンテンツは両端に自然に配置され、モバイルWeb開発で広く採用されています。
- max-width: 最大幅（max-height: 最大高さ）
- min-width: 最小幅（min-height: 最小高さ）
2. 実装例：ECサイトトップページ
HTML構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<title>ECサイト</title>
</head>
<body>
<header class="app-header">
<ul>
<li><img src="images/close.png" alt="閉じる"></li>
<li><img src="images/logo.png" alt="ロゴ"></li>
<li>アプリでより快適に</li>
<li>今すぐ開く</li>
</ul>
</header>
<div class="search-container">
<div class="search-icon"></div>
<div class="search-box">
<div class="brand-icon"></div>
<div class="search-icon-inner"></div>
</div>
<div class="login-btn">ログイン</div>
</div>
<div class="content-area">
<!-- スライダー、ナビゲーション、コンテンツなど -->
</div>
</body>
</html>
CSS実装
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
color: #666;
line-height: 1.5;
background: #f0f0f0;
}
.app-header ul li {
float: left;
height: 45px;
background: #333;
text-align: center;
line-height: 45px;
color: #fff;
}
.search-container {
position: fixed;
width: 100%;
height: 44px;
min-width: 320px;
max-width: 640px;
overflow: hidden;
}
.search-box {
position: relative;
height: 30px;
background: #fff;
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;
}
3. Flexboxレイアウト
基本概念
Flexboxは柔軟なボックスレイアウトを提供し、コンテナ内のアイテムの配置、方向、順序を簡単に制御できます。モバイル端末でのレイアウトに最適です。
コンテナプロパティ
.container {
display: flex;
flex-direction: row; /* 主轴方向 */
justify-content: center; /* 主轴配置 */
align-items: stretch; /* 交差軸配置 */
flex-wrap: wrap; /* 折り返し */
}アイテムプロパティ
.item {
flex: 1; /* 伸長比率 */
align-self: flex-start; /* 個別配置 */
order: 1; /* 表示順序 */
}4. remを用いた適応型レイアウト
remはルート要素のフォントサイズを基準とする相対単位で、メディアクエリと組み合わせることで様々な画面サイズに適応します。
@media screen and (min-width: 320px) {
html { font-size: 50px; }
}
@media screen and (min-width: 640px) {
html { font-size: 100px; }
}
.element {
width: 2rem; /* ルートフォントサイズに比例 */
height: 1.5rem;
}5. Viewport単位（vw/vh）レイアウト
ビューポートの幅や高さを基準とする単位で、より直感的なレスポンシブデザインを実現します。
.responsive-element {
width: 50vw; /* ビューポート幅の50% */
height: 25vh; /* ビューポート高さの25% */
font-size: 4vw; /* ビューポート幅に応じた文字サイズ */
}6. 実践的なレイアウト例
ナビゲーションバー
.nav-container {
display: flex;
height: 64px;
background: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}グリッドレイアウト
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid-item {
width: calc(50% - 10px);
margin-bottom: 20px;
}