本記事では、CSSを使って親要素よりも子要素の幅を広げる方法について解説します。
このテクニックを覚えることで、わざわざ親要素から外して幅を指定する必要がなくなりコードがシンプルで見やすくなります。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
変数名/関数名にもう悩まない!
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
完成形を確認しよう
完成形の形を見ることで理解しやすくなるので、実際に親要素よりも子要素の幅を広げた実行結果を一度確認しましょう。
HTMLとCSSでサンプルコードを作成する
HTMLとCSSを使って、子要素の幅を広げるためのサンプルコードを作成します。このサンプルコードは以降の解説で使用します。
<div class="sample">
<p>親要素</p>
<div class="sample__content">
<p>子要素</p>
</div>
<p>親要素</p>
</div>
.sample{
max-width:500px;
margin:0 auto;
background:#000;
color:#fff;
text-align:center;
}
.sample__content{
background:#00f;
}
サンプルコードを適用させた表示は以下のとおりです。
親要素よりも子要素の幅を広げるCSSの書き方
作成したサンプルコードの.sample__contentに以下のCSSを適用させます。
.sample__content{
width:100vw;
margin:0 calc(50% - 50vw);
}
すると、子要素の幅が画面いっぱいに表示されていることが確認できます。
親要素よりも子要素の幅を広げるには「width:100vw」と「margin:0 calc(50% – 50vw)」の2つを適用させれば良いのです。とても簡単ですね。
では、何故この2つのCSSを適用させると子要素の幅が画面いっぱいに広がるのか、その理由について解説していきます。
width:100vw
vwという値を初めて知ったという人のために軽く説明すると、vwとはビューポート(ウィンドウサイズ)の幅を表し1vwでウィンドウサイズの1%の大きさになります。
つまり今回指定している100vwとは、ウィンドウサイズいっぱいの値ということになります。
width:100vwのみを指定した場合の表示は以下の通りです。
見た目はウィンドウサイズの半分しか子要素の幅がないように見えますが、ウィンドウの右側に表示しきれない幅(50vw – 親要素の幅)が突き出ています。
margin:0 calc(50% – 50vw)
ここは少しイメージが付きにくいポイントなので、50%と50vwの値を設定する理由について解説します。
まず始めに50%ですが、これは親要素の50%(半分)の幅をずらすために指定します。
親要素の50%の幅をずらしたことで、丁度子要素の幅がウィンドウサイズの半分になりました。ここで、50vw分の幅を引いてあげることにより、右側にずれていた子要素がウィンドウの右側ぴったりにハマります。
つまり、margin:0 calc(50% – 50vw)では、width:100vwを適用した時に右側にずれているものをウィンドウサイズに丁度収まるように調整しています。
子要素の幅を画面いっぱいではなく固定値にしたい場合
今までの説明は子要素の幅をウィンドウサイズいっぱいに広げる方法でしたが、子要素の幅を固定値にしたい場合の設定方法についても解説します。
.sample__content{
max-width:600px;
margin:0 -50px;
}
ここでのポイントは、親要素の幅と子要素の幅の差を見ることです。
今回の例では、親要素の幅が500pxで子要素の幅を600pxに設定しました。この場合、親要素と子要素の幅の差100pxを2で割りmarginの左右に指定します。