フーノページ



CSS、縦横比を固定

CSS、要素の縦横比を固定、
aspect-ratio。








フーノページCSS。

〽️ CSS記事のまとめです。


CSS記事のまとめページはこちら⬆︎。



syntax。 

.element {
    aspect-ratio:「「５width」」/「「５height」」;
    }


width/heightの片方からもう一方を算出。


こんにちは、「ふ」です。
今回はCSSで要素の縦横比を固定する、aspect-ratio属性について紹介します。 

<div class = "elm"></div>

.elm {
    width:200px;
    background-color:burlywood;
    }

width/heightのうち、widthだけが指定された<div>要素。ここにaspect-ratio属性を追加します。 

.elm {
    width:200px;
    background-color:burlywood;
    「「１aspect-ratio:2/1」」;
    }


すると、widthの値を元にheightの大きさを算出し、ブラウザにレイアウトされます。
値は分数形式で記述し、分母がheight、分子がwidthに採用されます。ここではwidth:200pxに対して「2/1」としたため、heightは100pxとして表示されました。

「ふ」もこの便利なaspect-ratio属性の登場を待ち焦がれていました。
どのようなメリットをもたらすのか、次にお話しします。






heightの相対値問題を解消。


aspect-ratioの最大のメリット、それは「heightの相対値問題を解消してくれる」という点にあります。



サイト上に縦横比1:1、つまり正方形の要素を配置します。
この要素を形を崩すことなく、<body>の幅に対して一定の大きさで表示させたい。
どのようにすれば良いでしょうか？ 

.elm {
    width:100px;
    height:100px;
    }

「px」などの絶対値であれば、たしかに縦横の比率は保たれます。



が、当然ながら絶対指定なので、<body>の幅が変化しても100px*100pxのままです。
<body>幅の変化に比例して大きくなったりはしてくれません。

〜では相対値による指定を試みます。これで画面幅に応じて可変することはするでしょう。


ところがwidthやheightを相対値で使用する場合、「親要素に対する割合」で結果が算出されます。そのため、親要素のwidthやheightが明示的に指定されている必要があります。



上から下へスクロールさせていく、一般的なwebページにおいて。要素を<body>直下に置いた場合。
<body>のwidthについては、先づ指定がされているかと思います。
しかしheightはどうでしょうか。<body>の高さはコンテンツの長さに左右されるので、具体的に指定されていないことが多いかと思います。
算出の基準となる親要素のheightが明示されていないため、要素のheightを相対値で指定したとしても機能してくれません💧

こう言った「heightの相対値問題」をaspect-ratio属性がすんなりと解決してくれます。 

.elm {
    width:25%;
    aspect-ratio:1/1;
}

widthを好きな大きさに決めておき、aspect-ratioを1:1に指定しましょう。
widthに対して指定した比率でheightを算出してくれます。



これにより縦横の比率をくずすことなく、画面幅に比例して要素を拡大/縮小させることができます。




aspect-ratioの性質。


実際に使用するときに困らないよう、aspect-ratio属性の性質について知っておきましょう。

aspect-ratioはwidth/heightのうち「片方の大きさを明示しておいてから指定する」というのが基本的なつかいかたです。

@1@ widthから算出。 


.elm {
    width:50%;
    aspect-ratio:2/1;
}



「height問題」解消のために、「width明示→heghtをaspect-ratioで算出」が一般的でしょう。



@2@ heightから算出。 


.elm {
    height:20em;
    aspect-ratio:2/3;
}



heightを明示してwidthをaspect-ratioで算出することもできます。



@3@ 両方明示しない場合。 


.elm {
    aspect-ratio:2/1;
}



width/heightともに明示せずaspect-ratioのみ指定した場合。 widthの初期値である「100%」からheightが算出されます。



@4@ 両方明示した場合。 


.elm {
    width:50%;
    height:20em;
    aspect-ratio:1/1;
}



さいごはwidth/heightの両方を明示し、aspect-ratioを1/1（正方形）にしてみます。
すると指定した1/1が反映されません。どうやらwidth/heightで明示した値が優先されてしまうみたいですね。


aspect-ratioが思い通りの結果になってくれないときは、この@1@〜@4@の性質について確認してみてください。 

<div class = "soto">
    <p class = "naka"></div>    
</div>

.naka {
    width:50%;
    }
    
.soto p {
    height:10em;
    }

特に⬆︎のようなケースには気をつけてください。

要素そのもののセレクタではwidthしか明示していないものの、親要素から間接的にheightも明示してしまってます。
そうなると、aspect-ratioを指定しても反映されません。




overflow:autoがおすすめ。


最後にaspect-ratioを施した要素に子要素を追加する場合について、触れておきます。 

<div class = "aspect-area">
    <p>テキスト</p>
</div>

.aspect-area {
        width:35%;
        aspect-ratio:1/1;
        border:solid 2px gray;
    }


テキスト

aspect-ratioで縦横比1:1にした要素。
そこに<p>のテキストを配置。

テキストが要素に収まる長さであれば、問題ないのですが.... 

<div class = "aspect-area">
    <p>ながいテキストながいテキストながいテキストながいテキストながいテキストながいテキストながいテキストながいテキスト</p>
</div>

ながいテキストながいテキストながいテキストながいテキストながいテキストながいテキスト

要素にテキストが収まりきらない場合、せっかくaspect-ratioで指定した領域がテキストの長さに合わせて変形してしまいます。 

.aspect-area {
        width:35%;
        aspect-ratio:1/1;
        border:solid 2px gray;
        「「１overflow:auto」」;
    }

そんなときはoverflowプロパティを調整しましょう。
「auto（要素に収まりきらない場合、スクロール表示となる）」がオススメです。



ながいテキストながいテキストながいテキストながいテキストながいテキストながいテキストながいテキスト

これで要素の縦横比を崩さずに、表示することができました。



ここまでお読みくださり、ありがとうございました。

CSSは常に進化しており、「こんなのが欲しかった！」という仕様が追加されることもあります。新たに便利なプロパティの情報を見つけたら、フーノページで紹介させていただきます。

ではまた〜 ♫



「ふ」です。

ふ

ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。