部分的に全画面表示にするには『calc』が便利

この親要素の横幅はPC画面で800px、スマホ画面で80%です。テキスト部分は親要素と同じ横幅なのですが、写真は全画面表示になっております。

写真も本来はPC画面で800px、スマホ画面で80%表示されるはずなのですが、calc()を使うことで全画面表示にすることが出来ます。写真を印象的に表現したいページに使えますね。

これは、テキスト部分の外側にある余白の値を計算して、写真をその分左右に広げることにより全画面表示をしてます。

文章の横半分の値を『50％』で、全画面の横半分の値を『50vw』で出すことができるので、それらを使って文章横にある余白の値をcalc()で計算します。

計算式は、calc((50vw - 50%)* -1)

『-1』をかけているのはネガティブマージンを値を出して、その値で写真を左右に広げるから。仮にテキスト部分の外側にある余白が左右それぞれ200pxだとしたら、marginの左右の値を『-200px』にすることで画像部分の要素が左右に200px分ずつ広がります。

そのため『-1』をかけてネガティブマージンにしてます。

それを簡略化させるため、実際の記述は『calc(50% - 50vw)』にして-1を掛けなくてもネガティブマージンの値を求められるようにします。

この部分的な全画面表示は写真や画像だけではなく、さまざまな要素に適用することができます。