右に画像<img>、左にテキスト一文だけのボックスを並べて配置、高さは揃えたいといった場合がこのケースに当たると思います。この場合両方が<img>要素であれば、容易にできるのですが、一方がボックスの場合縦幅の比率(%)の設定するのが難しかったりします。今回は、ボックスの縦横比率の設定方法をご紹介いたします。この方法を使えばボックス要素の縦横比をまるで<img>のように操れるようになる便利な方法ですので是非ご一読ください。疑似要素(beforeもしくはafter)を使う方法ボックスを横並びにするときは注意が必要です横幅と縦幅の比率(%)を計算する方法ボックスの縦横比率は横幅を基準として高さを算出します。式で表現すると次のようになります。75となり横幅(100%)に対する高さの比率は75%になります。比率の計算については以前の記事で簡単に計算できるツールを用意しておりますのでご活用ください。「→比率計算ツールはこちらをクリック」ちなみにこちら、レスポンシブの比率計算を想定した表記になっておりますが、「親要素のpxサイズ」のところに横幅(px)「子要素のpxサイズ」のところに高さ(px)を入力すると「計算結果」に高さの比率(%)が表示される仕組みになります。プロパティにそれぞれ設定しても効果はありません。ボックスの比率を維持させるには、paddingを使う方法と疑似要素(beforeもしくはafter)を使う方法の2通りがあります。paddingを使う方法まずは、paddingを使って、横幅、高さの比率を維持する方法をご紹介します。-50%);}結果↓(ブラウザー画面のサイズを変更することで可変することをご確認いただけます)※サンプルソースに記載はないですがボックスの位置をわかりやすくするためbackground-colorを設定してありますテキストここで重要なポイントは高さの比率を維持するためにpadding-topに高さの比率(%)を設定していることです。heightに比率(%)を設定しても効果はないのですが、paddingに設定した場合は効果があります。padding-topの代わりにpadding-bottomを使うことも可能です。注意したいポイントとしては、サンプルのように、ボックスの中にテキストなどの要素が含まれる場合、padding(%)+要素の高さがボックスの高さになってしまいますので、サンプルのように、position:absolute;を使って内包する要素の高さがカウントされないようにする必要があります。mapの埋め込み、yotubeの埋め込みを可変させたい場合など、手軽に導入できてとても便利な方法です。疑似要素(beforeもしくはafter)を使う方法paddingを使って高さの比率を維持する方法をご紹介しましたが、ボックスの中の要素をposition:absolute;で配置するのが難しい場合もあります。ボックスの中の要素が長文のテキストだったりすると、サイズによってはボックスからはみ出すといった問題がおこります。疑似要素(beforeもしくはafter)を使った方法はこういった問題に対処できます。※サンプルソースに記載はないですがボックスの位置をわかりやすくするためbackground-colorを設定してありますこれは内包する要素に少し長めのテキストを配置した場合のサンプルです。ブラウザーのサイズ変更しても横幅・高さの比率は維持されますが、テキストが高さの比率をオーバーして下に延びた場合はその高さに準じて高さが変化することが確認できると思います。ここで重要なポイントは横幅・高さの比率を維持したい要素にdisplay:flex;を設定することです。これを設定することで、疑似要素(beforeもしくはafter)とボックス内の<p>が横並びに配置され疑似要素(beforeもしくはafter)の高さが反映されます。疑似要素(beforeもしくはafter)には、paddingで高さの比率(%)を設定しておきます。width:0;を設定することで、ボックス内の要素(サンプルの場合の<p>)の横幅が100%であっても横並びが維持されます。ボックス内の要素(サンプルの場合の<p>)の高さが疑似要素(beforeもしくはafter)の高さを超えた場合は、そちらの高さが優先される仕組みになり、ボックス内の要素をposition:absolute;で配置した場合に起こる問題を回避できます。ボックスを横並びにするときは注意が必要です複数のボックスを横並びにしてその高さを比率で設定する場合、比率を計算する際の横幅は個々のボックスの横幅ではなく全体の横幅になります。5つのボックスが並ぶ場合の高さの比率(%)の計算式は下記になります。15%ちなみに内包するボックスの横幅は200÷1000×100で20%になります。※サンプルソースに記載はないですがボックスの位置をわかりやすくするためbackground-colorを設定してありますテキストテキストテキストテキストテキスト間違って、内包するボックスの横幅と高さで比率を計算すると、想定違う比率のボックスになってしまうので注意が必要です。電話番号に自動で挿入されるリンクを無効にする2つの方法(Edgeにも対応します)ホームコーディングcssカテゴリーコーディングhtmlcssjavascriptjQueryphpWordpressPythonデザインフォントWEB制作の参考にお役立ち情報スポンサーリンクWEBクリエイターの部屋の中の人KEZOWEB制作者としてフリーランスで10年以上。現在はWEB作成企業数社と契約し年間100件以上の案件を手掛る。WEBクリエイターの部屋ではWEB制作に役立つ知識とノウハウを提供します。Reserved.メニューホームコーディングhtmlcssjavascriptjQueryphpWordPressPythonデザインフォントWEB制作の参考にお役立ち情報ホーム検索トップサイドバーカテゴリーコーディングhtmlcssjavascriptjQueryphpWordpressPythonデザインフォントWEB制作の参考にお役立ち情報スポンサーリンクWEBクリエイターの部屋の中の人KEZOWEB制作者としてフリーランスで10年以上。現在はWEB作成企業数社と契約し年間100件以上の案件を手掛る。WEBクリエイターの部屋ではWEB制作に役立つ知識とノウハウを提供します。map埋め込みの際拡大率、縮小率などの縮尺を調整する方法2019.02.072019.04.22。