Web プログラミング

【もりけん塾39日目】サイドバーを固定・スクロールを追従させる方法

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

今、調べながらしているものは以下のとおりです。

  • 画像の中央にテキストを表示する
  • 料金表を作成
  • 画像クリック→スライドさせる

 

依頼していた内容から何度か変更があったので変更内容をしていきました。

 

前回2カラムレイアウトにしたので、サイドバーを固定しスクロールを追従する方法も併せて知っておきたいと思ったので調べたので整理していきます。

 

https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506

サイドバーを固定(追従)する3つの方法

サイドバーを固定する方法は3つあるようです。

 

  1. JavaScript
  2. jQuery
  3. CSS

 

今回はCSSの方法について調べてまとめました。

 

CSSを選んだ3つの理由

サイドバーの固定にCSSを選んだ理由は以下のとおりです。

 

  • JavaScriptはサイト速度に影響がある
  • JavaScriptは不具合が発生しやすい
  • JavaScript初学者である

 

上記の理由からCSSの方法を選びました。

 

JavaScriptでサイドバーを固定したい場合はサイドバーを固定・スクロール追従させる2つの方法 の記事に記載があるので、よろしければこちらの記事へ飛んでみてください。

 

CSSでサイドバーを固定【使うもの】

CSSでサイドバーを固定するために使うものは

 

  • position: sticky
  • 固定したい要素にtopやleft rightを指定

これだけ!

 

さっそく手順をみていきましょう。

 

CSSでサイドバーを固定する手順

CSSでサイドバーを固定する方法でHTML、CSSの順番にまとめていきます。

HTML

HTMLは固定したいカラムにstickedでくくるだけ。

 

実際のHTMLは以下のとおりです。

 

 html
<div id="page-cover">
    <div id="main-column">
        <!-- メインカラム -->
    </div>
    <div id="side-column">
        <!-- サイドバーカラム -->
        <div id="sticked"><!-- サイドバーで固定したいカラム --></div>
    </div>
</div>

 

2カラムレイアウトでメインカラムとサイドバーカラムをくくり、固定したいカラムをstickedでくくる。

 

たったこれだけ!

 

idとclassの違い

  • id:同じWebページ上でidの値が重複してはならない
  • class:同じWebページ上で同じclassの値を何度でも用いることができる

 

重複しないidを使うことで間違って違う値を指定することがありません。

 

CSS

次はCSS。

 

簡単な流れ

  1. メインカラムとサイドバーの高さを揃える
  2. 固定・追従させたい箇所にposition:stickyを指定

 

 

一つづつまとめていきます。

 

CSS①メインカラムとサイドバーの高さを揃える

まずはメインコンテンツとサイドバーの高さを揃えることから。

 

方法はflexboxを使用

 

高さを揃えないと固定・追従されないようです。

 

position:sticky使用ができない可能性がある

  • table-cellやfloatでのレイアウトはうまく動作しない可能性あり
  • floatのレイアウトはメインコンテンツとサイドバーの高さが不揃い
  • overflow:hiddenが使用されている場合は動作されない

floatレイアウトはclearfixなどのコードが増えるので勧めないそうです。

 

実際に私もtable-cellやfloatを使用していたため、うまく動作しませんでした。

 

参考記事▶(CSSだけでサイドバーを固定・スクロール追従する方法(JavaScript不要)

CSS②固定・追従させたい箇所にposition:stickyを指定

固定させたい場所にposition: stickyを指定すること。

 

  • 親要素にoverflow: hiddenを指定している場合はposition: stickyは不可
  • InternetExplorerには非対応(最新のEdgeでは対応)

 

実際のCSSは以下になります。

 

 html
#sticked {
position: sticky;
top: 10px;

 

これだけで固定・追従ができました!

 

 

top: 10px;

position:sticky;と併せて

  • top
  • right
  • bottom
  • left

のどれかを指定する必要がある。

 

stickyの対応しているブラウザはどうやって調べる?

Google Chromeで確認すると固定ができていました。

 

しかしsafariで確認するとサイドバーの固定・追従が対応されていませんでした。

 

調べていくとプロパティのブラウザ対応状況を簡単にチェックツールがあったのでこちらをまとめていきます。

 

ブラウザ対応状況のチェックツール『Can I use?』の使い方

クリックするとCan I use?のサイトへ飛びます。

 

英語が苦手なので使い方を調べていきました。

 

使い方①調べたいプロパティを入力

 

画像にある空白箇所に調べたいプロパティを入力。

Can I use    ?

 

今回はstickyについて調べたかったのでstickyと入力。

 

以下のような結果がでました。

 

 

これ全然わからないので調べました。

(英語力必要…><)

 

使い方②結果の読み方

 

わけがわかりませんね…

 

HOMEの下に色の見分け方がありました。

 

日本語にすると、

 

  • Green = Supported:対応
  • Red = Not supported:非対応
  • Greenish yellow = Partial support:一分対応
  • Gray = Support unknown:不明

という意味でした!

 

赤が多いので非対応のブラウザが多いようですね。

 

調べるのに必要なブラウザは?

引用:WebブラウザシェアランキングTOP10(日本国内・世界)

 

調べると上記のランキングになっていました。

 

ではどこまでブラウザが対応しているのかを見る必要があるのでしょうか?

 

 

同じもりけん塾のharuさんがリアルタイムでツイートされていました!

 

あとはもりけんさんもありがたいツイートを…!

 

 

 

結論。

  • Chrome
  • Safari
  • IE
  • firefox
  • Edge(MicrosoftがIEより使用を推奨しているため)

これの対応を確認していこうと思います!

 

最低でも赤字2つは対応していきたい…!

 

IE6に対応する方法

IE6の対応方法はbodyに背景画像を使用(画像の指定はない)するようです。

 

IE6の場合、サイドバーがスクロール時にガタが発生するため。

 

  • CSS:『background: url(bg_body.gif) repeat;』
  • ラッパー要素:『position: relative;』
  • IE6は『position: fixed』プロパティをサポートしていない→『position: absolute;』、『top: expression(eval(document.documentElement.scrollTop+54));』を指定

 

おわりに【反省点】

LPが完成に近づくほど、気づくことがたくさんでてきます。

 

また、もっとこうした方がLPが見やすくなるという欲が出てきたので時間の大切さを感じました…!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada