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イベント実行回数” の続きを読む

InternetExplorerでinputにつく×は::-ms-clearでスタイル適用

InternetExplorer10以上で、1行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。

ie-input-text-clear-button

これを押すと、入力されている内容をクリアできるのですが
お客さんから、違和感があるから消してほしいと要望があったり
テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと
初期設定のままでは何かと使いにくい場面の多い機能です。

このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。

“InternetExplorerでinputにつく×は::-ms-clearでスタイル適用” の続きを読む

cssだけでcheckboxやradioのデザインを変更

CSS3の 隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で

input[type=checkbox]:checked + label

の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。

CSS3のセレクタに対応していないIE8以下では
通常のラジオボタンやチェックボックスが表示されます。


応用編で、cssだけでラジオボタンを2択スイッチに変更も紹介しています。

“cssだけでcheckboxやradioのデザインを変更” の続きを読む

placeholderの文字スタイルを変えるCSS

上が、cssで文字に装飾をくわえたinputで
下は、文字の装飾 + placeholderのスタイルも設定したinputです。

See the Pen custom placeholder by webdev (@webdev-jp-net) on CodePen.0

inputの文字にスタイルを指定すると
IEでは、placeholderにも全く同じスタイルが適用されてしまい。
FirefoxやGoogle、Safariでは、placeholderの色はブラウザデフォルトのままで
ボールドなどの装飾はIE同様に適用されてしまいます。

placeholderだけに別のスタイルを適用するときは
ブラウザにあわせて3種類の指定をします。

::-webkit-input-placeholder
:-ms-input-placeholder
::-moz-placeholder

擬似要素をあらわすコロンの数がちがうと適用されないので注意。

“placeholderの文字スタイルを変えるCSS” の続きを読む