痔になりやすい生活習慣とは?

CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか?

背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。

<div class="main">
ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。
</div>

スタイルシートの方では現在は
.main {
float:left;
background-image:url(/image/top_bg01.jpg);
background-repeat:no-repeat;
min-width:736px;
height:auto;
border-right:1px solid #000000;
}

としており、このtop_bg01.jpgの部分の画像を
top_bg01.jpg
top_bg02.jpg
top_bg03.jpg
top_bg04.jpg
top_bg05.jpg
とランダムに表示させたいのですが、対応方法が分からずに困っています。
http://www.designwalker.com/2006/12/random-css.h …
はためしてみましたが、PHPがうまく対応できずに断念してしまいました。

どなた様か宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

変更する対象が異なるだけで、要領は同じです。



参考まで。
<html>
<style type="text/css">
.main {
background-image:url(/image/top_bg01.jpg);
}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage = 'url(/image/' + url[n] + ')';
}
</script>
<body>
<div class="main" id="main">
コンテンツ
</div>
</body>
</html>

この回答への補足

動きました。
id="main"を忘れてました。
ありがとうございます!!
嬉しいです!

補足日時:2009/03/18 10:45
    • good
    • 1
この回答へのお礼

やってみたのですが、うまく出来ませんでした・・・。
参考を作って頂いたのに、申し訳ないです。
ありがとうございます。

お礼日時:2009/03/18 10:35

 HTMLもCSSも触らず、また、訪問者側の環境に依存するjavascriptも使わずにできます。

PHPでも可能ですが、乱数発生とかややこしいので、CGIを別途おきましょう。
 月ごとに変えるものは作ったことがあるのですが、ちょっと応用が利くものを思案中。

この回答への補足

なるほど!CGIは全く頭にありませんでした。
どんな感じのCGIが簡単に使えるでしょうか?

補足日時:2009/03/18 10:13
    • good
    • 1

CSSでは無理です。


Javascriptで実行します。
検索すれば出ますよ。
Javascript ランダム表示
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSで背景をランダム表示させたい

CSS初心者です。

3分割のフレームのサイトで、mainページの背景をCSSで指定しているのですが
それをランダムに5種類の画像を表示出来るようにしたいのですが
何度やってもやり方が分からず教えてもらえませんでしょうか・・・
PHPは対応していないサーバーなので無理でした。
http://oshiete.goo.ne.jp/qa/4805263.htmlこちらも試してみましたが出来ませんでした・・・
どうかご教授願います。


style.CSSから抜粋↓

/* デザイン全般設定 */
.ta1{border-bottom:1px solid #cccccc;background-color:#eeeeee;}
.ta2{background:url(bg02.gif) repeat-y 260px 0px;}
.ta3{background:url(bg01.jpg) repeat-y 95% 0%;}
#enter_page{overflow:hidden;}
#main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}←ここでmainページの背景を指定しています。
#menu_page{border-bottom:1px solid #cccccc;background-color:#eeeeee;}
#left_page{background:url(bg02.gif) repeat-y 260px 0px fixed;}
.back{font-size:17px;text-align:right;background:url(back.gif) no-repeat 160px 90%;margin:20px 0px 0px 0px;padding:15px 20px 5px 0px;}
.back a:hover{text-decoration:underline;}




#main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage = 'url(/image/' + url[n] + ')';
}
</script>
↑このように、#main_page{background~~の後ろに、参考サイトのをコピペしても何も表示されず背景は白のままになってしまいました。

色々頑張ってみたのですが分からないので、どなたか教えてくれませんか・・・
他に必要なソースがあれば追記いたします。
どうぞよろしくお願いいたします。

CSS初心者です。

3分割のフレームのサイトで、mainページの背景をCSSで指定しているのですが
それをランダムに5種類の画像を表示出来るようにしたいのですが
何度やってもやり方が分からず教えてもらえませんでしょうか・・・
PHPは対応していないサーバーなので無理でした。
http://oshiete.goo.ne.jp/qa/4805263.htmlこちらも試してみましたが出来ませんでした・・・
どうかご教授願います。


style.CSSから抜粋↓

/* デザイン全般設定 */
.ta1{border-bottom:1px solid #cccccc;background-color:#...続きを読む

Aベストアンサー

なるほど…

CSSファイルに書いちゃだめですね(笑)
もしやるなら、拡張子jsの独立したファイルにするか、HTMLの中に書きます。


1)画像を表示させたいHTMLファイルは、top.htmlです。
2)top.htmlは、サイトのトップの階層にあります。
3)「img」のフォルダはサイトのトップの階層(top.htmlや、style.css等のファイルがある階層)にあります。
ということなので、Javascriptのプログラム自体は正常に動くものであることがわかりました。

フレームについてわかりにくかったですか。つまり<frameset>と<frame>のタグを使用して、フレームの中にほかのファイルを表示「させている」のはどれですかという質問でした。
main.htmlがフレーム分割されていてその中にmenu、top、leftの各HTMLファイルですね。そしてtop.htmlが画像を表示させたいファイルであると。

では、top.htmlの<head></head>の中に

<script type="text/javascript">
window.onload = function(){
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
document.body.style.backgroundImage = 'url(/img/' + url[n] + ')';
}
</script>

これを入れます。
お礼でtop.htmlに入れてある例では<body></body>の中なので予定通りに動かなかったものとみられます。<head></head>の中なら大丈夫なはず。
これでもしだめならそろそろお手上げです(笑)

なるほど…

CSSファイルに書いちゃだめですね(笑)
もしやるなら、拡張子jsの独立したファイルにするか、HTMLの中に書きます。


1)画像を表示させたいHTMLファイルは、top.htmlです。
2)top.htmlは、サイトのトップの階層にあります。
3)「img」のフォルダはサイトのトップの階層(top.htmlや、style.css等のファイルがある階層)にあります。
ということなので、Javascriptのプログラム自体は正常に動くものであることがわかりました。

フレームについてわかりにくかったですか。つまり<frameset>と<frame>のタグ...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング