マクドナルド
http://www.mcdonalds.co.jp/

インターデコハウスの住宅
http://www.idh.co.jp/style/

ソニー
http://www.sony.co.jp/

のようなとても動きのあるホームページを作りたいです。

私が分かるもの
『XHTMLとCSS』はだいたい
『Javascript』は部分部分

上記のホームページのような動きを実現するには
Javascriptだけでできるんですよね??

こういったプログラムを作るために勉強をしたいのですが、
どのように勉強をしたらいいのか分かりません。
学校に通うなど余裕がないため
おすすめサイトや本がありましたら教えて下さい。

私が使えるJavascriptのレベルは↓を一通りやったところです。

~ JavaScript ~
JavaScript入門
http://www.ajaxtower.jp/js/

JavaScriptサンプル集
http://plusone.jpn.org/javascript/sample1.html

イヌでもわかるJavaScript講座
http://www.red.oit-net.jp/tatsuya/java/index.htm

初心者のためのJavaScript講座
http://www.pori2.net/js/

jQueryもちょっとだけ…
~ jQuery ~
jQuery入門 (ver 1.3)
http://www.openspc2.org/JavaScript/Ajax/jQuery_s …

お願いします。

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

A 回答 (4件)

ソニーのはJavaScriptですけど、Flashでも考え方は同じです。




参考にされているサイトでは、

初心者のためのJavaScript講座
位置の指定2
http://www.pori2.net/js/DOM/10.html

この一番下に書かれているとおり、
タイマーを使うとアニメーション出来ます。


考え方としてはそれだけです。
どのタイミングで、どのタイマーを使うか(どの位置を指定するか)という制御だけです。

タイマーの制御は自前で作らずに、アニメーションライブラリがよく使われます。
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:26

さがせばここにも、過去問答のなかにあるよ



みどるれべるよりちょっと下くらいか!?
http://oshiete.goo.ne.jp/qa/5513884.html
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:26

一応、どのサイトもflashも使ってますね

    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:25

そこまで出来てFlashを知らないなんて事は無いですよね?


http://e-words.jp/w/Flash.html
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:25

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

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

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

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

Q携帯専用ホームページの作り方

携帯専用ホームページの作り方をご存知の方は教えてください。
無料レンタルホームページ(ポケスペ・魔法のiらんどなど)ではなく、全て自分で作る携帯専用ホームページの作り方を教えてください。あと、その場合費用はかかるのでしょうか?
よろしくお願い致します。

Aベストアンサー

PC向けサイトをHTMLタグで記述して、制作することができますか?
でしたら、その知識を利用して、iモード向けのサイトを作成すれば良いと思います。
個人で手打ち制作でキャリア別振り分けは、作る時は良くても(結構手間がかかりますが)更新が面倒になります。
個人運営の携帯サイトなら、プロバイダまたはレンタルサーバーなどでCGIが使えない場合は、掲示板などはレンタルで十分だと思います。
レンタルサーバーを借りるなら、そのレンタル料が費用としてかかります。
無料スペースの場合は、広告表示の問題があるため、携帯電話に対応しているか、どういう条件になっているかなどを確認してください。
(iswebなどではiフォルダなどにアップロードする等)

最近の携帯電話はともかく、旧来のものでは、表示できるページのサイズに制限があります。
サイトを制作する前に、ターゲット(利用者の年齢や利用携帯機種など)をきちんと設定した方が良いと思います。
携帯電話の機種によって、使えるタグや画像ファイルなどが異なってきます。
PCに比べて動向など変化しやすいせいもあると思いますが、携帯向けサイトのハウツー本はあるようでありません。
以前買ったことがありますが、あっという間に時代遅れになった上、大雑把な考え方は参考になりそうですが、技術やTIPSとしてはあまり参考になりません。
携帯向けのCGIを無料配布しているサイトがいくつかありますが、PC向けのCGIを設置したことのない又は不慣れな場合は、カウンタ・掲示板などの利用はレンタルをおすすめします。
なお、これらは個人運営のサイトのつもりで、書いています。

「しらぎくさいと>携帯電話向けコンテンツの書き方」
http://www.marguerite-site.com/Nihongo/HowToMakeYourWeb/Mobile/index.html

サイト制作に慣れた人ならば、また別のサービスをおすすめしますが、無料で、自作CGIなどの設置をしない場合には「FC2WEB」などが良いかもしれません。

[FC2WEB無料ホームページ]
http://www.fc2web.com/
[FC2無料ケータイHP]
http://k.fc2.com/

参考URL:http://www.nttdocomo.co.jp/p_s/imode/make/index.html

PC向けサイトをHTMLタグで記述して、制作することができますか?
でしたら、その知識を利用して、iモード向けのサイトを作成すれば良いと思います。
個人で手打ち制作でキャリア別振り分けは、作る時は良くても(結構手間がかかりますが)更新が面倒になります。
個人運営の携帯サイトなら、プロバイダまたはレンタルサーバーなどでCGIが使えない場合は、掲示板などはレンタルで十分だと思います。
レンタルサーバーを借りるなら、そのレンタル料が費用としてかかります。
無料スペースの場合は、広告表示の...続きを読む

