HTMLでサイトを作ろうとしています。

DreamWeaverを利用し、XAMPPでサーバを構築するところまで終了しています。


質問内容なんですが
いくつかある画像(リンク有)+リンク文字+テキストを1セットとしてテーブル内に3つずつ被らずランダムに表示させる方法をご教授願いたいです。
テーブルは横に3つ並んだ状態がいいです。

自分で調べてみたのですがよくわからなかったんです…
見てのとおり初心者なので我侭ですが優しく詳しく教えていただきたいです。
よろしくお願いします。

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

A 回答 (1件)

http://detail.chiebukuro.yahoo.co.jp/qa/question …
この人?

今回の質問にDWやXAMPPが何も関係ないってことすら分からんレベルの癖に贅沢言わないでくれないかな…
初心者ですって言えば何でも許されると思ったら大間違いですよ。

・「ランダムに1つ」ならできて「重複なしで3つ」ができないのか
・「1つ」ならできて「3つ」ができないのか
・そもそもランダムができないのか
・「何を」調べて「何が」分からなかったのか
どこまでできて何ができないのかをはっきり言わないと、結局一から十まで教えることになり、宿題を丸投げしてくる小中学生と同レベルです。
何も分からなくて他人に頼るなら、せめてそれくらいは自分で努力してくださいね。

ご希望のプログラムを組むには「配列」「乱数」「HTMLへの出力」などの知識が必要ですが、どれもまったく知らないんでしょ?
初心者が高望みなどせず、順番に覚えなさい。
まずは「配列」について理解しましょう。
次に「乱数」について理解しましょう。
そうすると「配列の中のどれかをランダムにひとつ取得」ができるようになります。
次に、HTMLへの出力を覚えます。
出力するためには、出力する「もの」を作成することと、出力先を取得することが必要になります。
まずは空の<body>内に文字を出力することから始めましょう。
慣れてくれば、特定の場所(今回で言えば特定のテーブルセル内)に特定の要素を入れることができるようになります。
これを組み合わせると「配列の中からランダムに3つを特定の場所に出力」ができます。
これくらいのレベルに来てやっと「重複なく3つ」に手を出せます。
JavaScriptには標準で「配列のある要素を取得し、それは配列から削除する」という機能がありますので、インデックスに乱数を与えてこれを3回行えば「重複なくランダムに3つ」が実現できます。

どうですか?
「何も分かりません全部教えてください」って言ったからって簡単に教えられるような内容じゃない(あなたレベルの人にとって)ことが分かりましたか?
悪いことは言わないからできることからやりましょう。


※下記が動作としてはあなたの希望通りであることを確認してください。

<html>
<head>
<script>
window.onload = function(){
var list = new Array(
'<img src="画像1.jpg" alt="sample1" width="170" height="200">\n<p><a href="画像1.html">説明1</a></p>\n<p>詳細1</p>',
'<img src="画像2.jpg" alt="sample2" width="170" height="200">\n<p><a href="画像2.html">説明2</a></p>\n<p>詳細2</p>',
'<img src="画像3.jpg" alt="sample3" width="170" height="200">\n<p><a href="画像3.html">説明3</a></p>\n<p>詳細3</p>',
'<img src="画像4.jpg" alt="sample4" width="170" height="200">\n<p><a href="画像4.html">説明4</a></p>\n<p>詳細4</p>',
'<img src="画像5.jpg" alt="sample5" width="170" height="200">\n<p><a href="画像5.html">説明5</a></p>\n<p>詳細5</p>',
'<img src="画像6.jpg" alt="sample6" width="170" height="200">\n<p><a href="画像6.html">説明6</a></p>\n<p>詳細6</p>',
'<img src="画像7.jpg" alt="sample7" width="170" height="200">\n<p><a href="画像7.html">説明7</a></p>\n<p>詳細7</p>',
'<img src="画像8.jpg" alt="sample8" width="170" height="200">\n<p><a href="画像8.html">説明8</a></p>\n<p>詳細8</p>',
'<img src="画像9.jpg" alt="sample9" width="170" height="200">\n<p><a href="画像9.html">説明9</a></p>\n<p>詳細9</p>'
);
for(i=1;i<=3;i++){
document.getElementById("td" + i).innerHTML = list.splice(Math.floor(Math.random() * (list.length-1)),1);
}

}
</script>
<title>test</title>
</head>
<body>
<table border="1">
<tr><td width="265" id="td1"></td><td width="265" id="td2"></td><td width="265" id="td3"></td></tr>
</table>
</body>
</html>
    • good
    • 0
