見出し画像

【code】親の指定した幅を子要素が画面いっぱいに広がりたい

みなさんこんにちは!いつもいいね♡励みになります!

まだまだ暑いですね。
雲が、まだまだやる気に満ちた夏雲なんですよね、、、☁️☁️
いいんだよ〜。太陽さんもういいんだよ〜。( ´ ▽ ` )な気持ちで汗だくで通勤しております。
寒い寒いって言いながらぬくぬくのお布団が恋しいです。カモン冬!!!!

今回は、containerで決めた横の幅に対して簡単に幅を突き破れるおすすめの方法です。
デザインの幅も広がるので登場シーンは多いと思います✨

まずなぜ幅を設定するの?

デザインをしていく上でも、最初に幅を決めておいて作っていくことが多いと思います。
このnoteだって両サイドに幅が設けられています。
あるかないかで見やすさも全然変わりますし、結構登場シーンは多いのです。
私もコーディング、デザインをしていく上で、幅があるかないだけでなんか野暮ったさがでたり出なかったりするので難しいところです。

幅をうまく使えるコーダー・デザイナーになることも私の課題です。
いいな〜とおもうサイトはほんとに幅が絶妙✨
コンテンツがシンプルでもボリューミーでも幅次第で全然違う。。。。。

話がそれそうなので戻ります。ッシュ💨

幅を持つ要素とない要素を見比べよう

下の例の、【黄色い部分】が指定されているpaddingです。

指定されたpadding内に要素が収まってる

要素が画面いっぱいに広がらないので、スッキリして見えていいですね!
あーよく見るやつー!!がこのパターンです。

だけど、たまには画面幅いっぱいに要素を広げたい時だってあります。

要素が横いっぱいに広がってる

最初の指定の、common.css(共通css)などに幅の指定を書くパターンが多いです。
これによって全ての要素がこの中に入ってしまいます。
では、広げたい要素が指定幅より広がるにはどうしたらいいでしょう?


どうやって指定された幅を突き破る?

これを防ぐ方法はたくさんあると思いますが、私がよく使う方法です。
たくさんやり方はあるのですがよく使う3つを紹介します。

⭐️パターン1

クラス名にcontainerなどの指定をいれて、入れたり、入れなかったりを繰り返します。

【CSSに指定を書く】

 
.container { 
padding: 0 16px; 
margin: 0 auto; 
}

【クラス内にcontainerの指定をかいたり書かなかったり】

<div class="container">
  <p>コンテナ内に要素が収まる</p>
</div>

<div>
  <p>画面幅いっぱいに広がる</p>
</div>

<div class="container">
  <p>コンテナ内に要素が収まる</p>
</div>

この場合、何回も何回もcontainerの指定を書かないといけないのでちょっとめんどくさい。。。。
基本的に指定幅内に収めるようなデザインならこの部分だけでいいのに、、とか思います。
プロゲートの中級編とかだったかな?たぶん毎回指定してたような気がする。めんどくさがりな私は、『またいれるのか?』とブツブツ言っておりましたぁ。


⭐️パターン2

次からはこの部分だけ画面いっぱい広げたいパターンです。
共通部分に幅はあらかじめ指定されています。

<div>
  <p>コンテナ内に要素が収まる</p>
</div>

<div class="wide-space">
  <p>画面幅いっぱいに広がる</p>
</div>

<div >
  <p>コンテナ内に要素が収まる</p>
</div>

真ん中のwide-spaceに対してだけ幅をちぎってしまいましょう!

.wide-space {
overflow: hidden;
width: calc(100% + 32px);
margin-left: -16px;
}

コンテンツ幅左右、16pxに対して、
・overflow: hidden; 要素が意図せずに広がらないようにする
・width: calc(100% + 32px); コンテンツ幅16px✖️2が右にずれる。
デフォで左を基準にしているので、
・margin-left: -16px; 左の幅を16px戻す。

32pxは16pxが両サイドで✖️2なので100%の画面幅に対してプラスされています。
右にぐわっと32px千切ってから16px左に戻ってる感じです。
要素に「余分な幅」を与えています。

⭐️パターン3

同じように一箇所だけ画面幅を広げたいパターンです。
htmlの内容は同じとして考えます。

.wide-space {
width: 100vw;
margin: 0 calc(50% - 50vw); 
}

さっきの考えに似ていますが、
width: 100vw;でウインドウの画面幅全体に広げます。
marginで幅をちぎっています。縦幅は0、横幅はcalcで計算しています。
50% (親要素)- 50vw(画面幅)=0 になります。

先ほどとの違いで、overflow: hidden;がないのはwidth: 100vw;で画面幅いっぱいカバーをしているので必要がなくなりました。
必要性は、子要素が親要素のサイズを超えてはみ出すかどうかでいるか入らないかを決めてください。


どのパターンがいいかは、その時の状況によって異なりますが簡単に幅はかえれるのでデザインとコードの可能性の幅を広げれますね✨✨

デザインとコードの可能性の幅を広げれますね!!!!✨✨

(2回言ったぁあああああああああああああああああああああ!!!!!)


読んでいただきありがとうございます。
好き♡フォロー励みになります。結構喜んでます!!!
Twitter Xでも動画でコード紹介などしてます。

DMにてお仕事も受け付けておりますので、コーディングだけ、デザインだけでも可能です。是非ご相談ください。



いいなと思ったら応援しよう!