Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- chromeとsafariで崩れる原因
- 理論的な解説
- 解決策
解説動画
コードの解説
HTMLの記述
<div class="inner">
<h2 class="title">safariとchromeで違う？<br>paddingとaspect-ratioの併用</h2>
<div class="box-wrap">
<div class="box"></div>
</div>
<div class="box-wrap2">
<div class="box"></div>
</div>
</div>
CSSの記述
// ====================
// 今回のテーマ
// =====================
.box-wrap {
border: 1px solid blue;
background: #9ef3f7a1;
margin: auto;
margin-bottom: 40px;
width: 300px;
height: auto;
aspect-ratio: 300 / 450;
padding: 50px 10px;
}
.box {
width: 100%;
height: 100%;
background: #f84242;
}
.box-wrap2 {
border: 1px solid blue;
background: #9ef3f7a1;
margin: auto;
margin-bottom: 40px;
width: 300px;
height: 450px;
padding: 50px 10px;
}
ポイント/手順
- chrome: 余白を入れた分で比率を取る
▶️青い部分の比が 300 : 450 - safari: 余白を入れずに比率を取る
▶︎赤い部分の比が 300 : 450
下記画像のようになります！
解決策
height: auto; にぜずに高さを指定する！
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog