株式会社リースエンタープライズ 大阪南森町発、最強のホームページ制作集団

【CSSテクニック】ブロック要素の比率を維持しながら可変し、文字も可変させる方法

【CSSテクニック】ブロック要素の比率を維持しながら可変し、文字も可変させる方法

皆さんこんにちは、チーフデザイナーの塩谷です。

本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。

高さ不明のブロック要素の比率を維持させる方法

レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。

画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。

高さ不明のブロック要素の比率をレスポンシブで維持させる方法

【NG例】通常のレスポンシブ対応方法例

通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。

具体的な例がこちら。

ブラウザのウィンドウサイズをグイングイン動かしてみてください。

サンプルへ

一応コードはこちらから確認頂けます。

<div class="adjust-box">
<p>ブロック要素の中身です。ブロック要素自体は可変でサイズ変更されますが、ブロック要素の高さは、文章に依存して比率を保持していません。</p>
</div>
.adjust-box {
    width:100%;
    background:#EEE;
    padding:15px;
    -webkit- box-sizing:border-box;
    box-sizing:border-box;
}

.adjust-box p {
    font-size:24px;
    line-height:1.5em;
}

【完璧例】比率を維持しながら文字サイズも可変する対応方法

こちらが完璧な可変対応方法です。

ひとつブロック要素を入れ子にする必要がありますが、ウィンドウサイズに合わせてブロック要素も中に記入されたテキストまでも可変することが確認頂けます。

サンプルはこちら

サンプルへ

コードは下記のような感じです。

コピペで使ってもらえると思いますよ。

<div class="adjust-box box-1x1">
    <div class="inner">
        <p>ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。</p>
    </div>
</div>
.adjust-box {
    position: relative;
    width: 50%;
    height: auto;
    background: #EEE;
}
.box-1x1:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
.adjust-box p {
    font-size:1.25vw;
    line-height:1.5em;
}

可変ブロックと可変テキストの簡単なCSS解説

何故高さ方向も比率が維持されるのか?

CSSは、高さ方向にpaddingを%で指定した場合、基準値をwidth(100%)から取得する性質があります。

要するに、widthの値が変化すると、paddingの値も同じ量だけ変化するということ。

それを利用することで、widthが可変した時に、高さ方法のpaddingも一緒に移動するというギミックですね。

CSSの「高さpadding」の性質を知っていれば案外簡単です。

ということは、今回正方形(1:1)の比率固定での可変でしたが、別の比率も簡単に作ることが出来るということです。

後でサンプルがあるので、そちらも参考にしてください。

文字サイズがブロック要素と合わせて可変する理由

一般的にCSS上でサイズ指定する場合、px、%、em、remなどを使用すると思いますが、実は結構前からvw、vhという単位も使えるのです。

ビューポートからサイズを指定できる単位で、

vw ビューポートの幅に対する割合
vh ビューポートの高さに対する割合

を指定できます。

Width=”100vw”、height=”100vh”を指定すれば、画面一杯に表示されるという具合です。

これを利用して、フォントサイズをvwで指定します。

1920pxの画面をmax値とした場合、24pxのフォントサイズで指定したい場合の計算式は下記の通りです。

24px÷1920px=0.0125 これを比率に直して1.25vw

このように指定すると、ウィンドウサイズから値を取得して、常に同じ比率の文字サイズで表示させることが可能になるのです。

レスポンシブ対応などで結構使えるので是非活用してみてください。

ただ、android4.4からの対応なので、スマホではまだ使えないかも……

1:1以外の比率固定でも可変させてみよう!

<!-- 2:1 -->
<div class="adjust-box box-2x1">
    <div class="inner">
        <p>ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。</p>
    </div>
</div>

<!-- 1:2 -->
<div class="adjust-box box-1x2">
    <div class="inner">
        <p>ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。</p>
    </div>
</div>

<!-- 4:3 -->
<div class="adjust-box box-4x3">
    <div class="inner">
        <p>ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。</p>
    </div>
</div>
.box-2x1:before {
    content: "";
    display: block;
    padding-top: 50%; /* 2:1 */
}
.box-1x2:before {
    content: "";
    display: block;
    padding-top: 200%; /* 1:2 */
}
.box-4x3:before {
    content: "";
    display: block;
    padding-top: 75%; /* 4:3 */
}

もう賢い人は気づいたと思いますが、

高さ比率÷幅比率×100の計算式で、padding-topの値を出せば比率固定させることが出来るというわけです。

16:9の場合は、
9÷16×100=56.25%という具合ですね。

まとめ

これをさらに高さ方向にセンタリング(中央配置)したいということもあるでしょう!

高さ不明(可変)の要素の中で常にセンタリング配置する方法は別記事で解説しているので、是非参考に。

読むだけで今すぐ使えるCSS3テクニック7選(TIPS)

参考になった方は「フェイスブック」「ツイッター」「はてブ」や「シェア」も宜しくお願い申し上げます。

新着記事と笑いは鮮度が命や!

「【CSSテクニック】ブロック要素の比率を維持しながら可変し、文字も可変させる方法」記事が気に入った方はいいねしよう!!