IE独自のCSSプロパティに「filter」という、背景にグラデーションなど視覚的なプロパティです。
よくある話ですが、tableタグのヘッダーにグラデーションを入れてみたのですが…
枠線が消えました

 

枠線が消えたCSSソースコードはこちら


table th{
	border: 2px #000 solid;
	filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=1, StartColorStr=#fffffabb, EndColorStr=#fffffeee);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#fffffabb', endColorstr='#fffffeee')"

	padding:5px;
}
table td{
	border: 2px #000 solid;
	padding:5px;
}

 

どうもfilterプロパティをセル(th・tdタグ)に使用すると枠線を超えてグラデーションがかかるようです。もしfilterプロパティをかける場合は、divタグにfilterプロパティを使用しますと枠線が表示するようです。

 

枠線が表示したCSSソースコードはこちら


table th div{
	border: 2px #000 solid;
	filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=1, StartColorStr=#fffffabb, EndColorStr=#fffffeee);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#fffffabb', endColorstr='#fffffeee')"

	padding:5px;
}
table td{
	border: 2px #000 solid;
	padding:5px;
}

 

 

IE9から見た画像です。

 

 

filterプロパティがIE独自のため、他ブラウザ(Firefox・Chrome・Safariなど)でグラデーションをかける必要があります。グラデーション用の背景画像用意やCSS3対応ブラウザであれば、backgroundプロパティのlinear-gradient()関数を使用になります。

 

古い考えかもしれませんが、クロスブラウザ対応用に横幅1pxのgif画像を作成して背景画像にするのがおすすめです。

PHPにはランダムにする方法がいくつかあり簡単にできます。
もし下記のような多次元配列があり、

  • キー毎にシャッフルを行いたい
  • シャッフル後繋げて表示したい

という場合を考慮してみました。

 


 array(
			'MsgBox' => array(
				'line' => '1',
				'message' => '1行目に表示①'
			)
		),
		(int) 1 => array(
			'MsgBox' => array(
				'line' => '1',
				'message' => '1行目に表示②'
			)
		),
		(int) 2 => array(
			'MsgBox' => array(
				'line' => '2',
				'message' => '2行目に表示①'
			)
		),
		(int) 3 => array(
			'MsgBox' => array(
				'line' => '2',
				'message' => '2行目に表示②'
			)
		)
	);
?>

 

結構特殊なランダムですが、よくあるかと思いますので覚書のため…


<?php
	/** メッセージをシャッフル */
	function msgContent($msgBoxs){
		$i = 0;
		$ii = 0;
		$bmiMsg = "";
		$line = array();
		$br = '';

		/** メッセージを取得後、各行(line)毎に配列に追加 */
		foreach ($msgBoxs as $msgBox){
			// 配列を取得
			$messages = $msgBoxs[$i]['MsgBox']['message'];
			$lineDb = $msgBoxs[$i]['MsgBox']['line'];

			// 変数($line)があるか判定
			if(is_array($line)){
				$lineEnd = end($line);
			}else{
				$lineEnd = 0;
			}

			// 行(line)が変った場合は配列のインデックスを変更
			if($i == 0){
				$line[0] = $lineDb;
			}else{
				if($lineEnd != $lineDb){
					$line[$i] = $lineDb;
					$ii++;
				}
			}

			// 行(line)毎に分けて配列に追加
			$msg[$ii][$i] = $messages. $br;

			$i++;
		}

		/** 作成した配列を各行毎にシャッフルする */
		$msgs = "";
		$count = count($msg);
		for($a = 0; $a < $count; $a++ ){
			if(is_array($msg[$a])){
				$msgcount = count($msg[$a]);
				$msgrand = array_rand($msg[$a]);
				if(isset($msg[$a][$msgrand])){
					$msgs = $msgs. $msg[$a][$msgrand];
				}
			}
		}

		return $msgs;
	}

 

上記のメソッドを呼び出して表示してみました。

 

 

もう少しコードを減らすことができそうかなっと思っています。

「アマゾン」のホームページって案外使いやすくてよく通販で使用しています。
世界中の買いたいものがそろっているのもよく使用する1つではと思っています。

ですが私が注目しているのはデザインです。

 

  • もう1度来させるような作り。
  • シンプルでわかりやすいデザイン。
  • 検索機能の豊富

 

上記の点で見ると明らかですね。
こういうホームページを作ってみたいものです。
難しいですが。。。

 

話がかわりますが、もう少しでエイプリルフールの時期です。(まだ2ヶ月先ですが)
企業によっては1日だけのエイプリルフール用ホームページが出来ている会社もあります。
そういったジョーク用ページって夢があるような気がして私にとっては一度作ってみたいな。なんて思っていたりしています。

 

興味があれば4月1日に色々な企業のサイトを見に行ってみてはいかがでしょうか?