レスポンシブ対応！縦に半分割しているWebサイトの作り方
画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。
縦に半分割しているWebサイトを作ってみよう！
Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。
幅の狭いデバイスで見るとカラムが縦並びに変更されます。
今回はこのように、モバイルデバイスで見ると縦並び、デスクトップで見ると縦に半分割して横並びになっているレイアウトを実装してみます！
1. HTMLにコンテンツを記述
まずはHTMLでコンテンツを入れていきます。各コンテンツを .wapper で覆っておくと、縦並びにしたり、横並びにしたりという実装がCSSで簡単操作にできちゃいます。
HTML
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <div class="wrapper"> <div class="column cat1"> <div class="info"> <h2>アラン</h2> <p>(ローラン)</p> <a href="#">プロフィール</a> </div> </div> <div class="column cat2"> <div class="info"> <h2>アステア</h2> <p>(ラダトーム)</p> <a href="#">プロフィール</a> </div> </div></div> |
2. モバイルデバイスで表示させる
CSSでレイアウトを組み立てます。各コンテンツの div の幅を100%とし、縦幅には vh という単位を使います。vh とは viewport height の略。100vh に設定すると、デバイスのサイズにかかわらず見ているスクリーンの高さいっぱいに背景画像を表示できます。また、縦横ともに背景画像を広げて表示したいので、background-size: cover; も使いました。
CSS
01 02 03 04 05 06 07 08 09 10 11 12 | .column { height: 100vh; width: 100%;}.cat1 { background: url(images/cat1.jpg) no-repeat top center; background-size: cover;}.cat2 { background: url(images/cat2.jpg) no-repeat center center; background-size: cover;} |
するとモバイルデバイスではこんな感じに表示されます。縦に並んでいますね。
3. 大きいサイズのデバイスでは縦半分割に表示させる
CSSのMedia Queriesという技術を使ってモバイル版ではカラムを落として表示していたものを、「min-width: 500px（横幅が500pxよりも大きい場合）」、Flexboxを使って縦で半分割して横並びにする、という指定をします。2つのコンテンツを囲っていた .wrapper に対して display: flex; を追加するだけ！Flexboxの基本的な使い方については過去記事「これからのCSSレイアウトはFlexboxで決まり！」をご参照ください！
CSS
1 2 3 4 5 | @media all and (min-width: 500px) { .wrapper { display: flex; }} |
完成！
すべてのコードは「HTML」「CSS」タブをクリックして閲覧してください。デモ画面を表示してページ幅を変更しながら、レスポンシブ対応の具合もチェックしてくださいね。
縦分割しているWebサイトいろいろ
流行りもあってか、いろんなサイトで縦分割のサイトが使われています。デザインの参考にしてみてください。
David Robert
2つのプランを同時に見せたい時や、商品写真と解説を分けて表示したいときなど、縦の半分割を使えば表現できるデザインの幅が広がりますね。モバイルデバイスでの見え方にも注意しながら、効果的に使っていきましょう！