この回答へのお礼

何度も何度もすいませんでした。
無事作ることができました。
ありがとうございます。

お礼日時:2013/11/28 13:09

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

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

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

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

Q[C#]2つのランダム文字列を作りたい

いつもありがとうございます。

2種類のランダム文字列を作りたいのですが、
なぜか同じ文字列が作成されるという現象が起こります。

以下の関数を用意して
public static string ランダム(int 桁数)
{
string[] codelist = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" };

Random Random = new System.Random();

for (int i = 0; i < 桁数; i++)
{
randomcode += codelist[Random.Next(0, 36)];
}

return randomcode;

}

textBox1.Text = ランダム(10);
textBox2.Text = ランダム(10);

とやっても、同じランダムの文字列が入ってしまいます。

間に、
Thread.Sleep(100);

とか入れると変わるのですが・・・
理由がわかりません。

初心者的質問ですみませんがよろしくお願いします。

いつもありがとうございます。

2種類のランダム文字列を作りたいのですが、
なぜか同じ文字列が作成されるという現象が起こります。

以下の関数を用意して
public static string ランダム(int 桁数)
{
string[] codelist = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" };

Random Random = new System.Random();
...続きを読む

Aベストアンサー

コンピュータで使われている乱数は、実際には「疑似乱数」と言って、一見バラバラで乱数と言ってもいい性質を持っていますが、実際には計算によって求められたものです。

それまでの値に、なんらかの計算をした結果を、「次の乱数」として使います。(Nextというメソッド名もそこに由来)
このとき、一番最初の状態になるものを「種(シード,seed)」と言います。
「前の状態から新しい乱数を計算する」ということから「種が同じなら、乱数列も同じになる」という性質があります。

バラバラにするための常套手段として、種に現在時刻から求めた値を使うことで、実行時刻が変化すれば値が変わるようにする、というのがあります。ただ、無限に細かい時刻をそのままコンピュータでは扱えないので、適当な単位(例えば、秒単位)になってしまい、単位時間以内(例えば、秒単位なら1秒以内)なら、同じ乱数列になってしまう、という問題があります。

Random.Random()のマニュアルを読むと
http://msdn.microsoft.com/ja-jp/library/h343ddh9%28v=vs.95%29.aspx
「既定のシード値はシステム時計から取得されるため、その分解能は有限です。 その結果、既定のコンストラクターを呼び出すことによって連続で作成される、異なる Random オブジェクトの既定のシード値は同一であるため、同一の乱数セットが生成されます。」
と、明記されています。

public static string ランダム(int 桁数) を2回呼び出していますが、その度に、Random Random = new System.Random();で新しい System.Randomオブジェクトを生成しています。
間にいくつかの処理が入っているとは言え、非常に短時間で終わるものなので、この「連続で作成される、異なる Random オブジェクト」となっている、と考えてよいでしょう。

対処法は、マニュアルにも書いてあります

コンピュータで使われている乱数は、実際には「疑似乱数」と言って、一見バラバラで乱数と言ってもいい性質を持っていますが、実際には計算によって求められたものです。

それまでの値に、なんらかの計算をした結果を、「次の乱数」として使います。(Nextというメソッド名もそこに由来)
このとき、一番最初の状態になるものを「種(シード,seed)」と言います。
「前の状態から新しい乱数を計算する」ということから「種が同じなら、乱数列も同じになる」という性質があります。

バラバラにするための常套手段とし...続きを読む

Q画像+リンク&文字のランダム表示について

画像+リンク+文字のランダム表示について

復数ある画像、リンク、文字のなかからランダムで数個(かぶらないように)表示させたいのです。
それもテーブルタグの中に。
(画像Aには必ずリンクAと文字Aがせっとになるようにです)

初心者なのでどのようにしたら良いのか、またこんな事ができるのかどうかもわかりませんが・・・
おわかりになる方、詳しく教えてください。

一応HTMLでHPをつくっているので、このように書いたら良いよ・・・という見本のようなモノを作って頂けると幸いです。
宜しくお願いします

↓の画像のように3パターンの表示を考えています。
解りづらいかもしれませんが、よろしくお願いします。

Aベストアンサー

<script type="text/javascript">
<!--
var msg = new Array();

msg[0] = '<img src="画像Aアドレス"><br>ここにA文章';
msg[1] = '<img src="画像Bアドレス"><br>ここにB文章';
msg[2] = '<img src="画像Cアドレス"><br>ここにC文章';
msg[3] = '<img src="画像Dアドレス"><br>ここにD文章';
msg[4] = '<img src="画像Eアドレス"><br>ここにE文章';

var no = Math.floor(Math.random() * msg.length);
document.write(msg[no]);
// -->
</script>

これを<td></td>の中に入れれば大丈夫だと思います。
msg[0]←この数字を増やしていけばいくつでも可能です。

QjQueryを使ってランダムに表示

jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。
現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか?
できればjsのみの修正でできれば良いのですが…。
どなたかお助けください。よろしくお願いいたします。
jsとhtmlは以下のようにしています。

jQuery(function($) {

$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
$(this).children().eq(r).show().prependTo($(this));
}
});
}
});

