Archived posts in ' "CSS"

slideToggle()メソッドのバグについて

Posted by specterant on 2013.04.11

jQueryのslideToggle()メソッドを使用した時に、
IE8でmarginの設定が消えてしまうバグに遭遇しました。
そこで、このバグの回避方法の備忘録です。

「margin」じゃなく、「padding」で書く。
どうしても、「padding」で書けない時は、親要素に「overflow: hidden;」を設定する。
その他にも色々と回避方法があるみたいですが、
上記のどちらかが簡単かと思います。

下記ページを参考にさせていただきました。
[JQuery覚書]IE8でSlidetoggle()のmarginが消えるバグの回避方法 – ponnao-clip

No Comments

text-shadowプロパティについて

Posted by specterant on 2012.06.26

CSSでテキストに影をつけられるtext-shadowプロパティについてのメモです。
現在、text-shadowプロパティが機能するブラウザについて調べた結果、以下のようです…。

・Safari 3〜
・Google Chrome 2〜
・Firefox 3〜
・Opera 9.6〜

やはり、IEはダメなんですね…。
ダメでも、IEに対応させたいのであれば、下記を参考していただけたらと。

IEでCSS3のドロップシャドウを使いたい
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow

※現在、検証してません…。今度検証してみます。検証したらまたご報告します。>自分…

そんな訳で、text-shadowプロパティの基本的な使い方を、これまた、私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//<影のぼかし色>をカラーネームで指定してもOK(例えば、redとかblueなど)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//また、<影のぼかし色>をRGBAカラーモデルで指定してもOK(例えば、rgba(255, 255, 255, 0.5)みたいに)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> rgba(<影のぼかし色>);
}

//カンマ「,」で複数の影をつけることも可能です。
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

//ちなみに<影のぼかし色>は一番最初に記述してもOK
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

そして、サンプルコード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-shadow test</title>
<style>
	* {
		margin: 0;
		padding: 20px;
		font-size: 16px;
		font-family: Helvetica;
	}
	#text-shadow1 {
		text-shadow: 5px 5px 5px #000;
	}
	#text-shadow2 {
		text-shadow: #000 5px 5px 5px;
	}
	#text-shadow3 {
		text-shadow: 5px 5px 5px blue;
	}
	#text-shadow4 {
		text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	}
	#text-shadow5 {
		text-shadow:
			-5px -5px 0 #ff0000, /*--- 赤(一番上)---*/
			5px -5px 0 #0000ff,  /*--- 青(二番目)---*/
			-5px 5px 0 #00ff00,  /*--- 緑(三番目)---*/
			5px 5px 0 #ffff00;   /*--- 黄(一番下)---*/
	}
</style>
</head>
<body>
	<div id="text-shadow1">text-shadowプロパティのサンプル1</div>
	<div id="text-shadow2">text-shadowプロパティのサンプル2</div>
	<div id="text-shadow3">text-shadowプロパティのサンプル3</div>
	<div id="text-shadow4">text-shadowプロパティのサンプル4</div>
	<div id="text-shadow5">text-shadowプロパティのサンプル5</div>
</body>
</html>
ちなみに、私が検証し機能したブラウザは以下です。

【Mac】
・Safari 3.2.1、4.0.5、5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6、13.0.1
・Opera 12.00

※Safari 3.2.1は、複数設定出来ませんでした。ちなみに、一つ目の設定のみ機能してました。


【Windows】
・Safari 5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6.20、12.0
・Opera 11.64



詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
text-shadow-CSS3リファレンス
CSS3 text-shadow box-shadow の使い方 | CSS Lecture
text-shadow|プロパティ|CSS HappyLife ZERO

No Comments

皆様ご存知のclearfixについて

Posted by specterant on 2012.04.19

clearfixは、floatした際にその要素がはみ出したり、
背景を指定しているのに表示されなかったりと、
色々問題を解決してくれる優れもの。

で、私は今まで旧タイプ?のを使用していたのですが、
旧タイプ?は、Mac IEやNetScape対策のもがあったらしく
結構長いコードになっていました。

そんな訳で、最近Mac IEやNetScapeに対応しなくても
いいんでないかい…と思い、コードが短くなるなら短い方がええやん…ってことで、
これからは、下記のを使用して行きますよってことでメモ。

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	*zoom: 1;
	/*「*zoom: 1」部分は「/zoom: 1」でもOK!*/
}
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと…はい。

参考にさせていただいたサイト
いまどき ? いまさら ? clear fix のコード | ヨモツネット
clearfixを検証する – Kamurogi Blog

No Comments