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

CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

Webページに動画や画像を埋め込む際、ウィンドウサイズが変わってもレイアウトが崩れないようにアスペクト比（縦横比）を維持したい場面は多くあります。実は、CSSのpaddingプロパティにパーセンテージ値を指定するだけで、要素のアスペクト比を簡単に維持できます。

このテクニックが機能する理由は、paddingにパーセンテージを指定した場合、その基準が親要素の「幅」になるという仕様によるものです。つまり、幅に応じて高さも連動して変化するため、縦横比が保たれるのです。

使用できるpaddingプロパティ

  • padding-bottom：要素の下側の余白（パディング）を指定します。

  • padding-top：要素の上側のパディングを指定します。

  • padding-left：要素の左側のパディングを指定します。

  • padding-right：要素の右側のパディングを指定します。

  • padding：上記4つのプロパティを一括で指定できるショートハンド（省略形）です。

主要なアスペクト比とpadding値の対応

アスペクト比padding-top / padding-bottom の値
1:1（正方形）100%
4:375%
16:9（HD動画）56.25%
21:9（シネマスコープ）42.85%

サンプルコード①：正方形（1:1）のボックス

次の例では、padding-topに「100%」を指定することで、常に1:1の正方形を維持するdiv要素を作成しています。内側のコンテンツは絶対配置（position: absolute）で重ねています。

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    padding-top: 100%;
    box-shadow: 0 0 24px steelblue;
    position: relative;
    width: 100%;
}
div > div {
    margin: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
</style>
</head>
<body>
<p>以下のdiv要素をご覧ください</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html>

出力結果①

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

CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

ポイントは、ブラウザのウィンドウをリサイズしても、要素のアスペクト比が常に1:1に保たれることです。

CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

サンプルコード②：YouTube動画を16:9で埋め込む

動画埋め込みでよく使われる16:9の比率を実現するには、padding-topに「56.25%」を指定します。iframeを絶対配置でコンテナいっぱいに広げることで、レスポンシブな動画プレイヤーが完成します。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 10%;
    padding-top: 56.25%;
    height: 0px;
    position: relative;
    box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>

出力結果②

このコードを実行すると、画面幅に応じて拡大・縮小しながら、常に16:9の比率を維持した動画プレイヤーが表示されます。

CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

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

近年のブラウザでは、CSSのaspect-ratioプロパティを使うことで、paddingハックを使わずにより直感的にアスペクト比を指定できます。

/* 例：16:9の比率を指定 */
.video-container {
    aspect-ratio: 16 / 9;
}

古いブラウザへの対応が必要な場合はpadding方式が有効ですが、新規プロジェクトではaspect-ratioの利用を検討すると、よりシンプルで可読性の高いコードになります。

まとめ

paddingにパーセンテージを指定するテクニックを使えば、追加のJavaScript不要で、要素や動画のアスペクト比を簡単に維持できます。特にYouTubeなどの動画をレスポンシブに埋め込む際には定番の手法なので、ぜひマスターしておきましょう。

  1. CSSのallプロパティですべてのスタイルをリセットする方法

    CSSには、要素に適用されたすべてのプロパティを一括でリセットできる便利なallプロパティが用意されています。個別のプロパティをひとつずつ上書きする必要がなく、スタイルの一括初期化や継承制御を簡単に行えます。 allプロパティに指定できる値 allプロパティには、主に以下の3つの値を設定できます。 initial: すべてのプロパティをCSS仕様で定められた初期値に戻します。 inherit: すべてのプロパティを親要素から継承します。 unset: 継承可能なプロパティは親から継承し、継承できないプロパティは初期値にリセットします。 実装例 以下のコードでは、#demo要素に対してall

  2. CSSで各辺のパディングを個別に指定する方法

    CSSでは、要素の各辺に対して個別にパディング（内側の余白）を設定できます。padding-top、padding-right、padding-bottom、padding-left の各プロパティを使うと、それぞれ上・右・下・左のパディングを個別に定義できます。さらに、ショートハンドプロパティである padding を使用すれば、値を「上 → 右 → 下 → 左」の時計回りの順序で指定するだけで、同じ結果をより簡潔に実現できます。構文CSSのパディング関連プロパティの基本的な書式は以下の通りです。Selector {    padding-top: /*値*/