黒背景で白文字をフェードインするHTMLソースの作り方
- 黒背景で白文字をフェードインするHTMLソースの作り方をご紹介します。
- リンク挿入文字もフェードイン対応させる方法も解説します。
- SEOを意識したタグやハッシュタグの活用方法もお伝えします。
- ベストアンサー
黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて
黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えてください。 <head>の間に、 <script language="JavaScript"> <!-- var count = 0; var f3 = "0123456789abcdef"; function fadein(i) { if ( count < 16 ) { c = f3.charAt(i); document.fgColor = c + c + c + c + c + c; count++; setTimeout("fadein(count)",100); } } fadein(); //--> </script> </head> <body bgcolor="#000000" text="#ffffff"> 以上のタグを入れ、 <body bgcolor="#000000" text="#ffffff"> タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。 ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。
- aoyan037
- お礼率25% (1/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃１だ。ていせいだべぇ。 すくりぷとむこうのとぎも、やっぱりけぇておけばいがった。はんせいだぁ～。 color:#0 もよぉ～、まずかった。あどがらきづいだぁ。すまねぇ。 <!DOCTYPE html> <title></title> <style type="text/css"> a { font-size: 2em; } </style> <script> document.write ( '<style type="text/css">\n a.fade { background-color: #000; color:#000; }\n</style>' ); </script> <body> <ol> <li><a href="#">abc</a> <li><a href="#" class="fade">def</a> <li><a href="#">ghi</a> <li><a href="#" class="fade">jkl</a> </ol> <script> //@cc_on var fadeIn = (function (addRule) { return function (styleSheet, selector, interval) { var color = 0; var count = 15; var loop = function () { var colorStr = 'color:#' + (color ? color.toString (16): '000'); addRule.call (styleSheet, selector, colorStr); count-- && setTimeout (arguments.callee, interval); color += 0x111; }; loop (); }; })(function ( selector, property ) { /*@if (@_jscript) this.addRule (selector, property); @else@*/ this.insertRule (selector + '{' + property + '}', 'undefined' == typeof this.cssRules ? 0: this.cssRules.length); /*@end@*/ }); fadeIn (document.styleSheets[1], 'a.fade', 100); </script> すくりぷとでかいた、すたいるしーとは、２ばんめなので document.styleSheets[1] だぁ。まぢげぇねぇようになぁ。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
#1様のおっしゃる、「おぱしてぃ～」を利用した操作のほうが、文字の色が何色でも良いし画像があっても同様にフェードインできるし便利ではなかろうか？ ちょっとずるをして、ライブラリを使うともっと簡単。 （画像は投稿が面倒なので、入れてないし、背景も関係ないので白のままですが…） 下の例ではクラス指定がfadeのものだけフェードインするようにしています。（jqueryを使用） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function() { $(".fade").hide().fadeIn(4000); }); //--> </script> </head> <body> <p>なんたらかんたら</p> <span class="fade" style="color:#f00;"> フェードインする<a href="#">ここがリンク</a> </span> <p>あ～だ、こ～だ</p> <div class="fade" style="width:300px; color:#0ff; background-color:#ffd;"> 画像とかでもそのままフェードイン <div style="width:150px; height:100px; color:#0d0; background-color:#fdd; margin:50px;"> 何でも良いんだよね </div> </div> <p>むにゃ、むにゃ、むにゃ…</p> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
document.bgColor document.fgColor document.linkColor document.vlinkColor document.alinkColor リンクのカラーに相当するdocument.bgColor は、document.linkColorだけど、そもそも document.bgColor document.fgColor document.linkColor document.vlinkColor document.alinkColor は、ブラウザーに極度の依存し、しかもReadOnly だったような...。もう廃止されるのでは... そこで、↓のようにかなり書き換えました。 <body onload="fadein(0);" style="background-color:#000000;color:#ffffff;"> にして function fadein(i) { var count=i; console.log(i); var f3 = "0123456789abcdef"; if ( count < 16 ) { c = f3.charAt(i); var colorstr = c + c + c + c + c + c; document.body.style.color= "#" + colorstr; var link=document.getElementsByTagName("a"); for(var c=0;c<link.length;c++){ link[c].style.color = "#"+colorstr; } count++; var timer = setTimeout(function(){fadein(count);},100); } else clearTimeout(timer); } です。（半角空白は全角空白にして下さい）。 ※timerの後始末もした方がよかろうとclearTimeoutもしてます。 ※今回は、timer=setTimeout("fadein(count)",100);はだめ。 var timer = setTimeout((function(sore){ return function(){fadein(sore);}; })(count),100); ならよいけど...無駄な....
- babu_baboo
- ベストアンサー率51% (268/525)
きっとだれかが、あんかーをあつめてきて、それぞれにおぱしてぃ～でもへんかさせるやつを かくだろうとおもい、ちがうやつで、せめてみた。 へんかするのがくろからしろだけなのでかなりださいね。すみません。 こしがいたくて・・・。 ぜんかくくうはくははんかくにしてね。 <!DOCTYPE html> <title></title> <style type="text/css"> a.fade { background-color: #000; color:#000; } </style> <body> <ol> <li><a href="#">abc</a> <li><a href="#" class="fade">def</a> <li><a href="#">ghi</a> <li><a href="#" class="fade">jkl</a> </ol> <script> //@cc_on var fadeIn = (function (addRule) { return function (styleSheet, selector, interval) { var color = 0; var count = 15; var loop = function () { addRule.call (styleSheet, selector, 'color:#' + color.toString (16)); count-- && setTimeout (arguments.callee, interval); color += 0x111; }; loop (); }; })(function ( selector, property ) { /*@if (@_jscript) this.addRule (selector, property); @else@*/ this.insertRule (selector + '{' + property + '}', 'undefined' == typeof this.cssRules ? 0: this.cssRules.length); /*@end@*/ }); fadeIn (document.styleSheets[0], 'a.fade', 100); </script>
関連するQ&A
- 文字をフェードインするHTML教えて下さい
infoseekで勉強しながら会社のHP作ってますが、 文字をフェードインする方法が上手くいきません。 <script language="JavaScript"> <!-- count=0; Num=1; Time=100; function FadeIn(str){ c=str.charAt(count++); for(i=0;i<Num;i++){ document.all["Fade"+i].style.color="#"+c+c+c+c+c+c; } if(count<str.length){ setTimeout("FadeIn('"+str+"')",100); } } //--> </script> 次に、<body>タグ内を<BODY onload="FadeIn('fedcba9876543210')" >と変更すると、JAVAスクリプトの準備は終了になります。 後は、フェードインさせたい文字を、<span id="Fade0">文字列</span>と設定します。これで、文字がじんわりとフェードインして現れます。 上記はサンプルのコピーで、固定のバナーの下にHPへようこそ！という文字がフェードインします。 なのですが、どの部分がバナーのHTMLか、文字のHTMLか分からなく、 ＞＞、<span id="Fade0">文字列</span> この意味もわかりません。表示したい文字を「文字列」に置き換えれば良いのですか？？そしてこの一文をどこに組み込めば良いのかもわかりません・・・。 何度かやってみましたがエラーになってしまいます。 他の方法でも良いので、お解かりになるかた宜しくお願いいたします！
- ベストアンサー
- ホームページ作成ソフト
- リンクをマウスオーバーでフェードイン・アウトがしたです。
リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた１回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか？ <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- HPの背景や、リンクの文字色を変えたりしたら・・・
HPの背景やリンクの文字色を変えてFFFTPでアップしたのに、ブラウザでは変わっていません。 テキストエディタの確認では変わるのですが・・・。 キャッシュのクリアもしましたが、なにも変わりません。 タグの問題ですか？ <html> <head> <title>profile</title> <STYLE type="text/css"> <!-- a{text-decoration: none} a:hover{color:hotpink ; font-size:35pt} body{background-image:url(○○.bmp) ; background-attachment:fixed} --> </style> </head> と、タグはこんな感じですが・・・。
- ベストアンサー
- HTML
- HTMLソースの表内の文字色を指定する方法
教えてください。XP HOME EDITION OFFICE2003 メモ帳でＨＴＭＬソースを作成しています。 <body>でbgcolor とtext color を指定し、地の部分ではOKですが、 表内ではbgcolor のみ有効で、文字はオリジナルです。 <質問１> 表内文字をタグで指定する方法 <質問２> 一部の文字を「楷書体」にする方法 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- set TImeout
<html> <head> <title>フェードインさせたい </title> <script language="JavaScript"> <!-- r_color="000123456789abcd"; g_color="0123456789abcdef"; b_color="000123456789abcd"; function fadein(pos,speed){ clearTimeout(timer1); r=r_color.charAt(pos); g=g_color.charAt(pos); b=b_color.charAt(pos); document.bgColor="#"+r+r+g+g+b+b; if(pos<15){ timer1=setTImeout("fadein("+(pos+1)+","+speed+")",speed); }else{ clearTImeout(timer1); } } //--> </script> </head> <body text"#000000"onLoad="timer1=setTimeout('fadein(0,100)',100)"> <font size="5">フェードインします</font> </body> </html> 以上のタグが今勉強している本に載っていたのですが 最初にonloadで呼び出された関数の中にClearTImeaout （１１行目）にありますがそこでこの関数はとまって しまわないのでしょうか？ また二つSettimeaoutがありますが二つとも識別する 単語がtimer1で同じですけどごっちゃにならないのでしょうか？
- ベストアンサー
- JavaScript
- 外部ＣＳＳ。ページ全体の背景色や文字色を変えたい。
これまでは各ページごとに、このようなタグをかいていました。 <BODY bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000"> ページ全体の「背景色」「テキスト色」「リンク色」「既読リンク色」「選択中リンク色」です。 だけどこれからは、外部ＣＳＳで同じことを指定するようにしたいです。 ですが、調べてもなかなか明確なタグが分かりません。 宜しければ教えて下さい。
- 締切済み
- HTML
- HTMLソースにない文字がブラウザ画面に表示
HTMLのソースについて DOMソースについて ある画面のHTMLについて質問です。HTML自体には、閉じるタグが漏れているとかそういったミスが ないことを確認済。 対象のHTMLをブラウザで見ると一番先頭に「/」（半角スラッシュ）が入っています。HTML自体をどんなにみても 余計なスラッシュはありません。見落としがあるといけないので検索をしてみたのですがやはりありません。これは間違いありません。 IE１０ DebugBarを使用しDOMソースというのをみると、<body>のすぐ下に「/」がありその下に<meta ・・・ が続いています。 FireFoxで見てもやはり「/」は画面の一番上に表示されています。インスペクタでみるとIE同様 <meta ・・・ <link ・・・ が、bodyタグ、スラッシュ、の次に続きます。 画面で右クリックしソースをみると 一番先頭に「/」があり次に <!DOCTYPE ・・・と続きます。 すごく困っているのは このスラッシュを取り除きたいのですが、どうしたらいいのでしょうか？ bodyの中を空にしてみたのですがやはり画面でみると先頭に半角スラッシュが登場します。 ほんとうにわからず質問させていただきました。 次に どうしてこのような現象が起きるのでしょうか？ HTMLの先頭部分は以下のとおりです。 bodyタグの中は簡単なtebleです ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ｘｘｘｘｘｘｘ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/xxx.js"></script> <script type="text/javascript" src="js/xxxxxx.js"></script> </head> <body> <div> <table> (略） </table> </div> </body> </html>
- 締切済み
- HTML
- 掲示板ソフトの壁紙の設定が出来ないんです
フリーソフトでの掲示板の設定で自分のＨＰで使っている壁紙が 付かないんです。何処が違うんでしょう？？教えて下さい。 同じフォルダに壁紙用のファイルもUP済みです。 文字色も変えたいのですが・・ オリジナルは ##### 文字色や背景色、壁紙などの設定(普通のBODYタグ) $body = '<BODY BGCOLOR="#FFFFFF" TEXT="#000000">'; で変更したのがこれなんですが・・↓ 設定部分のコピーは以下です。 ##### 文字色や背景色、壁紙などの設定(普通のBODYタグ) $body = '<body background="neko.gif" TEXT="#000000">'; 宜しくお願い致します
- ベストアンサー
- フリーウェア・フリーソフト
- フェイドインしながら移動させたい
下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。 フェイドインしながら移動させるにはどのように書けば良いのでしょうか。 ご教授頂けると非常に助かります。
- 締切済み
- JavaScript
- conf.php設定について
index.php ****************************** <?php require("conf.php"); ?> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title><?= TITLE ?></title> </head> <body bgcolor="#FFFFFF" topmargin="100"> //例１ <? virtual ('./cgi-bin/count.cgi?LOG=$logfile'); ?> //例２ <?php $count; ?> <?= COM ?> <BR><BR> </center> </body> </html> conf.php *************** 例１ $logfile = "****.log"; //カウンターファイルリンク 例２ $count = "<? virtual ('./cgi-bin/count.cgi?LOG=****.log'); ?>"; 例１．例２ともにうまくいきませんでした。 conf.phpに集約して記入したいのですがお知恵を拝借できれば嬉しいです。どうぞよろしくお願いします。
- ベストアンサー
- PHP
お礼
希望のソースだけでなく、私の提示したタグが旧式のものという知識など、すべての回答がとても参考になりました！ 今回は使用させていただいたものをベストアンサーとさせていただきました。 ご回答、本当にありがとうございました。