今回は、スプリットレイアウトのコーディングについて、「position:fixed;」を使った方法と「position:sticky;」を使った方法の2つを中心に紹介させていただきます。
そもそもスプリットレイアウトとは？
スプリットレイアウトとは、「split」という英単語の意味通り、画面を分割したレイアウトのことを指します。
よくあるスプリットレイアウトの場合、マウスでスクロール操作をすると画面の左半分は動かずに右半分だけが上下にスクロールされます。
スプリットレイアウトは画面を2分割したレイアウトです。
https://onca.co.jp/column/design/p7579/
片方の画面ではメインで見せたい要素、もう片方の画面ではサブ的に見せたい要素を配置するなどの使い方ができます。WEBにしかできない表現方法で、オリジナリティのあるサイトデザインとなります。
the first takeのサイトでは、パソコン画面の時にスプリットレイアウトが採用されており、左側が固定デザイン、右側がスマホ画面時のデザインが見られるようになっています。
スプリットレイアウトを採用する場合、一番下までスクロールした後に画面幅いっぱいのフッターを配置するかどうかで、コーディング内容が変わってきます。
シンプルなスプリットレイアウト（position:fixed;で固定）
シンプルなスプリットレイアウトを使った簡単なページを作成してみました。
画面の左側は「position:fixed;」で固定し、右側は「width:50%;」と「margin-left:50%;」で画面半分を上下スクロールできるようにしています。
ただし、このコーディングの場合、画面幅いっぱい使ったフッターの設置ができず、もしフッターを作る場合は画面半分の幅を使うことになります。
画面幅いっぱいのフッターを登場させるスプリット（position:sticky;で固定）
一番下までスクロールしたら画面幅いっぱいのフッターが現れるようなスプリットレイアウトのコーディングもやってみました。
画面の左側は「position:sticky;」で固定し、右側は「width:50%;」と「right:0;」で画面半分を上下スクロールできるようにしつつ、一番下でフッターが出てくるようにしています。
この「position:sticky;」がCSSの様々な記述の中でも比較的新しいものらしく、僕自身、「position:sticky;」の本質的なところを理解していなかったので、今回をきっかけに調べてみました。
position:sticky;の仕組み
position:sticky;を使う上で理解しておかなければならない概念が2つあります。それは「スティッキーアイテム」と「スティッキーコンテナ」です。
positon:sticky;が定義された要素は「スティッキーアイテム」、その親要素は「スティッキーコンテナ」になります。
たとえば僕が作成したsplitView_02ページでは、position:sticky;が定義されたleft_sideクラスが「スティッキーアイテム」となり、
その親要素であるall_boxクラスが「スティッキーコンテナ」となります。
スティッキーアイテムは、親要素であるスティッキーコンテナの範囲で動きが制限されます。スティッキーアイテムはフロートすることでスクロール操作をしても固定されているような挙動になります。
また、スティッキーアイテムは、スティッキーコンテナ内に他の要素が存在することでフロートされることになります。
たとえばsplitView_02ページの場合、right_sideクラスが存在しなければleft_sideクラスがフロートされて動きが固定化したような感じにはなりません。
イメージとしては、固定化したい要素とそれ以外の要素をそれぞれdivタグなどで作成し、固定化したい要素にposition:sticky;を定義しつつ、作成した要素をまるっと囲む大きな要素（スティッキーコンテナ）を作ることによって、「画面幅いっぱいのフッターを登場させるスプリット」ができます。
position:sticky;の仕組みについては、以下の記事を参考にしました。
▼参考記事
ここまで、スプリットレイアウトのコーディングについて、「position:fixed;」を使った方法と「position:sticky;」を使った方法の2つを中心に紹介させていただきました。
今回は、縦に画面分割したスプリットレイアウトをコーディングしてみましたが、横や斜めに分割したデザインもあるようなので、今後はそういったものにも挑戦してみたいと思います。
