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

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

takato(@n8takato)です!

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

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

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

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

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

この記事でわかること

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

この記事を書いた人

  • 26歳
  • 男性
  • 都内制作会社に勤めるwebデザイナー
  • 法人営業職→未経験でwebデザイナーに転職

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

cssに関する内容の記事

TAKATO BLOG
display:flex;で要素を左右反対に表示する方法を紹介! display:flex;で横並びにした要素を左右反対に表示するには、「flex-flow: row-reverse;」を追加することで出来ます。
あわせて読みたい
【簡単】cssで文字がキラッと光るアニメーションの作り方を紹介! cssで文字をキラッと光らせるアニメーションを作りたい この記事では上記の悩みを解決します。 webサイトの構築をしていると、一定の間隔で文字をキラッと光らせて欲し...
あわせて読みたい
【css】幅固定の中で横幅100%に表示する簡単な方法を紹介します! 幅固定の中にある要素を横幅100%表示したい この記事では上記の課題を解決します。 LPの制作をしていると、1つの要素だけ横幅100%で表示するようなコーディングに遭遇...
目次

幅固定の中で横幅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をコピーしました!
目次
閉じる