• 締切済み

初心者です お暇な方お願いします

独学でHPをソフトに頼らず作ろうとしています(*^_^*) まわりに詳しい方がいないのでわかる方にチェックお願いしたく質問しました(>_<) HPのトップページ前の作成中なのですが まず画面が開いたら写真を2枚ほどスクロール表示させて、同時にグラデェーションの文字を波打ちスクロールさせて、10秒後にトップページに自動的にジャンプ、ジャンプ時に特殊効果させたいのですがこのソースであってるでしょうか? 写真は勝手に保存されないように保護もしようとしてます 完璧に保護できないのもわかっています 初心者が見よう見真似で作ったものですので笑わずに優しく教えていただける方指摘、ここをこうしたほうがいいよって意見お願いしますm(__)m <HTML> <HEAD> <!-- ページ移動の時に特殊効果↓--> <meta http-equiv="page-enter" content="revealtrans(duration=2,transition=12)"> <meta http-equiv="page-exit" content="revealtrans(duration=2,transition=12)"> <!--↓ページジャンプ --> <meta http-equiv="refresh" content="秒数;url=ページアドレス">   <style type="text/css"> <!-- スクロールバーを消す↓--> <!-- body{ scrollbar-3dlight-color:white; scrollbar-track-color:white; scrollbar-darkshadow-color:white; scrollbar-face-color:white; scrollbar-highlight-color:white; scrollbar-shadow-color:white; scrollbar-arrow-color:white; } --> <!-- 画像保存禁止↓--> <!-- div.sample{ position:relative; width:240px; height:180px; } span.guard{ position:absolute; display:block; width:100%; height:100%; background-image:url(../img/spacer.gif); } --> </style> <META NAME="keyword" CONTENT="検索の為の単語"> <META NAME="description" CONTENT="検索結果で表示される単語"> <TITLE>~タイトルを入力~</TITLE> </HEAD> <BODY> <!--画像中央表示↓--> <P align="center"><IMG src=" <!--画像をモノトーン表示↓--> <IMG SRC=" <div class="sample"> <span class="guard"></span> <IMG src="../../design/original/sample/ <APPLET CODE=ImageChanger.class WIDTH=233 HEIGHT=329> <param name="images" value=" 画像名 |6, 画像名 |7"> <param name="fontShadowColor" value="0"> <param name="fontBackColor" value="202060"> <param name="target" value="text1"> <param name="frame" value="bottom"> <param name="autoLink" value="true"> </APPLET> " alt="保存禁止" width="240" height="180"> </div> " STYLE="Filter: Gray"> " border="0"></P> <!--文字が右から左に波打ちながら流れる↓--> <marquee behavior="alternate" direction="up" height="50"> <marquee direction="left"> <!--グラデェーション↓--> <SPAN STYLE="width: ; height:30pt; filter: Alpha(Opacity=15,FinishOpacity=90,style=2)"> <I STYLE="font-size: 24pt; color: lightblue; width: ; height: 30pt; filter: Shadow(Color=#0000aa,Direction=225)"> ここに文章 </I> </SPAN> </marquee></marquee> </BODY> </HTML>

  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

回答No.1

どこからコピーしてきたのか知らないけどコピペミスしてるよ。 自力で勉強した子ならありえないミスなので言わせてもらいます。 <IMG SRC="**" alt="保存禁止" width="240" height="180"> の1文の中に <div class="sample"></div>が入り込んでる。 あともう1箇所全く同じミスあり。 てか、それコピーして自分で開いてチェックできるから まずは自分でやってみたほうが良いと思いますよ。 ダブルクリックするだけで、 表示されるかされないかは聞くより早く分かると思いますが。 まさか表示させるブラウザがインストールされてません、なんてことはないだろうし。

