画像であれば、例えば「640px×480px」で作成されていれば、CSSで「width:100%;」を設定すると自動的に縦横の比率を保ってレスポンシブル対応してくれます。

ですが「div」などで枠を定義し、その枠の比率を保ったままレスポンシブル対応するにはコツが必要です。

デモ

デモページ

サンプルコード

スタイルシート

.nav-box {
    max-width:200px;
    height:auto;
    background:rgba(250 149 157);
    padding-top: 30%;  /* padding-top(%) = 高さ / 横幅 * 100 */
    position:relative;
}
.nav-box p {
    color: white;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: calc(0.125rem + ((1vw - 3px) * 1.1667));
}
/* 円の基本形 */
div.maru {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   flex-flow: column; 
   vertical-align: top;
}
/* 円の大きさ */
div.size_normal04 {
   width: 160px;
   height: 160px;
}
/* 文字の大きさ */
div.letter04 {
    font-size: calc(0.125rem + ((1vw - 3px) * 1.1667));
}
/* 円と文字の色 */
div.rd-color04 {
   color: #000;
   border: 4px solid #f6e2b0;
   background: #f6e2b0;
}

ブロック要素の比率を維持しながら可変にする

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

つまり、widthの値が変化すると、paddingの値も同じ量だけ変化します。

それを利用することで、可変にすることができます。

.nav-box {
    /* padding-top(%) = 高さ / 横幅 * 100 */
    padding-top: 30%;
}

ただし、Internet Explorer と Firefox では、この方法で比率維持ができないことがあるようです。

フォントサイズの比率を維持しながら可変にする

レスポンシブサイトでは場合によっては画面サイズに応じてフォントサイズを変更する必要があります。

フォントサイズを変更するには次のような方法があります。

• pxは、画面のピクセル数（ドット）でフォントサイズを指定します
• remは、ルート要素（）のフォントサイズを基準とした倍率で指定します
• vwは、画面サイズ（viewport width）を基準にパーセンテージでフォントサイズを指定します
• %は、親要素のフォントサイズを基準としたパーセンテージで指定します
• 外部JS「flex font レイアウト」を読み込むことで、容易にフォントサイズを指定できます
• calc()は、CSSのプロパティ値に計算式を使えるようにする関数です

.txt1{
  font-size: 10px;
}
.txt2{
  font-size: 1.6em;
}
.txt3{
  font-size: 160%;
}
.txt4{
  font-size: 1.6rem;
}

サイズが常に固定されてしまうpxは使いににくいので、その他の方法を説明します。

個人的には「calc」をおすすめします。

font-size: ●● rem ;

remは、ルート要素（）のフォントサイズを基準とした倍率で指定します。

注意：IE9未満は非対応、IE10/11やiOS Safariではバグ報告があります。

font-size: ●● vw;

最小値と最大値を指定して、その間のサイズはビュポート幅に応じて変化させる方法

vwは、画面サイズ（viewport width）を基準にパーセンテージでフォントサイズを指定します。

ただしフォントサイズの計算は大変です。

font-size: ●● %;

%は、親要素のフォントサイズを基準としたパーセンテージで指定します。

ブラウザのデフォルトのフォントサイズは16pxですので、親要素のフォントサイズを特に指定していないときは、100% ＝ 16px となります。

font-size: ●● em;

emは、親要素の大文字のＭのフォントサイズを基準とした倍率で指定します。

ブラウザのデフォルトのフォントサイズは16pxですので、親要素のフォントサイズを特に指定していないときは、1em ＝ 16px となります。

flex font レイアウト

まずターゲット要素に基準幅 data-w-ff="1200" を設定します。

そして、任意の要素に class="ff" と data-fs="30" を設定します。

これでターゲット要素の幅が変わると、1200：30の比率を保ったままフォントサイズがレスポンシブに自動変更されます。

これでターゲット要素の幅が変わると、1200：30の比率を保ったままフォントサイズがレスポンシブに自動変更されます。

font-size: calc(●● + ●●);

calc()は、CSSのプロパティ値に計算式を使えるようにする関数です。

※calc()はAndroid4.4未満では使用できません。

font-size: calc(0.125rem + ((1vw - 3px) * 1.1667));

calc()の計算が手間ですが「ジェネレーター」を使うことで簡単に作成することができます。

[リンク] ビューポートの幅の中でテキストを拡大/縮小する為のフォントサイズ計算機

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る