CSS– tag –
-
CSS3: A4サイズ(ISO 216規格)比率のスタイルを作成する
A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4(ISO 216 A列)の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになりま... -
CSS: 印刷時にページ番号を出力する
Web サイトをプリンタや PDF 出力する際、ページ番号を出力する CSS をメモしておきます。 【目次】 印刷時にページ番号を出力する まとめ 【印刷時にページ番号を出力する】 以下は page クラスの要素に対し、右下に「1 ページ」、「2 ページ」... と出力... -
CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧
Web をプリンタで出力する際、用紙は A4,B5 等の用紙を利用するかと思います。 今回は 各種 A,B(ISO 216規格)を dpi(ピクセル)に換算した一覧をメモしておきます。 【目次】 A列(ISO 216) B列(ISO 216) まとめ 【A列(ISO 216)】 72dpi 144dpi 200dpi 3... -
CSS3: Bootstrap 4 Beta でグリッドレイアウトの offset クラスがなくなる
Bootstrap 4 Alpha から Beta の仕様変更で、グリッドレイアウトの offset クラスがなくなりました。 今回は、Bootstrap 4 Beta での offset の代わりとなる、auto の使い方をメモしておきます。 【目次】 Bootstrap 4 Beta グリッドレイアウト auto の使... -
CSS: Mac 環境で CSS プリントのデバッグを行う方法
Web サイトやアプリ開発において、プリンタ出力時のスタイルを定義する必要がある要件もあるかと思います。 Mac の場合、デフォルトブラウザが Safari ですが、残念ながら Safari の Web インスペクタにプリントデバッグの機能はありません。 したがって、... -
CSS3: 擬似クラス not で複数要素を指定する
今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。 【目次】 擬似クラス not で複数要素を指定する まとめ 【擬似クラス not で複数要素を指定する】 下記 HTML で、box1, box3 クラスに対し... -
CSS: 擬似クラス before, after の解除方法
link, visited, active, hover 等、CSS 擬似クラスは多数存在します。 チームで制作を行っていると、フレームワークやベースのコードに、clearfix や装飾等の before, after 要素がコーディングされていて、不都合なときがあります。 今回は、before, afte... -
CSS: Absolute で上下左右の中央配置
久しぶりに、CSS の Absolute で縦横中央配置するときに少々手こずってしまったのでメモしておきます。 【目次】 Absolute 中央配置 まとめ 【Absolute 中央配置】 外側の div (wrapper) と、中央配置したい div (inner) を用意します。 HTML [code] [/cod... -
CSS: リンク擬似クラス :link, :visited, :hover, :active の記述順
CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。 リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しま...
1