関連するQ&A

  • 初心者ですが・・・・・

    はじめまして  最近ホームページを勉強中のものです。 xoopsというソフトを使って作っているんですけど 配置は中央ブロック中央で htmlでちょっとしたトップを作ってブラウザで確認したのですが、 画像にリンクを張ったところがfirefoxでは画像だけになっていてリンクされない状態で表示されてしまいます。 これが一応全タグなんですけど  ちょっと初心者が作った奴なんで・・・・・・・・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"><title></title> </head><body onload="jikoku();MM_preloadImages('genki1.gif')" background=""> <center> <table border="0"> <tbody> <td background="" width="650" height="30"></tr> </tbody> </table> </center> <center> <table> <tbody> <tr> <td align="center" height="295" width="448" border="10px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="448" height="295"> <param name="movie" value=""> <param name="quality" value="high"> <embed src="" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor=#FFFFFF width="448" height="295"></embed> </object></td><br> <td align="center" height="313" width="279"><img src="" border="0" height="250" width="150" usemap="#Map"><map name="Map"> <area shape="rect" coords="42,201,135,222" href="mailto:info@m-sh.jp?Subject=問い合わせ"><b><font size="+2"> </font></b> <a href=""><span style="font-size: 10.5pt; font-family: Century;" lang="EN-US"></span></a></font> </td> </tr> </tbody> </table> <table border="0"> <tbody> <td rowspan="2" align="center" background="" width="650" height="30"</td> </tr> </tbody> </table> <marquee> <font size="+1"><strong><a href="" target="frame2"></a></strong><a href=""><font color="#ff0000"><strong></strong></font><font color="#ff0000"></font><font color="#ff0000"></font><font color="#ff0000"></font></a></font> </marquee> </font> <table> <td align="center" width="260" height="60"> <img src="" width="260" height="60" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="6,5,54,56" href=""> <area shape="rect" coords="71,6,121,55" href=""> <area shape="rect" coords="135,5,185,55" href=""> <area shape="rect" coords="198,5,248,54" href=""> </map> <td align="center"> <marquee> <br><font size="+1>********</font> </marquee> なんですが <table> <td align="center" width="260" height="60"> <img src="" width="260" height="60" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="6,5,54,56" href=""> <area shape="rect" coords="71,6,121,55" href=""> <area shape="rect" coords="135,5,185,55" href=""> <area shape="rect" coords="198,5,248,54" href=""> </map> の部分が画像だけになってしまいます。 なんか間違いとかありましたら指摘とご指導お願いします。

    • ベストアンサー
    • HTML
  • maqueとabsolute

    <html> <head> <style type="text/css"> <!-- .1{background-color:blue;width:200;height:100; position:absolute;} .2{background-color:red;width:200;height:100;} --> </style> </head> <body> <marquee direction="right"> <span class="1"></span> </marquee> <marquee direction="left"> <div class="2"></div> </marquee> </body> このようにBoxを2つ書きマーキーで右からと左からの交差を作りたいのですが、なぜかclass="2"でその列にほかのBOXが表示できないようです。つまりマージンでclass1をちょっと下にずらすと、半分切れた状態になります。position:absolute;を消してもらうとわかるのですが、アブソでない状態であれば上下にずれますが、行き来していますので、もう一歩だと思うのですが・・・。 どこが間違っているかわかりません。教えてください

    • ベストアンサー
    • HTML
  • お教え下さい

    老人です、ビルダ17を使ってスライドショーを作ったのですが、「Now Loading...」の表示が消えません。 スライドが始まったら終了させるか、写真で上書きする、簡単な方法をお教えください。 <!DOCTYPE html> <HTML lang="ja"> <HEAD> <META charset="UTF-8"> <META name="GENERATOR" content="JustSystems Homepage Builder Version 17.0.1.0 for Windows"> <TITLE>test</TITLE> <style type="text/css"><!-- span#ttx{ position:absolute; top: 30%;left:47%; color Teal; FONT size=18px"; }}} --> </style> </HEAD> <BODY background="paper_bg.gif" bgcolor="#ffffff" text="#666633" link="#ff0000" vlink="#cc6600" alink="#000000" onload="setTimeout('change()', 3000);"> <DIV ALIGN="center"> <span id="ttx"><img src="anime.gif"><br> Now Loading...</span> </DIV> <DIV ALIGN="center"> <P> <B><FONT szize="3" color="#0099ff">パーティー </FONT></B></P> <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0" width="850" height="561"> <PARAM name="MOVIE" value="flashcontents.swf"> <PARAM name="PLAY" value="true"> <PARAM name="LOOP" value="true"> <PARAM name="QUALITY" value="high"> <PARAM name="WMODE" value="transparent"> <PARAM name="FLASHVARS" value="hpbflcconfig=flashcontents1.xml"> <EMBED src="flashcontents.swf" width="850" height="561" WMODE="transparent" type="application/x-shockwave-flash" flashvars="hpbflcconfig=flashcontents1.xml"></OBJECT> <P align="center"><IMG src="paper_fr.gif" alt="和紙" width="900" height="10" align="middle" border="0"><BR> </P> </DIV> </BODY> </HTML>

  • htmlで行数が増えた場合に自動的に範囲を広げる

    現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか? HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価">   <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻  り "> </div> </form> </div> </body> </html>

    • ベストアンサー
    • HTML
  • htmlでインプットボックスを横並びに表示したい。

    ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか? ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー|  86行目  |ーーーーー| ーーーーー|  87行目  |ーーーーー|  96行目  83行目  |  88行目  |  92行目|  97行目 ーーーーー|  89行目  |ーーーーー| 【やりたいこと】 ーーーーー|ーーーーーーーーーー|ーーーーー| ーーーーー|  86行目|87行目 |ーーーーー|  96行目  83行目  |  88行目|89行目 | 92行目 |  97行目 ーーーーー|ーーーーーーーーーー|ーーーーー|

  • IE6だと動かない マウスオーバーで画像の入れ替え

    以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか? ご指導の程、宜しくお願いいたします。

    • 締切済み
    • CSS
  • float: leftで横に並べたら、サファリだけ

    float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 IEやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト2</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト3</span> </p> </div> どうすればサファリの隙間を消せるでしょうか?

    • ベストアンサー
    • HTML
  • FireFoxで背景が表示されない。

    Webページを作っておりまして、FireFoxで表示を確認した際にボックスの背景が出ない問題が起こっており、 調べたりしても出てこず、1週間位頭を悩ませております。 どこがイタズラしてるか分からないので、CSS,HTML全てのせます 申し訳ありません。 CSSはこのように書いています <!-- body { background: url('./img/Background.png') repeat; } body { scrollbar-face-color:#1B1D1D; scrollbar-highlight-color:000000; scrollbar-shadow-color:999999; scrollbar-arrow-color:999999; scrollbar-track-color:#2A2929; scrollbar-3dlight-color:#A4A5A5; scrollbar-darkshadow-color:#A4A5A5; } body { font-size: 75%; /* IE */ } html>/**/body { font-size: 12px; /* Except IE */ } body { line-height : 130% ; } .box1{ width:750px; margin-buttom:70px; background-color:f0f0f0; } .box2 { width:425px; height:124px; font-size:12px; border:1px dashed #000000; overflow:auto; background-color:ffffff; margin-right:15px; margin-top:8px; padding-left:10px; padding-top:10px; } --> そしてHTMLはこのようになっています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <Meta http-equiv="Content-Script-Type" content="text/javascript"> <Meta http-equiv="Content-Style-Type" content="text/css"> <Meta name="GENERATOR" content="AmBuilder"> <link rel="StyleSheet" href="Style.css" type="text/css"> <link rel="stylesheet" type="text/css" href="http://wing2.jp/add/adv.css" /></head> <body> <div align="center"> <p class="box1"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top"> <td width="5"><img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"><img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"><img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"><img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr valign="top"> <td width="33"><a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"></a></td> <td width="57"><a href="about.htm" target="_self"><img src="./img/M-About.png" width="57" height="25" border="0" alt="About"></a></td> <td width="56"><a href="movie.htm" target="_self"><img src="./img/M-Movie.png" width="56" height="25" border="0" alt="Movie"></a></td> <td width="46"><a href="link.htm" target="_self"><img src="./img/M-Link.png" width="46" height="25" border="0" alt="Link"></a></td> <td width="557"><img src="./img/M-Space.png" width="557" height="25" border="0" alt="Space"></td> <td width="1"><img src="./img/M-Right.png" width="1" height="25" border="0" alt="MenuLine"></td> </tr> </table> <table style="float:right"> <tr align="left"> <td> <p class="box2"> ◇ 更新履歴 </td> </p> </tr> </table> </p> </div> </body> </html> 前回も同じような下らない質問をしてしまったのですが。今回も皆さんよろしくお願い致します。 長文、駄文すみませんでした 一応、サイトのURIです http://wing2.jp/~movie_village/

    • ベストアンサー
    • CSS
  • td width="180" と固定してるのですが・・

    <div style="width:500;height:220;overflow:auto; scrollbar-3dlight-color:#9acd32; scrollbar-arrow-color:#9acd32; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#9acd32; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#9acd32; scrollbar-track-color:#ffffff; "> <table style="font-size:13px; color:magenta;"><tr align="center"> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> </tr></table> </div> img には 110×150 のサイズの写真を入れています。 div width="500" にしているので、180×3=540 ですから3枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。 何故 td width を固定しているのに変動してしまうかがわかりません。 どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか? よろしくご教授のほど願います。

    • ベストアンサー
    • HTML
  • <a>の中のimgの一部分だけを見せたい

    imgの拡大切り取りを以下の様にしました。 <div style="position: relative; width: 240; height: 240; overflow: hidden;"> <img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"> </div> この要領で、<a>の中に入れるjpgを切り取り拡大した物にしたいです。 しかし、<a>の中に<div>を入れるとIEは動作が変になります。 どうしたらよいでしょうか? 具体的には以下のようなソースでして、 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg ul li a:hover{ position: static; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; cursor: default; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <div style="position: relative; width: 240; height: 240; overflow: hidden;"><img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"></div> <ul> <li><a href="javascript:void(0);"><img src="imgB.jpg" width="80" height="80" alt=""><span><img src="imgB.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgC.jpg" width="80" height="80" alt=""><span><img src="imgC.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgD.jpg" width="80" height="80" alt=""><span><img src="imgD.jpg" width="240" height="240" alt=""></span></a></li> </ul> </div> </body> </html> 3つの<li>の中の<a>の中のimgを拡大縮小したいのです。 以上、宜しくお願いいたします。

    • ベストアンサー
    • CSS

専門家に質問してみよう