【css】幅固定の中で横幅100%に表示する簡単な方法を紹介します!

【css】幅固定の中で横幅100%に表示する簡単な方法を紹介します!

takato(@n8takato)です!

幅固定の中にある要素を横幅100%表示したい

この記事では上記の課題を解決します。

LPの制作をしていると、1つの要素だけ横幅100%で表示するようなコーディングに遭遇します。

全体の親要素に横の余白を設定していると、1つだけ100%表示するのは大変のように思えます。しかし、これらの実装は簡単に行うことが出来ます。

この記事では、幅固定の中にある1つの要素を横幅100%表示する方法を紹介します。

この記事でわかること

幅固定の中にある1つの要素だけを横幅100%表示する方法

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

当ブログでは他にもcssに関する内容の記事を作成してます。

cssに関する他の記事はこちら

あわせて読みたい
【簡単】cssで文字がキラッと光るアニメーションの作り方を紹介! cssで文字をキラッと光らせるアニメーションを作りたい この記事は上記の悩みに向けて作成しています。 一定の間隔で文字をキラッと光らせるアニメーションがあります。...
あわせて読みたい
display:flex;で要素を左右反対に表示する方法を紹介! 横並びにした要素を左右反対にしたい。でもHTMLで修正するのは面倒くさい。cssだけでdisplay:flex;の要素を左右反対にする方法を知りたい。 この記事では上記の課題を解...
目次

幅固定の中で横幅100%表示する方法

幅固定の中の要素を横幅100%表示する方法を紹介します。

デモ

See the Pen 幅固定の中の要素を横幅100%表示 by takato (@ttakkatto) on CodePen.

上記のデモは、要素全てに「margin:0px 10vw;」という横の余白を作る設定をしています。

しかし、その設定の中でも2枚目の写真は横幅100%で表示されています。

幅固定の中で横幅100%表示するコード

上記のコードを紹介します。

HTMLコード

<head>
</head>

<body>  
  <div class="articl">    
    <div class="img01">
      <img src="https://drive.google.com/uc?export=view&id=1vHWo1dIZWhHi9SvsqbQaou5rYOWltqUC">      
    </div>    
    <div class="img02">
      <img src="https://drive.google.com/uc?export=view&id=1vHWo1dIZWhHi9SvsqbQaou5rYOWltqUC">      
    </div>    
  </div>  
</body>

cssコード

.articl {
  margin:0px 10vw;
}

.img01 {
  margin:5vw 0px;
}

.img01 img {
  width:100%;
}

.img02 {
  margin:5vw 0px;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.img02 img {
  width:100%;
}

横幅100%に必要なコード

幅固定の中の要素を横幅100%表示するには、親要素に下記のコードを追加することで実装出来ます。

margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);

先ほどのコードの場合、2枚目の画像の親要素である「img02」というクラスに上記のコードを追加しております。

画像の親要素に上記のコードを追加することで、幅固定の中でも横幅100%表示することが出来るのです。

応用編

幅固定のデザインの中で、左右のどちらかだけあえてはみ出してあるデザインもあります。

下記のようなイメージです。

See the Pen 幅固定の中の要素を横幅100%表示 応用 by takato (@ttakkatto) on CodePen.

2枚目は左にはみ出してあり、3枚目は右にはみ出しています。

「margin-left: calc(-50vw + 50%);」と「margin-right: calc(-50vw + 50%);」のどちらかを使用するだけで、ズラしたデザインを実装することも出来ます。

最後に

この記事では、幅固定の中の要素を横幅100%表示する方法を紹介しました。非常に簡単に実装することが出来ます。

他にもコーディングに関する内容の記事があるので、合わせて読んでみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次