A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。
しかし、レスポンシブデザインで可変する横幅に合わせ A4（ISO 216 A列）の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになります。
今回は、A4サイズ（ISO A列）を例に、可変する矩形を描画する方法をメモしておきます。
INDEX
目次
- A4サイズ（ISO 216規格）比率のスタイルを作成する
- まとめ
A4サイズ（ISO 216規格）比率のスタイルを作成する
CSS の矩形の比率は CSS: 用紙サイズの規格と dpi （ピクセル）の対照一覧 より用紙サイズの比率をパーセンテージに変換しています。
HTML
[code]
[/code]
CSS
[code]
.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;
}
[/code]
まとめ
実際の紙媒体の規格を、Web 上で再現する必要はあまりありませんが、印刷やPDF プレビューを行いたい場合、必須となるテクニックだと思います。
比率の部分をクラス化すれば、汎用的なスタイルを定義できますのでお役立てください。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
