Tag SCSS

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

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

CSS3: Bootstrap 4 Beta でグリッドレイアウトの offset クラスがなくなる

Bootstrap 4 Alpha から Beta の仕様変更で、グリッドレイアウトの offset クラスがなくなりました。 今回は、Bootstrap 4 Beta での offset の代わりとなる、auto の使い方をメモしておきます。 目次 Bootstrap 4 Beta グリッドレイアウト auto の使い方 まとめ Bootstrap 4 Beta グリッドレイアウト auto の使い方 Bootstrap 4 Alpha 以前に採用されていた offset-x(x は数値) クラスを、ml-auto、もしくは mr-auto に変更することで対応します。 HTML カラムの左側が空白の場合 ml-auto を、カラムの右側が空白の場合 mr-auto を設定すれば、自動的にオフセット値が計算され、スペースが確保されます。 まとめ Bootstrap4 Beta は正式リリースに限りなく近いものとなっているはずです。 現在 Bootstrap3 を利用している方は、そろそろ Bootstrap4 へリプレースを行なってもよいかもしれません。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 目次 Bootstrap 対応 iOS メディアクエリ(SCSS) まとめ Bootstrap 対応 iOS メディアクエリ (SCSS) 冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。 デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。 まとめ モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。 スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。