写真だけ画面横いっぱいに広げるCSSテクニック | Pulp Note文章はwrapの中におさめつつ、写真だけ画面横サイズいっぱいに広げたい時のCSSテクニックを紹介します。テキスト用のwrapと写真用のwrapの２つを用意しなくても、同じ親要素内にまとめても写真だけサイズを変更できるので便利。写真を印象的に表現したいページに使えます。 まずはデモを用意したのでご覧ください。文章はPC画面で600px、スマホ画面で80%内におさまっていて、写真だけ横幅いっぱいに広がっています。 See the Pen Calc Margin by Kobayashi (@Pulp_Kobayashi) on CodePen. 写真も本来はPC画面で600px、スマホ画面で80%表示されるはずなのですが、写真にだけcalc()で指定することで全画面表示にすることができます。 これはテキスト部分の外側にある余白の値を計算して、写真をその分左右に広げることにより親要素の横幅を無視
