CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。

基本の考え方：padding-topを使った手法

最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。

例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方形（1:1）なら「100%」となります。

実装例：4:3のアスペクト比を維持する

以下のコードは、ウィンドウ幅に応じて常に4:3の比率を保つボックスを作成する例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .aspectContainer {
        background-color: rgb(191, 66, 216);
        position: relative;
        width: 100%;
        padding-top: 75%;
    }
    .aspectText {
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        font-size: 20px;
        color: white;
    }
</style>
</head>
<body>
<h1>Aspect ratio example</h1>
<div class="aspectContainer">
<div class="aspectText">4:3 Aspect ratio</div>
</div>
<h2>Resize the window to see 4:3 aspect ratio in action</h2>
</body>
</html>

コードのポイント解説

  • .aspectContainer：position: relative を指定し、絶対配置の基準となるコンテナを作成します。
  • padding-top: 75%：幅に対して高さが常に75%になるよう設定し、4:3の比率を実現します。
  • .aspectText：position: absolute で上下左右を0に指定することで、コンテナ全体に文字を中央表示します。

出力結果

上記のコードを実行すると、次のような表示になります。

CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

ウィンドウをリサイズすると、要素は常に4:3の比率を保ちながら拡大・縮小します。

CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

モダンな代替手段：aspect-ratioプロパティ

2021年以降の主要ブラウザでは、よりシンプルに記述できるaspect-ratioプロパティが利用可能です。

.aspectContainer {
    background-color: rgb(191, 66, 216);
    aspect-ratio: 4 / 3;
}

このプロパティを使えば、positionやpaddingを組み合わせたハックに頼ることなく、直感的にアスペクト比を指定できます。新規プロジェクトでは、ブラウザ対応状況を確認したうえでこちらの採用を検討するとよいでしょう。

  1. CSSでcontenteditable要素の境界線（枠線）を削除する方法

    HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。コード例<!DOCTYPE html> <html> <head> <st

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進