はじめに
この実験では、幅の異なる要素に対して一定の幅高比を作成する方法を探ります。::before
疑似要素にpadding-top
プロパティを使用することで、要素の高さが幅に比例したままであることを確認できます。この手法を使うと、応答性のある正方形や特定のアスペクト比を持つ他の形状を作成できます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、幅の異なる要素に対して一定の幅高比を作成する方法を探ります。::before
疑似要素にpadding-top
プロパティを使用することで、要素の高さが幅に比例したままであることを確認できます。この手法を使うと、応答性のある正方形や特定のアスペクト比を持つ他の形状を作成できます。
VM内には既にindex.html
とstyle.css
が用意されています。
このコードスニペットは、幅が変化する要素が比例した高さ値を維持するようにします。これを達成するには、::before
疑似要素にpadding-top
を適用して、要素の高さを幅のパーセンテージに等しくします。高さと幅の比率は必要に応じて変更できます。たとえば、padding-top
を100%
にすると、1:1の比率の応答性のある正方形が作成されます。このコードを使用するには、次のHTMLコードを追加するだけです。
<div class="constant-width-to-height-ratio"></div>
次に、次のCSSコードを追加します。
.constant-width-to-height-ratio {
background: #9c27b0;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: "";
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: "";
display: block;
clear: both;
}
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
おめでとうございます!一定の幅高比の実験を完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。