CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで固定サイドバーとスクロール可能なコンテンツ領域を持つフルハイトページを作成する方法

高さを100%に設定し、各要素の配置（position）を適切に指定することで、画面全体の高さを持つページに、固定サイドバーとスクロール可能なメインコンテンツ領域を実装できます。

実装のポイント

このレイアウトを実現するための重要なポイントは以下の3つです。

  • サイドバーの固定：position: fixed を指定し、top: 0; left: 0; で画面左端に固定します。height: 100% により、常に画面いっぱいの高さが保たれます。
  • メインコンテンツの位置調整：サイドバーの幅（140px）分だけ margin-left を設定することで、コンテンツがサイドバーの下に隠れるのを防ぎます。
  • スクロールの挙動：コンテンツが画面の高さを超えるとページ全体がスクロールしますが、サイドバーは fixed 指定により常に同じ位置に留まります。

コード例

以下に、実際に動作する完全なサンプルコードを示します。

<!DOCTYPE html>
<html>
<head>
<style>
.main {
    margin-left: 140px;
    font-size: 200%;
    padding: 0 3%;
}
section {
    height: 400px;
    background-color: tomato;
}
.sidebar {
    height: 100%;
    width: 140px;
    top: 0;
    left: 0;
    position: fixed;
    background-color: darkslategrey;
    padding-top: 20px;
}
.sidebar a {
    display: block;
    padding: 2% 4%;
    text-decoration: none;
    color: lightblue;
    font-size: 1.4em;
}
.sidebar a:hover {
    color: mistyrose;
    font-size: 1.8em;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#">Option a</a>
<a href="#">Option b</a>
<a href="#">Option c</a>
<a href="#">Option d</a>
<a href="#">Option e</a>
</div>
<div class="main">
<h3>Example</h3>
<article><p>Vivamus non elementum felis. Sed sagittis lectus ligula, maximus interdum eros lacinia non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Maecenas id purus neque. Donec auctor mollis vehicula. Nulla luctus mauris ut gravida interdum. Aenean vel hendrerit massa, vel feugiat dui.</p>
<img src="https://images.unsplash.com/photo-1611670159228-eff9d9e5b3a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200" />
<p>Phasellus ac felis consectetur lectus varius gravida ac in nunc. Suspendisse ut velit sagittis, mattis nibh eu, semper massa. Maecenas in ligula fringilla, tristique libero sit amet, convallis ex. Sed condimentum id nulla non dignissim. Vestibulum sollicitudin eros id varius ornare.</p></article>
<section></section>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような表示になります。

CSSで固定サイドバーとスクロール可能なコンテンツ領域を持つフルハイトページを作成する方法

ページを下にスクロールすると、メインコンテンツは流れていきますが、左側のサイドバーは固定されたまま変化しません。

CSSで固定サイドバーとスクロール可能なコンテンツ領域を持つフルハイトページを作成する方法

まとめ

この手法は、管理画面やドキュメントサイトなど、ナビゲーションを常に表示させておきたい場面で非常に役立ちます。サイドバーの幅や配色は .sidebar のスタイルを調整するだけで簡単に変更できるので、プロジェクトに合わせてカスタマイズしてみてください。

  1. CSSとJavaScriptで近日公開（Coming Soon）ページを作成する方法

    CSSとJavaScriptを組み合わせれば、サイトの公開前に訪問者へ向けて表示する「近日公開（Coming Soon）」ページに、リアルタイムで動くカウントダウンタイマーを簡単に組み込めます。この記事では、全画面の背景画像の中央にタイトルを配置し、残りの日・時・分・秒を1秒ごとに更新しながら表示するページの作り方を、サンプルコードとともにわかりやすく解説します。 コード例 <!DOCTYPE html> <html> <style>     body {      &

  2. HTMLとCSSでサイドバーとメインコンテンツ領域を含むページを作成する方法

    html要素とbody要素の高さ（height）を100%に設定することで、ブラウザ画面いっぱいに広がる流動的なレイアウトのWebページを作成できます。サイドバーとメインコンテンツ領域を左右に並べた2カラム構成にする場合、CSSのdisplayプロパティでtableとtable-cellを活用すると、各カラムの高さが自動的に揃い、背景も最下部まできれいに伸びるため便利です。 コード例 以下の例では、親要素「#parent」にdisplay: table;を指定し、サイドバー「#side」とメイン領域「#main」にそれぞれdisplay: table-cell;を設定しています。幅はサイドバー