CSS3: A4サイズ(ISO 216規格)比率のスタイルを作成する

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。

しかし、レスポンシブデザインで可変する横幅に合わせ A4(ISO 216 A列)の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになります。

今回は、A4サイズ(ISO A列)を例に、可変する矩形を描画する方法をメモしておきます。

目次

  • A4サイズ(ISO 216規格)比率のスタイルを作成する
  • まとめ

A4サイズ(ISO 216規格)比率のスタイルを作成する

CSS の矩形の比率は CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧 より用紙サイズの比率をパーセンテージに変換しています。

HTML

<body>
  <div class="jis-a-portrait">
    <div class="jis-content">
      <!-- ここにコンテンツ -->
    </div>
  </div>
</body>

CSS

.jis-a-portrait {
  position: relative;
  width: 100%;
}
.jis-a-portrait:before {
  content:"";
  display: block;
  padding-top: 141.4%;
}
.jis-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #CC0000;
}

まとめ

実際の紙媒体の規格を、Web 上で再現する必要はあまりありませんが、印刷やPDF プレビューを行いたい場合、必須となるテクニックだと思います。

比率の部分をクラス化すれば、汎用的なスタイルを定義できますのでお役立てください。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents