アスペクト比を保ちながら拡大縮小できるブロックの作成

HTML&CSS

レスポンシブサイトを作成するときに、アスペクト比(縦横比)を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。
今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニックです。

アスペクト比を保ちながら拡大縮小できるブロックのサンプル
HTMLコード

<div class="outer">
  <div class="inner"><img src="ajisai1.png" alt="アジサイの花の写真"></div>
</div>

HTMLでは画像を「div」で2重に囲んでおきます。「divタグ」にはそれぞれ適切なクラス名をつけておきます。今回は「.outer」と「.inner」としました。

CSSコード

img{
    width:100%;
    height:auto;
}
.outer {
    position: relative;
    width: 35%;
    margin:auto;
    background:#ccc;
}
.outer::before {
    content:"";
    display: block;
    padding-top: 70%; /* 高さを幅の70%に固定 */
}
.inner {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    text-align: center;
}

まず「img」の「width」を「100%」にすることでフルードイメージ化します。
次に、外側の「div」である「.outer」に対して幅の指定と 「position: relative」を設定しておきます。
「position」を使用したのは入れ子状態の「div.inner」に「absolute」を指定して絶対配置したいためです。

「position: absolute」で絶対配置する場合のデフォルトの基準になる位置はブラウザの表示領域です。
親要素を基準にしたい場合は、親要素に対して「position: relative」を設定する必要があります。

さらに、「width:35%」でリキッドタイプの幅を設定して「margin:auto」で中央揃えを行いました。

ブロック幅を固定にする場合は「pix単位」の数値を指定し、リキッドタイプで幅を可変にするには「%単位」で数値指定します。レスポンシブサイトを作成する場合は概ね「%単位」で数値指定する必要があります。「%」の値を算出するにはあらかじめ固定のレイアウトを作成しておいて、算出したいブロック領域の幅を親要素の幅の値で除算して100倍すると求められます。
「display:block」の状態のブロック領域を中央揃えするには「margin-left:auto」と「margin-right:auto」を設定します。これは CSSでレイアウトを行う際の基本的な手法ですのでしっかりマスターしておきましょう。

「.outer::before」は擬似要素です。擬似クラスと似ていますがその違いを主張するためにコロンを二つも付けています。ただし、擬似クラス同様にコロン一つでも間違いではありません。

擬似要素の 「content:””」は新しい要素を作成するもので、通常「::before」や「::after」の擬似要素には必ず登場するプロパティです。このサンプルでは「.outer」の最前に新たな要素を加えていますが、その要素は何も含んでいません。そして「display:block」の性質を持たせています。
さらに「padding-top」で「70%」の値を指定しています。ここが今回のアスペクト比を決める重要なポイントになります。

「padding-top」と「padding-bottom」の値を%指定するとその値は「width」を基準にした値になることです。この規則をうまく利用してアスペクト比を決めるわけです。
「padding-top」または「padding-bottom」どちらで設定しても構いませんが、この値をパーセント指定することはつまりアスペクト比を決めることになるわけです。

「padding-top」と「padding-bottom」の値を%指定するとその値は「width」を基準にした値になることです。「height」を基準にするのではありませんので間違わないようにしましょう。

これでブラウザを伸び縮みさせてみると対象のブロック領域はアスペクト比を保ったまま拡大縮小するようになります。

次にこのブロック領域の中に表示させたいコンテンツを入れ込む必要があります。
つまり「padding領域」にコンテンツをはめ込むわけです。
もちろん通常フローではそのようなことはできませんので、「position」を活用するわけです。

「.inner」 に対して「position: absolute」を設定します。親要素の「.outer」には「position:rerative」を設定していますので、親要素を基準に配置されるようになります。

さて、ここでテクニックですが、「absolute」に伴う座標の設定ですが、「top,left,bottom,right」それぞれの値を0にすると親要素のちょうど真ん中(垂直方向、水平方向ともに中央)に表示されます。

「top,left,bottom,right」に同じ値を設定すると垂直方向、水平方向共に同じ間隔をあけることができます。

レスポンシブサイト作成のときに重宝する技です。少し練習をしておくとよいでしょう。

タイトルとURLをコピーしました