Qhttp://www.skuare.net/test/horizont

http://www.skuare.net/test/horizontinyscrolling.html
上記のサイト様で使用しているjavascriptを使ってデザインを考えています。

上記のサイト様は、メニューとコンテンツが同じフレーム内(階層)にありますが、
これを、メニューとコンテンツを別々のフレームに入れ(コンテンツ部分はインフレームに入れたいです。)、メニューを常に見える状態にしたいです。
(添付画像参照)

上記の状態までは、問題なくページを作れています。
しかし、色々試してはみたのですが、フレームに入れるとなかなかうまく行かず困っています。
どのように直せば良いでしょうか…

どうぞ宜しくお願い致します。

Aベストアンサー

このjavascriptを使って親からiframeコンテンツ内部をスクロール制御するよう
直すのは結構たいへんそうです。

私なら、iframeコンテンツのhtmlの中に、このjavascriptと、
スクロールナビゲーションリンクのタグを非表示で、そのまんま
設置しておいて、


親にも設置したナビゲーションリンクから、iframe内のナビゲーションリンク
をjavascriptで突っつきます。

Qホームページの作り方

ホームページを作りたいのですが、全く分かりません。そこで初心者でも分かる作り方を教えてください。それか作り方が乗っているホームページを紹介してもらえないでしょうか?よろしくお願いします。

Aベストアンサー

