Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 100vwと100%の関係 (違い)
- innerから片側だけはみ出すには幅をどのように設定したら良いか
解説動画
100vwと100%について
100vw : 画面の横幅全体 [ ピンク ]
100% : 親要素に対する横幅全体 [ 青 ]
( 今回は inner の 両サイドにpadding 40px を入れています。 )
(100vw - 100%) / 2 とは？
100vw - 100% が表しているのは [ ピンク ] - [ 青 ] なので、100% [ 青 ] の両サイドの余白を表しています。
そして、それを２で割ると片側の余白になります。
そして、そこから片側の padding 40px だけ引き算すると、innerの外 片側分 ( 緑 ) になります！
右側だけはみ出ている部分 [ 黒 ] を作るには？
[ 黒 ] = [ 赤 ] + [ 緑 ] なので
[ 黒 ] = 100% + 40px + ( 100vw - 100% ) / 2 - 40px
= 100% + ( 100vw - 100% ) / 2
になります！
左側だけはみ出ている部分 [ 紫 ] を作るには？
幅は [ 黒 ] と同じになります。
そして、左に寄せたいので、margin-left の値を負にして左に寄せていきます！
左に寄せる分は、[ 緑 ] + 40px なので
margin-left: ( 100vw - 100% ) / 2 * -1 を設定すれば左端に寄せることができます！
コードはこちら
.test-box0 {
margin-bottom: 0;
background: rgba(pink, 0.2);
width: 100vw;
}
.test-box1 {
background: rgba(blue, 0.2);
width: 100%;
}
.test-box2 {
background: rgba(red, 0.2);
width: calc(100% + 40px);
}
.test-box3 {
background: rgba(green, 0.2);
margin-left: calc(100% + 40px);
width: calc((100vw - 100%) / 2 - 40px);
}
@media screen and (max-width: 600px) {
.test-box3 {
display: none;
}
}
.test-box4 {
background: rgba(black, 0.2);
width: calc(100% + (100vw - 100%) / 2);
}
.test-box5 {
background: rgba(purple, 0.2);
width: calc(100% + (100vw - 100%) / 2);
margin-left: calc((100vw - 100%) / 2 * -1);
}Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog