本日このサイトに設定した、左側のボタン群をページに追従させる方法について解説します。

まず3カラムにするコード

HTML

<main class="single">

    <div class="sider-left_space">
      <nav class="sider-left">
         <?php get_template_part( 'sidebar', 'Twittershare' ); ?>
      </nav>
    </div>

    <div class="out_inner">
      <div class="inner">

                       <!--中略-->
 
      </div><!-- inner -->

      <div class="sider-right single">
        <?php get_template_part( 'sidebar', 'right' ); ?>
      </div>
    </div><!--out_inner-->
</main>

CSS

@media (min-width:600px) {
    .inner {
        width: 720px;
    }
/*---内容が少ないときに縮むのを防ぐ---*/
}
@media (min-width:850px) {
    main {
        display: flex;
        justify-content: space-between;
        max-width: 1280px;
        margin: 0 auto;
    }
/*---sider-left_spaceとout_innerを並べる---*/
    main .out_inner {
        display: flex;
        margin: 0 auto;
    }
/*---innerとsider-rightを並べる---*/
}

結果

ひとまず3カラムの見た目が出来上がりました。

※わざわざ二重にflexをつくっていますが、二重でなくてもできるかもしれない……。その方がコードはきれいなので後日検証します。

【本題】sider-leftを固定する

このままだとスクロールしたときにボタンたちは上に流れてしまうので、
Let’s fixed fixed !　します。

position: fixed

position – CSS: カスケーディングスタイルシート | MDN

わざわざnav要素をdivで囲ったのには理由があります。

要素は文書の通常のフローから除外され、
ページレイアウト内に要素のための空間が作成されません。

MDN

position: fixedにしてしまうと、他の要素がボタンたちに容赦なく食い込んでしまうんですね。

なので中身の範囲を失ってしまうsider-leftをカバーするために、sider-left_spaceで囲って、範囲を維持させています。

スクロールしたときについてくるのはsider-leftだけなので、sider-left_spaceには固定する必要のない情報を設置することもできます(多分)。

最初は「flex内の要素だから」できないもんだと思っていたので、外側を囲うだけで実装できるなんて……。