全くの初心者なら、
楽天(http://isweb.www.infoseek.co.jp/)や、
ガイアックス(http://www.gaiax.com/)や、
カフェスタ(http://www.cafesta.com/index.jsp)
などが良いと思いますよ!
でも、ページのイメージなどは限られてしまいます。

自分で全てページを作りたいのなら、
やっぱり他のサーバーなどを借りるのがいいですね。
http://muryou3.fc2web.com/home.htmlなどを見て、
参考にしてください。

あとhttp://tohoho.wakusei.ne.jp/www.htmのサイトは、
とても有名で少しはHp作成に関して理解できますよ。

Qhttp://www.・・・を起動する方法

http://www.・・・を変数にいれて、そのurlを起動する
方法を教えてください。
よろしくお願いします。

Aベストアンサー

<html><head><title></title>
<script type="text/javascript">
function goW3(){
var u=document.getElementById('url').value;
location.href=u;
}
</script>
</head>
<body>
<p>
URLを入力してください<br>
<input id="url" type="text" value=""><input type="button" value="GO" onclick="goW3()">
</p>
</body>
</html>

Qビーズのフクロウの作り方が載っているホームページや本を教えて欲しいです

ビーズのフクロウの作り方が載っているホームページや本を教えて欲しいです。

立体のビーズのものでかわいらしいものを探していますが、なかなか見つかりません。
ビーズモチーフっていうのかな?、アイロンビーズとは違い、立体のものです。

古い質問の中に、同じようにフクロウを探している質問がありましたが、回答に載っているホームページの中ではフクロウは見つかりませんでしたし、作り方は載っていないようです。

形を見ただけでは、よく作れないので、作り方が載っているようなホームページか本があればうれしいです。

知っている方がいらっしゃいましたら、よろしくお願いします。

Aベストアンサー

「ビーズ ふくろう 作り方」で検索しただけですが、以下あたりはどうでしょう?

http://poochnavi.com/beads/recipe/fukurou/rec01.html

Qhttp://www.rapty.com/

http://www.rapty.com/

上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。

さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。

これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

Aベストアンサー

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;}

#navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; }
#navi li { padding:2px; padding-left:15px; }
#navi li.active { background-color:#f44; }
#navi li a { display:block; text-decoration:none; }
#navi li img { width:200px; height:70px; _height:69px; border:0; }

#content { list-style:none; margin:0; padding:0; position:relative; }
#content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;}
#content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; }
#content li.active { display:block; }

li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div id="wrapper">
<ul id="navi">
<li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li>
<li><a href="test2.html"><img src="B.jpg" alt="#"></a></li>
<li><a href="test3.html"><img src="C.jpg" alt="#"></a></li>
<li><a href="test4.html"><img src="D.jpg" alt="#"></a></li>
</ul>
<ul id="content">
<li id="mask"></li>
<li class="active">
<a href="test1.html">
content1
<br>ここは画像1枚でもいいし、
<br><strong>文章でもいい。</strong>
<br>ただし、はみ出しても表示されない。
<br><img src="E.jpg" alt="picture" style="margin-top:150px;">
</a>
</li>
<li>
<a href="test2.html">content2</a>
</li>
<li>
<a href="test3.html">content3</a>
</li>
<li>
<a href="test4.html">content4</a>
</li>
</ul>
</div>

<script type="text/javascript">
<!--
(function() {
var u = document.getElementById('navi');
var mask = document.getElementById('mask');
var navs = document.getElementById('navi').getElementsByTagName('LI');
var cnts = document.getElementById('content').getElementsByTagName('LI');
var grovalTid, maskTid, duration = 5000;
try { u.addEventListener("mouseover", func, false);
} catch(e) { u.attachEvent("onmouseover", func); }
grovalTid = setTimeout(change, duration);

function func(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
while (t.nodeName != 'LI') t = t.parentNode;
if (modeSet(t, 0)) return;
fadeIn(t);
}

function fadeIn(e) {
var i, k;
clearTimeout(grovalTid);
if (maskTid) clearInterval(maskTid);
maskTid = setInterval(fade(), 40);
for (i=0; i<navs.length; i++) {
k = e==navs[i]?1:-1;
modeSet(navs[i], k);
if (cnts[i+1]) modeSet(cnts[i+1], k);
}
}

function fade() {
var o = 95;
setOpacity(mask, o);
mask.style.display = 'block';
return function() {
o -= 5;
o = Math.max(o, 0);
setOpacity(mask, o);
if (o > 0) return;
clearInterval(maskTid); maskTid = null;
mask.style.display = 'none';
grovalTid = setTimeout(change, duration);
}
}

function change() {
for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break;
fadeIn(navs[++i % navs.length]);
}

function modeSet(e, n) {
if (n>0) { e.className += ' active';
} else if (n==0) { return e.className.match(/(^|\s)active$/);
} else { e.className = e.className.replace(/(^|\s)active$/, ''); }
}

function setOpacity(e, o) {
e.style.filter = 'alpha(opacity=' + o + ')';
e.style.opacity = o / 100;
}
})();
//-->
</script>
</body>
</html>

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridg...続きを読む

Qホームページの作り方☆

 ホームページの作り方がわかる、無料のソフトを教えて下さい。
 学生の時に一度作ったのですが、確か「じゅんこ」という名前のページで、作り方が書かれていたように思うのですが・・・。先生も「じゅんこさんのホームページで各自調べて作りましょう。」と言っていました。もちろん、そのじゅんこさんというのは、クラスメイトでもなく、全く知らない人です。
 もちろん、他の方法でもいいので、作り方を教えて下さい。お願い致します。

Aベストアンサー

インターネットエクスプローラーをお使いでしたら、下記アドレスが参考になるかと思います。
フリーのHP作成ソフトの導入方法とHPの作り方について詳しく解説されています。

参考URL:http://www.susono.com/~tkzw4a/

QTinySlideshow(http://www.leigeber.c

TinySlideshow(http://www.leigeber.com/2008/12/javascript-slideshow/)
デモ:http://sandbox.leigeber.com/javascript-slideshow/
ソース:http://forum.leigeber.com/index.php?app=downloads&module=display&section=download&do=confirm_download&id=6
↑こちらのソースをカスタマイズして使用させていただこうと思っています。

変更したいのは、script.jsの51~53行目です。
g.onmouseoverに対して、2つのイベント(サムネイルの透明度変更)と(大イメージの表示→デフォルトソースではonclickで実行)を同時におこしたいのですが、うまくいきません。(後に書いたもののみ動作します。)
現状の該当部分のソースは、下記の通りです。

g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
g.onmouseover=new Function(this.n+'.pr('+i+',1)');
g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
g.onclick=new Function('window.location="'+a.l+'"');

解決策をご教示いただけますと幸いです。
何卒よろしくお願いいたします。

TinySlideshow(http://www.leigeber.com/2008/12/javascript-slideshow/)
デモ:http://sandbox.leigeber.com/javascript-slideshow/
ソース:http://forum.leigeber.com/index.php?app=downloads&module=display&section=download&do=confirm_download&id=6
↑こちらのソースをカスタマイズして使用させていただこうと思っています。

変更したいのは、script.jsの51~53行目です。
g.onmouseoverに対して、2つのイベント(サムネイルの透明度変更)と(大イメージの表示→デフォルトソースではonclickで実行)...続きを読む

Aベストアンサー

イベント属性に記憶できる値はひとつだけですから
後から代入された値に置き換えられてしまいますね。

g.onmouseover=new Function('TINY.alpha.set(this,100,5);'+this.n+'.pr('+i+',1);');

単純に、これで良さそうに見えますけど。

Qブログまたはホームページの作り方について

ブログまたはホームページの作り方について

小説を書け 簡単に作れ ヤフーやグーグルで検索したら出てくる?(携帯サイトで出ても出なくてもいいですがパソコン インターネットで出るのがいいです)
ブログまたはホームページの作り方を教えてください
またそのような事ができるサイトを教えてください

Aベストアンサー

>小説を書け 簡単に作れ ヤフーやグーグルで検索したら出てくる?

どこのサービスでも小説は書けるし、簡単に作れるし。
YahooやGoogleの検索結果に出したいのなら、自分でそれらの検索サイトに、検索対象にしてくれるように申請を出せば検索結果に出て来るけど、申請しなけりゃ出るかどうかは運任せ。

[参考]FC2 -無料ホームページ アクセス解析 ブログ 動画 レンタルサーバー SEO 対策 等 -
http://fc2.com/

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む


人気Q&Aランキング