2015.07.03 (Fri) Category : Blog,CSS,Javascript,technology Author :

CSSのz-indexが効かない!

z-indexを調整してもなぜだか後ろに隠れてしまう。そんなことに出会ったことありませんか?
powerpoint-27539_640

以下に参考サイトがありました。

z-indexで重なりが直らない場合はtransformのz軸を疑ってみる

CSS translateに要注意です。

translateを使っていると効かなくなります。

私の場合は、SliderBarのJSプラグインを入れていたため、その中を調べてみるとtranslateを使っていました。
これが原因か、とわかったんですが、その上にmodalで表示したいのですが、SlideBarのJSプラグインを修正なんてしてる暇がないわけで。

解決方法は簡単です。

SlideBarJSプラグインの多くは、全体を囲むように指示があったりしますので以下のようになっている場合が多いです。

<div class="slidebar">
<div class="modal"></div>
</div>

それを外に出して同一レベルにする。

<div class="slidebar"></div>
<div class="modal"></div>

slidebarの制御外にすればよいってことですね。あとうあ、slidebarとmodalのz-index調整でOKです。

2013.11.26 (Tue) Category : CSS,HTML5,jQuery,technology Author :

checkbox(or radio)のスタイルを変更するには?

checkboxradioHTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。
checkboxとradioの見た目を変更したいという要望がある。

スタイルシート(CSS)を用いれば可能かと思うが、このFORM要素は、CSSで変更できない。特にIE8以下は、完全に不可能です。
※CSS3から変更可能。

だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。

ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。
phpなどでサーバ側でチェックされている状態が受け取ることができることが重要

実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。

ということになります。

もうちょっと具体的には、以下。

  1. チェックボックスチェックされた画像、チェックが外れた画像を用意。
  2. チェックボックスを消します。display:noneにて。
  3. 1で用意した画像をLABELタグに配置。(background-image)
  4. CSS内で、checkedセレクタにてチェックされた時の画像に切り替えるようにする。

通常、checkboxやradioボタンについては、LABELタグを用います。そのLABELタグに対してデザインされたチェックボックスの画像を用意し、チェックされた時、チェックされないときをCSSのセレクタを利用して定義するのです。そうすることでチェックボックスを疑似的にデザインしたことになります。LABELをクリックしているので、当然、input type=checkboxのチェック状態も変更され、サーバ側での状態取得も可能です。

ここで問題なのは、IE8。IE8には、input[type=checkbox]:checkedというcheckedセレクタがありません。IE9以降対応でよければ問題ないのですが、IE8に対応させるためにはどうすればいいのか。
これはもう力技ということになります。クリックイベントを用意して、checkboxをクリックする処理を追加してあげる必要がありますね。jQueryにて。
ただ、この処理を追加するならば、CSSのcheckedセレクタは不要ですね。ぜんぶこっちで動作するようになりますので。

以下、jQueryのコードです。※jQueryは1.x系ですよ。IE8対応なので。

$(function(){
	$('#labelCheckbox1').mouseup(function(){
		$('#checkbox1').click();
	});
});

2013.10.16 (Wed) Category : CSS,Javascript,technology Author :

JavaScriptとCSSをブラウザ上で開発しよう

jsbin_image

ちょっとした動作確認や実験をしたいとき、テキストを編集して、ブラウザで表示してみて、、という作業になると思います。

パラメータを変更したり、ミスを直したりするのにも若干煩わしさがあったり。

jsbinというサイトでは、直接ブラウザ上でHTMLやJavaScript、CSSを書くことができ、リアルタイムでその実行結果を確認できます。
されに面白いところは、jQueryが使えるところ。
もちろんバージョンもいくつか選べます。

JQuery UIやbootstrap、prototype,YUI,dojoなどなど。あらゆる有名どころはすべて使えます。
もちろん自分で使いたいものを「Add library」にて選ぶだけ。

まずは、使ってみましょう。

http://jsbin.com/

このjsbin、さらに面白いことにこのシステム全体がオープンソース(OSS)で公開されました。
DB(MySQL)+web(apache)を使ったシステムになるようです。

ダウンロードはこちらから。
jsbin -GitHub
(https://github.com/remy/jsbin)

%d人のブロガーが「いいね」をつけました。