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日に色々な企業のサイトを見に行ってみてはいかがでしょうか?