STUDIOで要素の片側だけをブラウザ端まで広げる方法を紹介します。

以前はネガティブマージンを使って実装していましたが、レスポンシブに対応できないという課題がありました。今回はネガティブマージンを使用せず、レスポンシブにも対応した方法です（カスタムコード不使用）。

完成イメージは以下のとおりです。

テキストと画像を横並びにしたボックスを配置して画像のみ端に広げていく形も可能です。

パターン①：シンプルに画像を右端まで広げる方法

今回は以下の条件と仮定して説明します。

前提条件： コンテンツ幅は700px／他のコンテンツと左端を揃えたまま画像の右側だけブラウザ端まで広げる

▲ 全体の設計図

ボックス（＝親ボックス）を作成し、その中に3つのボックスを入れます。親ボックスは横幅100%、縦幅は任意の値（ここの数値が画像の縦幅になります）、配置は「中央」、方向を「→」にします。

中に入れたボックスは、左から順に「位置調整ボックス（左）」「画像」「位置調整ボックス（右）」とします。

それぞれの設定は以下の通りです。

位置調整ボックス（左）：横幅100%、縦幅0px、塗りは念のため透明

右側だけ端まで広げたい画像：横幅、縦幅ともに100%

位置調整ボックス（右）：横幅700px、縦幅0px、塗りは念のため透明 ここの横幅はコンテンツ幅と同じ値にします。

これで左端は揃った状態で、右側だけ端まで広がった状態になるはずです。

つぎに、レスポンシブに対応するために左側に余白を設定していきます。ここでは24pxの余白を取ると仮定し、全体を囲っている親ボックスの左側に24pxのパディングを設定します。

そうすると、さっきまで左端が揃っていた画像が他のコンテンツの左端よりも24px分右側に移動します。これを左側に戻すためには右側にも余白を設定する必要がありますが、ここで親ボックスの右側にパディングで24pxを設定すると画面幅が狭くなったときに右側に24pxの余白が生まれてしまいます。

これを避けるために右側の位置調整ボックスにマージンで24pxを設定します。そうすることで画像の位置を左に24px分戻しながらも、画面幅が狭くなっても余白が入らない状態にできます。

余白の付け方についてまとめると

  • 左側の余白は親ボックスにパディングで設定
  • 右側の余白は位置調整ボックス（右）にマージンで設定

となります。

パターン②：テキストと画像を並べて表示し、右側の画像だけを端まで広げる方法

こちらのパターンは先ほどの応用になります。テキストが入ったことで画面幅の変化に従って縦幅が変わることになりますので、親ボックスの縦幅をpxで指定することができずautoにする必要がでてきます。

ただ、親ボックスの縦幅をautoにすると中の画像に設定している縦幅100%が機能しなくなり、画像が表示されなくなるはずです。

かといって、中の画像の縦幅をpxで指定するとテキストボックスの縦幅が長くなったときに、テキストボックスの縦幅と横の画像の縦幅が一致しないという問題が生じてしまいます。

この問題はつぎの手順で対処することができます。

  • Boxモードの画像をグループ化して親ボックスを生成
  • その親ボックスは1flex、縦幅autoにします
  • 中にimgモードの画像を追加（この画像は基本的に何でもよいはずですが、検証では正方形の画像を入れました）
  • 正方形画像は横幅0px、縦幅100%に設定
  • Boxモードで配置していた画像を絶対位置にして、上下左右0pxで配置
  • テキストボックス側は普段通りの設定で縦幅はauto、横幅はデザインに応じて調整してください

レイヤー構造は以下のとおりです。

▲ 説明用に横幅、縦幅の数値を名称として入力しています。

これで画面幅が狭くなった際に、テキストの行数が増え縦幅が長くなっても、それに合わせて右側の画像の縦幅も変化するようになります。

パターン③：塗りを端まで伸ばして中のテキストボックスを固定幅で配置

これまでの方法を少しアレンジして、塗りを端まで伸ばして中のテキストボックスを固定幅で配置することもできます。

コンテンツを入れる100%,autoのボックスに塗りを設定し、中にテキストボックスと左側の塗り足し用のボックスを入れます。

テキストボックスの横幅は固定幅（ここでは700px）で、縦幅はauto、右側にマージンで余白を設定しておきます（ここでは24px）。

左側の塗り足しに関してはデザイン次第で色々なパターンや実装方法があると思いますが、ここでは絶対位置でコンテンツ親ボックスの外側にくるように配置しています。

注意点：横スクロールのボックスは途中までしか表示できないため非推奨

たとえば横スクロールのボックスにブログ記事などを入れて、それを右端まで伸ばしたいということがあると思いますが、今回の方法では右端まで伸ばすボックスが画面外まではみ出ているため、横スクロールしてもすべてのアイテムが出てこないという現象が起こってしまいます。

ただ、カルーセルであればループするという仕様で上記の問題を回避することができますので、横スクロールは使わずにカルーセルをおすすめします。

テキストと横並びにしない下記のような形ももちろん可能です。

まとめ

今回は左端を揃えて右側は広げるパターンを例にご紹介しましたが、位置調整ボックスの配置やマージン、パディングの付け方をすべて逆にすれば、右端を揃えて左側は広げるレイアウトも可能です。

片側だけをブラウザ端まで広げるデザインはよく見かけるので、ぜひ活用いただければと思います。