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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35183{{"一定の幅高比"}} css/colors -.-> lab-35183{{"一定の幅高比"}} css/width_and_height -.-> lab-35183{{"一定の幅高比"}} css/display_property -.-> lab-35183{{"一定の幅高比"}} css/backgrounds -.-> lab-35183{{"一定の幅高比"}} css/pseudo_elements -.-> lab-35183{{"一定の幅高比"}} end

一定の幅高比

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