一定の幅高比：応答型デザイン技術

はじめに

この実験では、幅の異なる要素に対して一定の幅高比を作成する方法を探ります。::before疑似要素にpadding-topプロパティを使用することで、要素の高さが幅に比例したままであることを確認できます。この手法を使うと、応答性のある正方形や特定のアスペクト比を持つ他の形状を作成できます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 97%です。学習者から 100% の好評価を得ています。

一定の幅高比

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 でさらに多くの実験を行って練習してください。