CSS 左固定右スクロール
概要
この記事では、CSS を使用して "左固定右スクロール" レイアウトを実装する方法を紹介します。このレイアウトは、一般的に左側のメニューを固定し、右側のコンテンツエリアをスクロール可能にするページデザインに使用されます。
目次
HTML 構造
まず、セマンティックな HTML5 タグを使用して、ページの基本構造を構築します。例えば、<header>、<main>、<aside>、<section> などを使用します。左側の固定部分と右側のスクロール部分を別々のコンテナ要素に配置します。
```html
ヘッダー
右コンテンツ
コンテンツ...
```
CSS スタイル
次に、CSS を使用して、左固定右スクロールのレイアウトを実現します。display: flex; や display: grid; などのレイアウト方法を使用して、2 列のレイアウトを作成します。左側の固定部分の幅と position: fixed; プロパティを設定して、ビューポートの左側に固定します。右側のスクロール部分の幅と margin-left プロパティを設定して、左側の固定部分のスペースを確保します。overflow-x: auto; または overflow-y: auto; を使用して、右側のコンテンツエリアにスクロールバーを表示します。
```css / style.css / body { margin: 0; }
main { display: flex; }
.left-sidebar { width: 200px; position: fixed; height: 100vh; background-color: #f0f0f0; }
.right-content { margin-left: 200px; padding: 20px; overflow-y: auto; } ```
レスポンシブデザイン
CSS メディアクエリ (@media) を使用して、異なる画面サイズに合わせてレイアウトを調整します。例えば、小さな画面のデバイスでは、左側のメニューを非表示にしたり、上部のメニューに変更したりすることができます。
```css @media screen and (max-width: 768px) { .left-sidebar { display: none; }
.right-content { margin-left: 0; } } ```
コード例
以下は、"左固定右スクロール" レイアウトを実装する方法の完全な HTML と CSS のコード例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左固定右スクロール</title>
<style>
body {
margin: 0;
}
main {
display: flex;
}
.left-sidebar {
width: 200px;
position: fixed;
height: 100vh;
background-color: #f0f0f0;
}
.right-content {
margin-left: 200px;
padding: 20px;
overflow-y: auto;
}
@media screen and (max-width: 768px) {
.left-sidebar {
display: none;
}
.right-content {
margin-left: 0;
}
}
</style>
</head>
<body>
<header>
<h1>ヘッダー</h1>
</header>
<main>
<aside class="left-sidebar">
<h2>左サイドバー</h2>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</aside>
<section class="right-content">
<h2>右コンテンツ</h2>
<p>コンテンツ...</p>
</section>
</main>
<footer>
<p>フッター</p>
</footer>
</body>
</html>
```注意点
- ページの内容が左側の固定部分で隠れていないことを確認してください。
- 異なるブラウザやデバイスでの互換性をテストしてください。
よくある質問
- Q: 左側の固定部分がスクロールしません。
- A:
position: fixed;プロパティが正しく設定されていること、およびheightプロパティが適切な値に設定されていることを確認してください。 - Q: 右側のコンテンツが左側の固定部分の下に隠れています。
- A:
margin-leftプロパティが左側の固定部分の幅と同じ値に設定されていることを確認してください。 - Q: モバイルデバイスでレイアウトが崩れてしまいます。
- A: CSS メディアクエリを使用して、異なる画面サイズに合わせてレイアウトを調整してください。