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

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

  • × InternetExplorer 8 以下
  • × Android 2.3 以下

メリットは、ページ読み込み時のリクエストを減らせること
デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。

実際のコードはこのようになります。
当ブログの開発環境アイコンに使っているパソコンが表示されています。

<div class="sample">
</div>
.sample:after {
	content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQoJYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=');
}

“画像ファイルなしCSSだけでSVGを表示” の続きを読む

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

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

“YoutubeやGoogleMapsをリキッド表示にするCSS” の続きを読む

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

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

例えば、iPadよりも幅広いデバイスにだけスタイルを適用させたい場合
ブレークポイントはiPadの最小幅768pxになるので、emになおすとこのようになります。

768(px) / 16(px) = 48em

@media screen and (min-width: 48em) {
}

“CSSのmedia querysでは必ず1em=16pxになる” の続きを読む

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

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

スタイル適用前

スタイル適用後

“cssだけでラジオボタンを2択スイッチに変更” の続きを読む

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
(ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…)

以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが

ピンチイン(アウト)での拡大縮小は許可したまま
iPhone(iPad)でフォームにforcusしたときズームしないようにする方法もありました!

サンプル
※iPhoneでひらくと動作を確認できます

“拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする” の続きを読む

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

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

※対応しているブラウザが限られているので注意!

.new_position {
	background-position: right 18px bottom 18px;
}

この新仕様を活用すれば、
たとえばこんな画像を使いまわして

※白いチェックマークの背景が透明になっている画像なので、黒背景の上に配置しています

チェックマーク風のアイコンも

チェックマーク付のボタンも

CSSの設定で作れます。

ただし、こんなに便利なのに万能ではありませんでした。

“CSS3で背景画像の位置を右や下からpx指定” の続きを読む

iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない

<a href="http://demos seroquel 50 mg.jquerymobile.com/1.4.3/panel/”>jQuery mobileのPanelのpushのよう
本文が横スライドしてメニューがせり出してくるナビがついたウェブサイトに
スクロールに追従して画面の下へ固定表示するボタンを追加しようとしたら…
iPhoneで全く追従してくれない。

iPhoneやChromeでiposition: fixed; が効いてくれない場合は
-webkit-transform: translate… を併せて設定しているか親要素に設定していないか確認してみてください。

“iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない” の続きを読む

javascriptのtransitionEndイベント実行回数

CSSのtransitionアニメーション終了時にjavascriptを実行したいときには
このように、transitionEndイベントを指定します。

2014年6月現在では、
スマートフォンブラウザ向けの webkitTransitionEnd と
PCブラウザ向けの transitionend を設定すれば
IE(transitionに対応した10以降)、Firefox(最新版)、Chrome(最新版)、Opera(最新版)に対応できます。

$(function(){
	var count = 0;
	$('.button').on('webkitTransitionEnd transitionend', function(){
		count ++;
		$('.log').prepend('&lt;p&gt;transitionEnd! '+count+'&lt;/p&gt;');
	});
});

“javascriptのtransitionEndイベント実行回数” の続きを読む