takato（@n8takato）です！
幅固定の中にある要素を横幅100％表示したい
この記事では上記の課題を解決します。
LPの制作をしていると、1つの要素だけ横幅100％で表示するようなコーディングに遭遇します。
全体の親要素に横の余白を設定していると、1つだけ100％表示するのは大変のように思えます。しかし、これらの実装は簡単に行うことが出来ます。
この記事では、幅固定の中にある1つの要素を横幅100％表示する方法を紹介します。
この記事でわかること
幅固定の中にある1つの要素だけを横幅100％表示する方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
当ブログでは他にもcssに関する内容の記事を作成してます。
cssに関する他の記事はこちら
幅固定の中で横幅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％表示する方法を紹介しました。非常に簡単に実装することが出来ます。
他にもコーディングに関する内容の記事があるので、合わせて読んでみてください。
