READ MORE

CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。 工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。 pointer-eventは、最新ブラウ …

READ MORE

画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × …

READ MORE

YoutubeやGoogleMapsをリキッド表示にするCSS

absoluteで絶対位置配置した要素のサイズを相対指定の応用で YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。 スマートフォンやレスポンシブ対応のとき …

READ MORE

CSSのmedia querysでは必ず1em=16pxになる

レスポンシブデザインで頻繁に使用するCSS media querysのmax-widthでは 文字サイズを基準としたemを単位に使った場合 必ず、ブラウザの初期フォントサイズ16pxが基準になります。 例えば、iPadよ …

READ MORE

cssだけでラジオボタンを2択スイッチに変更

cssだけでcheckboxやradioのデザインを変更の応用で、 Javascriptを使わず2択スイッチのデザインを付ける方法です。 IE8ではデフォルトのラジオボタンが表示され、IE9以上ではスタイルが適用されます …

READ MORE

CSS3で背景画像の位置を右や下からpx指定

背景画像の位置を指定するbackground-position CSS2までは右や下を基準に配置したいとき、端っこまで揃えることしかできませんでしたが CSS3からは、このような書式で右や下からの位置もpx指定できるよう …