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です。

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

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

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

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

“placeholderの文字色を変えるcss”の続きを読む

CSSのtext-overflowではみ出したテキストを「…」表示

CSSのtext-overflowでellipsisを指定すると
はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。
意外とIEでも6から対応しているので、仕事でも心置きなく使えます。

“CSSのtext-overflowではみ出したテキストを「…」表示”の続きを読む

Internet Explorer 8では使えないCSS

Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが
プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾
そして
対応してなかったのをうっかり忘れがちな便利要素
を中心にピックアップしてみました。

便利な装飾プロパティ

  • 角丸のborder-radiusが使えない
  • 色と不透明度を同時に指定できるrgbaが使えない
  • 影をつけるbox-shadowとtext-shadowが使えない

レスポンシブデザイン対応

  • media max-width min-width が使えない

疑似クラス

  • :last-child が使えない
  • :nth-child() が使えない

擬似要素

  • 擬似要素を::after(または::before)の書式で書けない
  • 擬似要素にz-indexがきかない
  • 擬似要素にfilterがきかない

“Internet Explorer 8では使えないCSS”の続きを読む

Xperia acro でスクロールできなくなるCSS

Xperia acro(Android2.3)の機種依存バグを発見したのでメモ。

Xperia acroでは
htmlやbodyに、はみ出した部分を非表示とする
overflow:hidden;
を設定すると、一切スクロールができなくなります。

最初は、Androidでスクロールできなくなるバグだとおもい
iframeやdisplay:none;を探してみたのですが、該当するところがなく
javascriptをまるごと非適用、CSSをまるごと非適用…など試しているうちに
htmlに適用しているoverflow:hidden;と
bodyに適用しているoverflow:hidden;を両方とも無効にすると
スクロールできるようになることが判明。

GALAXY SII(Android2.3)やGALAXY SIII(Android4.1)、Xperia A(Android4.2)ではおこらないので
Xperia acro特有の症状のよう。