浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】画面全体をブラウザで拡縮した時と同様の結果を得るCSS

 大体のブラウザには web ぺージを拡縮する機能がついています。これは ctrl + マウスホイールで操作できます。この機能によっ
て次画像らの様にweb 中の各要素の比率を変えずに画面を大きくしたり、小さくしたりできます。

 画面サイズが n% の時のデザインがちょうどいい、といった具合の要望があった際、この記事で紹介する CSS が役に立ちます。
 ブラウザの拡縮機能を CSS で再現するのは意外とコツがいります。というのも画面中の各要素の比率と、画面のサイズとブライザのサイズ差に案外引っかかるからです。この拡縮は次のCSSで実現できます。

// scss
html {
   // 70% バージョン
   $scale: 0.7;
   // ページを 70% のサイズに縮小
   transform: scale($scale);
   // デフォルトでは中央に寄ってしまうので、左上を起点に拡縮するように指定
   transform-origin: left top;
   // ブラウザサイズと画面サイズを一致
   height: calc(100% / $scale);
   width: calc(100% / $scale);
}

// css
html {
    // 50% バージョン
    transform: scale(0.5);
    transform-origin: left top;
    height: calc(100% / 0.5);
    width: calc(100% / 0.5);
}

 これを使うと次の様に、ブラウザの拡縮機能同様の拡縮をCSSで再現できます。

 display:fixed が事故を起こすようになった場合はHTMLとCSSを次の様にするよ良いです。

<html><body>
<div id="app">
<!-- コンテンツ -->
</div id="app">
</body></html>
// scss
#app{
   // 70% バージョン
   $scale: 0.7;
   // ページを 70% のサイズに縮小
   transform: scale($scale);
   // デフォルトでは中央に寄ってしまうので、左上を起点に拡縮するように指定
   transform-origin: left top;
   // ブラウザサイズと画面サイズを一致
   height: calc(100% / $scale);
   width: calc(100% / $scale);
}

// css
#app{
    // 50% バージョン
    transform: scale(0.5);
    transform-origin: left top;
    height: calc(100% / 0.5);
    width: calc(100% / 0.5);
}
  • この記事いいね! (0)