片側だけブラウザ幅に突き抜けるデザインの設定方法

こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で活用している、実用的なカスタマイズ・テクニック第5弾です！
今回は最近ブランドサイトなどでよく見る、「片側だけブラウザ幅に突き抜けるデザインの設定方法」について解説します。
特にこのデザインは、新機能のカルーセルブロックとの相性抜群！より今っぽく仕上げることができますよ。
設定できなかった方にはBiNDupのサイトデータを用意しているのでご安心を！
その他のカスタマイズ・テクニックの記事はこちらからご覧ください。

→トレンドデザインも簡単に実装できるノーコードCMSのBiNDupを30日間無料体験

基本の考え方

カルーセルブロックの場合

デフォルトでは、カルーセル（外側）の部分は、ウィンドウ幅100%で作られており、カルーセルでコンテンツ幅（ここでは1200px）よりはみ出た部分が非表示（overflow:hidden）になっています。
なので、overflowを解除してブラウザ幅100%の状態に戻します。
その上で、after要素で長方形を作成し、突き抜けたい部分とは逆の部分を覆い隠すことで、あたかも突き抜けているような見た目にするイメージです。
※ちなみに、カルーセル以外のブロックでは直接コードをゴリゴリと記述していかないと厳しそうだったので、今回はカルーセルブロックの設定方法のみご紹介させていただきます。

一般的な実装方法

ちなみに一般的には、子要素に
margin-right: calc(50% - 50vw);や、
margin-left: calc((100vw - 1200px) / 2);
を実装するような形になるようです。（1200pxは親要素のコンテンツ幅）

→トレンドデザインも簡単に実装できるノーコードCMSのBiNDupを30日間無料体験

カルーセルブロックの右側を突き抜ける方法

サンプルを見る

ブロックDressの設定方法

①カルーセルブロック>スライドエリア（外側）

はみ出し処理：はみ出し部分を表示（overflow:visible）

②カルーセルブロック>スライドエリア（外側）>before要素

幅：50%
高さ：100%
表示形式（display）：PC：ブロック、スマホ：表示しない
内容(content)：""
配置方法：絶対配置
位置：左-570px、上0px
重なり順（z-index）：1
※位置：左に入れる数値は、「コンテンツ幅に設定している半分-ブロック設定の左余白」の数字にしてください。
サンプルでは、コンテンツ幅を1200pxに設定しているので、半分の600px-30px=570pxを入れてます。

③カルーセルブロック

はみ出し処理：はみ出し部分を非表示（overflow:hidden）

BiNDUpのコンテンツ幅とは？調べ方

コンテンツ幅は、ページ設定>ページレイアウトの「ブロック内コンテンツ」の数値または、ブロック設定>ブロック背景と余白の「コンテンツ幅」の数値を指します。

カルーセルブロックの左側を突き抜ける方法

サンプルを見る

同じ設定で、
位置：右-570px、上0px
に変更するだけです。
※位置：右に入れる数値は、「コンテンツ幅に設定している半分-ブロック設定の右余白」の数字にしてください。
サンプルでは、コンテンツ幅を1200pxに設定しているので、半分の600px-30px=570pxを入れてます。

→トレンドデザインも簡単に実装できるノーコードCMSのBiNDupを30日間無料体験

まとめ

いかがでしたでしょうか？
「カラム全体をリンクにする方法」と組み合わせると、より魅力的な導線を作ることができますよ！
ぜひ試してみてくださいね！

ホームページ作成サービスのBiNDupでは、複雑なCSSやJavaScriptの記述なしで簡単にオリジナルデザインのサイトが作成できます。
今回のようなデザインアレンジされたカラムを実装しているテンプレートも沢山ありますので、まだお使いになっていない方はぜひ試してみてください。

BiNDupのテンプレートPADDLE inc.｜テンプレートのカルーセルも自由にアレンジ可能

ホームページ作成サービスBiNDupを無料で使ってみるBiNDの制作事例を見る

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDup対応）