この記事では「サイドにあるナビ以外のコンテンツをスクロールで動かす方法」を説明します。
想定読者：
- サイドのナビを固定する方法が分からない人
- そもそもサイドにナビを配置するやり方が分からない人
目次
- 左側にナビを配置するやり方の説明(flexを用いて説明します)
- スクロールでサイドのナビが動かないようにする方法
- fixedを用いてナビを固定し、それ以外のコンテンツを動かす方法
- ナビを固定させずにそれ以外のコンテンツのみを動かす方法
左側にナビを配置するやり方の説明
本題へ入る前に、htmlの本文を左右で分けるやり方が分からない人向けへ説明します。分かる方は飛ばしてOKです。
左右で分けるやり方ですが、分けたい要素の親要素に
display: flex;
と記述するだけで分けることができます^^
ここからは実例をあげて説明していきます。
例えば、以下のようなhtmlがあったとします。(長くなるので、body要素内のみ記述します)
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">コンテンツ１</a></li>
<li><a href="#">コンテンツ２</a></li>
</ul>
</nav>
<div class="main">
<h1>メインの内容</h1>
<p>はじめまして</p>
<p>プログラミングの勉強しているkaoriと申します</p>
<p>こちらでは主に勉強中、自分が躓いた点を記事にしています。</p>
<p>プログラミング初心者の方でも理解できる丁寧で分かりやすい記事を目指しています。</p>
<p>具体的には、文字だけの説明ではなく<br>実際のコードや実行結果の画像、<br>イメージ図<br>を用いて解説することを心がけています。</p>
<p>今回は、サイドのナビをスクロールしても動かないようにするやり方を解説したいと思い、この記事を投稿しました。</p>
<p>やり方は２種類あります。</p>
<p>1つ目は、Fixedを用いてナビを固定し、それ以外のコンテンツを動かす方法</p>
<p>2つ目はナビを固定させずにそれ以外のコンテンツのみを動かす方法です。</p>
<p>この記事では2つとも取り上げていきます。</p>
<p>最後までお付き合いしてくださると嬉しいです。</p>
<p>なお、質問やご指摘は大歓迎です。</p>
<p>お気軽にお申し付けください。</p>
</div>
</div>
</body>
こちらはdivタグのContainerクラス名を持つ親要素が2つの子要素をもつという例です。
子要素は以下の2つです。
- 無名のnavタグ
- mainというクラス名を持つdivタグ
このhtmlのみの実行結果は、以下の実行結果1のようになります。
実行結果1
この子要素を左右に分けるためには、cssに以下のことを記述すればOKです。
.container {
display: flex;
}
上記を追加した実行結果は以下の実行結果2のようになります。
実行結果2
2つの要素を横に並べることができました^^
なお、今回は２要素のみですが、同じようにすれば３要素を並べることもできます。
スクロールでサイドのナビが動かないようにする方法
ここまで要素ごとに横に並べる方法を説明しました。
このままですと、ナビの位置がスクロールに対応できていません。スクロールすると、サイドのナビまで動いてしまいます。
ここからは、本題の「スクロールでサイドのナビが動かないようにする方法」を説明します。
Fixedを用いてナビを固定し、それ以外のコンテンツを動かす方法
こちらは、ナビの位置をスクロールしても動かないように固定する方法です。
まず、ナビを固定する為にcssにdisplay: fixedを追加します。
nav {
display: fixed;
}
その結果、以下の実行結果3のようになります。
実行結果3
ナビの位置は固定できましたが、メインの要素とナビが重なりあってしまいました。この問題を解決する為に、メインの要素にmarginを追加する必要があります。
.main {
margin-left: 20vw;
}
その結果、実行結果4のようになりました。
実行結果4
これでスクロールでサイドのナビが動かないようになりました。
ナビを固定させずにそれ以外の要素のみを動かす方法
上記の方法はナビを固定する方法でした。
2つ目は、ナビを固定せず、特定の要素のみをスクロールする方法を説明します。
記述することは、
- スクロールする要素の高さを指定すること
- スクロールさせたいコンテンツに”overflow-y: scroll;”を追加すること
です。
それでは、追加してみましょう。
.container {
display: flex;
}
.main {
height: 100vh;
overflow-y: scroll;
}
実行結果は実行結果5になります。
実行結果5
なお、今回は高さ(height)はスクロールしたい要素の高さが指定されていれば実行できますので、親要素に記述してもスクロールすることができます。
参考にしたサイト一覧
日本語対応！CSS Flexboxのチートシートを作ったので配布します
:"display: flex;"を使う際に参考にいたしました。
まとめ
今回は以下のことについて説明いたしました。
- 右側にナビを配置するやり方の説明
(flexを用いて説明しました) - Fixedを用いてナビを固定し、それ以外のコンテンツを動かす方法
（追加することはfixedとmarginです） - ナビを固定させずにそれ以外のコンテンツのみを動かす方法
（追加することはheightとoverflowです）
最後に
今回はサイドのナビを固定する方法の解説をしましたが、上部に固定するナビでも手順1をとばして行えば作ることができます。