CSS3– tag –

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4（ISO 216 A列）の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになりま...

img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。 一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。 今回は可変する widt...

CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。 今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。 【目次】 クラス・id 名に特定文字列を含む要素を...

今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。 【目次】 擬似クラス not で複数要素を指定する まとめ 【擬似クラス not で複数要素を指定する】 下記 HTML で、box1, box3 クラスに対し...

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 【目次】 B...

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。 今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。 【目次】 グリッド...

Bootstrap でのグリッドレイアウト時、空白部分が発生する場合に col-xx-offset-x を利用すると思いますが、バージョン4では反映されなくなっています。 offset の概念がなくなったわけではなく、バージョン4 よりクラス名が変更されているだけですので、...

Web ページを印刷した時、プリント用の CSS が定義されていて、出力結果が綺麗な場合、そのサイトで扱っているコンテンツに対する信用は向上します。 今回はそんなプリント・PDF 出力時に、改行する位置を指定する CSS プロパティについてメモしておきます...

久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。 今回は background ショートハンドへ background-size を記述する方法をメモしておきます。 【目次】 background ショートハンド（複数指定） background-siz...

JavaScript(jQuery等）でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく（フリッカー）現象が発生することがあります。 挙動自体に問題はなく発生範囲が限定的であって...