$(function(){
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay"));
});
});

});


<div randomdisplay="3">
<div id="box">ランダム1</div>
<div id="box">ランダム2</div>
<div id="box">ランダム3</div>
<div id="box">ランダム4</div>
<div id="box">ランダム5</div>
</div>

jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。
現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか?
できればjsのみの修正でできれば良いのですが…。
どなたかお助けください。よろしくお願いいたします。
jsとhtmlは以下のようにしています。

jQuery(function($) {

$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for(var i = 0; i...続きを読む

Aベストアンサー

ランダム表示する関数を呼び出している部分を関数にして、setIntervalで繰り返して呼んであげればいいんでないでしょうか。

https://developer.mozilla.org/ja/docs/Web/API/window.setInterval

Qhtml初心者です。画像サイズについて。 テーブルの中に、文字と、画像リンクを貼っているのですが画像

html初心者です。画像サイズについて。
テーブルの中に、文字と、画像リンクを貼っているのですが画像と文字がズレます!泣
画像というより、文字が下にずれます。

文字<a href=”リンク先”><IMG src=”画像URL” width=”30” height=”40” border=”0”>

3×3のテーブルの中に、上記のコードが9つあります。画像アイコンは2種類で、もう一つは
width=”25” height=”20” border=”0”>です。
アイコンの横と幅が二つそれぞれ違うのでズレてるようです。しかし双方を同じくらいのサイズにしようとするとこうなります。ちなみにフリー素材を拾ってきました。
同じサイズにするにはどうすれば…
ペイントでピクセル値をいじっても、元のサイズが双方違うから結局一緒ですよね?
元が同じサイズの画像をとるしかないでしょうか?

Aベストアンサー

単純にスタイルシートで指定すればよい
img[src=”画像URL”]{height:80px;width:auto;}
位置は、position:relative:top:5px;とかで好きに変えればよい。

そもそも、tableを使って配置するのは問題ですが、それはおいておいて・・

alignなんて16年前から非推奨の代表ですから、そんなもの使わない。

Qランダム英数

Flash Lite1.0でランダムの英数を表示させたく、
以下のスクリプトを書いてみたのですが

eisuu="0123456789abcdefghijklmnopqrstuvwxyz"
text = random(eisuu);

randomは整数しか表示されないようで困っています。
英数をランダムで表示させるにはどのようにしたら良いのでしょうか?
分かる方がいらっしゃればお教え下さい。
宜しくお願い致します。

Aベストアンサー

> ランダムの英数を表示と言うのは36桁中10桁の英数字を表示させたいと言う事です。

「○文字目を取り出す」を10回繰り返して、10個の文字を連結する
コードはご自分で考えてみて下さい。
ヒントを出すのも何ですが、for と + または += です。

Qテーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

テーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

よろしくお願いします

Aベストアンサー

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table><br>
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table>
</div>
<div class="rightbox">
<p>この部分に</p>
<p>文字をいれたいです。</p>
<p>よろしく</p>
<p>お願い</p>
<p>します</p>
<p>。</p>
</div>
</body>
</html>

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<...続きを読む

Q配列を使って、ランダムな値を複数作りたい

いつも、ありがとうございます。MAC_OSXでFlash8です。
配列を使い4つの値をランダムに出し、spd1~spd4までの変数に入れたいのですが、つまづいて立ち往生しています。今は、下記のようになっています。
randomList = new Array (1, 2, 3, 4);
for (i = 1; i <= 4; i++)
{
pos = Math.floor (Math.random () * randomList.length);
spdNum = randomList[pos];
spd = spdNum;
spdban = "spd"+i;
spdban = spd;
randomList.splice (pos, 1);
}
trace (spd1);
trace (spd2);
trace (spd3);
trace (spd4);

で、traceしても値は出てきません。
spdbanにその都度、値が入ってしまうということだと思うのですが、spd1~spd4までにそれぞれ値を入れるにはどうしたらいいのでしょうか?
よろしく、お願いします。

いつも、ありがとうございます。MAC_OSXでFlash8です。
配列を使い4つの値をランダムに出し、spd1~spd4までの変数に入れたいのですが、つまづいて立ち往生しています。今は、下記のようになっています。
randomList = new Array (1, 2, 3, 4);
for (i = 1; i <= 4; i++)
{
pos = Math.floor (Math.random () * randomList.length);
spdNum = randomList[pos];
spd = spdNum;
spdban = "spd"+i;
spdban = spd;
randomList.splice (pos, 1);
}
trace (spd1);
trace (spd2);
trace (spd3);
trace (s...続きを読む

Aベストアンサー

こんにちは。
spd=spdNumまでで、
spdには、randomListのどれかが、
入っていると、仮定します。

spd1に値を入れるには、
spd1=xx
とする必要があります。
このプログラムには、それがありません。
したがって、もともと、spd1という変数が
ないので、traceできないはずです。
ここでは、
spd=new Array();
としておいて、
forの中で、
spd[i]=spdNum
とすれば、
trace(spd[1])~trace(spd[4])
で、取り出せるはずです。

"spd"+i=spdNumという書き方は、
変数名に、変数を使うんで、
無理だと思います。

まだまだ、短くなると思います。
プログラム上、分からないところも
ありますが。
すぐに、気づきましたので。

Qhtml初心者です。 仕事で、 テーブル内の行にある文字と文字の間(セル間?)を調整したいが、どうす

html初心者です。
仕事で、
テーブル内の行にある文字と文字の間(セル間?)を調整したいが、どうすれば…
外枠だけで、内枠の線は無しにしています。

ーーーーーーーーーーーーーーーーーーー
テーブルタイトル帯(右端まで)
あいう えお
かきく けこ
ーーーーーーーーーーーーーーーーーーー


上記の様なテーブルがあります。
あいう〜えお間の余白が広すぎて、調整したいです。
ブラウザを縮小したら
ーーーーーーーーーーーーーーーーーーー
テーブルタイトル帯(右端まで)
あいう えお
かきく けこ
ーーーーーーーーーーーーーーーーーーー
とちょうどよくなるのですが、
最大化しても同じ間隔になるようにぎゅっと詰めて調整したいです。

なお、テーブル全体の枠や帯の色などは
classで設定されていますが、
システム管理者(サイト側)か、昔、拾ってきたやつをそのまま利用しているだけのいずれかで、スタイルシートの中身がどうなっているのか、どこにあるのか、周りも全く分からず困っています。
こちらが指定してるのは、htmlのみです。

あいう〜けこ間のコードは以下
<table class=”○○”>
<tr bgcolor=〜> <td width=〜>
あいう 画像リンク
</td>

<td width=〜>
えお 画像リンク
</td>
</tr>



かきくけこも同様です。


あいう〜えお間の余白を縮める(ブラウザ縮小しても最大化しても同じ間隔)には、
widthの数値をかえるのでしょうか?
しかし小さくしたり大きくしても、縮まりませんでした。すべて同じ数値にしました。

スタイルシートをいじるしかないでしょうか?
どうしても中身を知ることはできない状況です。。
htmlだけで行ごとの調整は可能でしょうか?

html初心者です。
仕事で、
テーブル内の行にある文字と文字の間(セル間?)を調整したいが、どうすれば…
外枠だけで、内枠の線は無しにしています。

ーーーーーーーーーーーーーーーーーーー
テーブルタイトル帯(右端まで)
あいう えお
かきく けこ
ーーーーーーーーーーーーーーーーーーー


上記の様なテーブルがあります。
あいう〜えお間の余白が広すぎて、調整したいです。
ブラウザを縮小したら
ーーーーーーーーーーーーーーーーーーー
テーブルタイ...続きを読む

Aベストアンサー

ですから、tableを使って配置するのは根本的に間違い・・・。

ウェブ開発だと、当然firefoxお使いだと思いますが、そのアドオン fireBug使えば、ソースの一はわかるはずです。値を適当に変えてチェックもできるし、スタイルシートのカスケーディングも一目でわかる。

Q別ファイルからのランダム抽出について

php超初心者です。
よろしくお願いします。

同階層にあるphpフォルダから
1行だけ選択する方法は

<?php
$data = file("./php/random.txt");
srand((double)microtime()*1000000);
shuffle($data);
echo $data[0];
?>

でできたのですが、

これを同じphpフォルダのrandom.txtから
ランダムに3~4つ抽出するには
どのように書けばいいのでしょうか?
(抽出したテキストはダブらないようにしたいと思います。)

*random.txtには10行ほどのテキストが記述されています。

以上、ご回答よろしくお願いします。

Aベストアンサー

>Parse error:の表示が出てしまい、
「$maxno = rand(3,4)」の最後のセミコロン「;」が抜けてました。失礼しました。

先の回答でも触れましたが、どうして
>$data = file("./php/random.txt");
>srand((double)microtime()*1000000);
>shuffle($data);
の3行をfor文の中において置くのでしょう?
>抽出したテキストはダブることがありました。
ということの原因になっています。for文の前(正確には$maxno = rand(3,4);の前)に出してください。

コードのコピペだけでなく、コードの意味や動作確認をしっかり行ってください。
それを繰り返すことで補足質問のようなことは、ご自分で解決出るようになるはずです。

QHTMLでトップページの画像およびリンクのランダム表示について

どなたかお力を貸して下さい。
現在HPを作成中なのですがそのHPのトップページに表示される画像と、
それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。
添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。
HTMLは
<h2>New!!新着製品</h2>

<div class="itemlist">
<div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div>
<h3>機種名</h3>
<p>販売ページへ飛ぶ</p>
</div>

スタイルシートは
#main .itemlist {
border: 1px solid #CCCCCC;/*1個あたりのボックスのボーダー設定*/
padding: 5px;
overflow: hidden;
margin-bottom: 0.5em;
width: 673px;/*段落タグ(p)の横幅とサイズを合わせる設定です。この下二つのmarginも。*/
margin-right: auto;
margin-left: auto;
}

#main .itemlist h3 {
color: #000000;
border-bottom: 1px solid #cccccc;
border-left: 4px solid #CCCCCC;
padding: 0px 0px 0px 5px;
margin-bottom: 0.5em;
font-size: 100%;
}

#main .itemlist p {
padding: 0px;
}

#main .itemlist p, #main .itemlist h3 {
margin-left: 265px;/*画像の幅に合わせてここは変更する*/
}

#main .itemlist a img {
padding: 5px;/*写真と外線との余白*/
border: 1px solid #CCCCCC;
}

#main .itemlist a:hover img {
border: 1px solid #999999;
}

#main .itemlist div.img {
float: left;
}
なのですが相当難しいでしょうか?

どなたかお力を貸して下さい。
現在HPを作成中なのですがそのHPのトップページに表示される画像と、
それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。
添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。
HTMLは
<h2>New!!新着製品</h2>

<div class="itemlist">
<div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div>
<h3>機種名</h3>
<p>販売...続きを読む

Aベストアンサー

JavaScriptを使えば簡単にできますよ。

「画像をランダムに表示する」(http://javascript.eweb-design.com/0804_ri.html)が参考になるでしょう。


人気Q&Aランキング

おすすめ情報