はじめに
この実験では、幅の異なる要素に対して一定の幅高比を作成する方法を探ります。::before
疑似要素にpadding-top
プロパティを使用することで、要素の高さが幅に比例したままであることを確認できます。この手法を使うと、応答性のある正方形や特定のアスペクト比を持つ他の形状を作成できます。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"])
css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"])
css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"])
css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"])
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