• ベストアンサー

(ドリームウィバー)テンプレートを摘要するとJavaScriptが機能しなくなる・・・。

よろしくお願い致します。 テンプレートは、外部ファイルで作られたJava(下記のような)などを付けリンクさせて作成しました。 } function zoom(url){ var pw = window.open(url, 'pw', 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=650,height=650'); pw.focus(); } あるページにこうしてできたテンプレートを摘要すると、素直に上記のコマンドは機能するのですが、 このテンプレートを他のファイルに摘要さすと、上記のようなリンク系のJavaScriptだけが機能しなくなります。 テンプレートファイルでは、当然、編集可能領域なども設定し、うまくいっているはずなんです。 テンプレートないの編集可能領域は、リンクであろうとなんであろうと、 他のページで編集可能ですよね? それともリンクのパスなどは、テンプレート通りにしか機能しなく、 摘要したページごとにはリンク先を編集できないのでしょうか? テンプレートを摘要させたページのコードです。 <td><a href="#" onClick="javascript:zoom('img/***.htm')">〔***〕<br> <img src="img/p1073.jpg" alt="*****************" name="***" width="86" height="86" border="0"><br> <span class="small">****<br> *****</span><br> <s>****</s><br> <span class="b_red">******</span></a></td>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

スクリプトの読み込み部分は、編集可能領域にあるようですね。 HTMLファイルから見たパスが正しいのであれば、あとはjavascriptの問題ですかね。複数のJSファイルを読み込んでいるようですが、正しく機能するページでも同じファイルを読み込んでいますか?zoom()が両方にあるとか。正しく機能しているページとそうでないページとのちがいを検討しないとわからないですね。

n-yuuki
質問者

お礼

結局、なんとか問題解決できました。 度々ありがとうございました。 もう、ファイルごとにパスがわけわからなくなったので、 最初からやりなおしました。するとうまくいったのですが、 原因がつかめないままです。 正常にテンプレートが機能しているページの全ソースをコピーして、 新規のHTMLファイルにまるまるペーストすると、いくつぺーじが増えても相互にリンクできるようになりました。 ・・・新規ドキュメント作成から、例のテンプレートを選択してファイルを作ると、しょっぱなにテンプレートをハメこんだドキュメントは、正常にJAVAもリンクも機能するのですが、 それ以降のドキュメントは、とくにJavaが機能しなくなって・・・ え~もう意味がわかりませんので、ここは逃げときます。次回絶対に解決してやります! ていうか、DWを触りだしてまだ一週間ってのが、原因としてあるとおもいます・・・。いまさらですが・・・。 ありがとう御座いました。

その他の回答 (3)

回答No.4

No2.の回答で訂正です。 編集可能領域→編集可能領域外の書き間違いでした。 肝心なところを書き間違えてしまいました。混乱させて申し訳ありませんでした。

n-yuuki
質問者

お礼

いえいえご丁寧にありがとう御座います! お気になさらないでくさい。 おかげさまで、ずいぶん研究が深まりましたよ。 これからも頑張ります。

  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.3

補足を見て、お節介。 <!-- TemplateEndEditable --> ※ここから編集可能領域外です。 <link href="../css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript" src="../js/rank.js"></script> ※ここまで編集可能領域外です。 <!-- TemplateBeginEditable name="head" --> ※ここが編集可能領域です。 <!-- TemplateEndEditable --> 編集可能領域に書いていれば、ファイルごとに変更が可能なように薄文字にはなりません。 また、編集可能領域に書いてあれば、自動で変更にはならないと思うのですが? 編集可能領域外に書いてあれば、ファイルの階層は自動で変わるはずです。^^;

n-yuuki
質問者

お礼

ん~たしかにそうですよね~、薄地のままでした・・・。 でもなんかパスは自動で変更してくれてたように見えました。 ってことは、やっぱり編集可能領域外だったって事ですよね。 難しい~・・・。の一言です。 ありがとう御座いました。

回答No.1

<script type="text/javascript" src="*****.js"></script> みたいな形でスクリプトを読み出していると言うことですよね。で、この部分は編集可能領域にあるのでしょうか。 編集可能領域にあるのなら、そのHTMLファイルの場所に応じてパスが通っているか確認してください。(あくまでも実際のリモート環境でのHTMLファイルから見たJSファイルのパス) テンプレート領域内にあって、サイトがきちんと管理されているのであれば、自動でパスを通してくれるはずですが。

n-yuuki
質問者

補足

おおお~、なるほど!  はい、<head>部分に<script type="text/javascript"src="*****.js"></script> を読みこんでいます。 テンプレートの<head>部分に、 <!-- TemplateEndEditable --><link href="../css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript" src="../js/rank.js"></script> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> を書いています。 これって編集可能流域・・・になっていますよね? 他のページにこのテンプレートを摘要すると、コードの文字色は薄くなっています。でも、おっしゃられているように、階層が違うHTMLファイルでも自動でパスを変更してくれています。 不思議・・・。

関連するQ&A

  • 【DreamWeaver MX】 新規からテンプレート(仮A)を選択すると(仮A)の古いテンプレートを読み込んでしまう。。

    助けて下さい! 謎な現象が起きていて大変困っています。 DW MX2004をWindows XP Professional 2002 Service Pack2で 使用しています。 内容: テンプレート(以下、テンプレートAとします)を作成し、ファイル>新規作成>テンプレートAを選択して、ファイルを作ると、テンプレートAには無いコード(画像が追加されてしまいます)が入ってしまいます。 ちなみにそのコードは以下のとおりです。 ■綺麗なテンプレート <li class="ranking4 clear"> <a href="/product/powder/002038.html"><img src="../image/ranking_r4_img.jpg" width="33" height="46" alt="パウダーA" /> <span>パウダーA</span></a> </li> <li class="ranking5 clear"> <a href="/product/special/002035.html"><img src="../image/ranking_r5_img.jpg" width="33" height="46" alt="エッセンスA" /> <span>エッセンスA</span></a></li> </ol> ■不要なコード入りテンプレート <li class="ranking4 clear"> <a href="/product/powder/002038.html"><img src="file:///Z|/site/本番/image/ranking_r4_img.jpg" width="33" height="46" alt="パウダーA" /> <span>パウダーA</span></a> </li> <li class="ranking5 clear"> <a href="/product/special/002035.html"><img src="file:///Z|/site/本番/image/ranking_r5_img.jpg"ranking4 clear"> <a href="/product/powder/002038.html"><img src="../image/ranking_r4_img.jpg" width="33" height="46" alt="パウダーA" /> <span>パウダーA</span></a> </li> <li class="ranking5 clear"> <a href="/product/special/002035.html"><img src="../image/ranking_r5_img.jpg" width="33" height="46" alt="エッセンスA" /> <span>エッセンスA</span></a> </li> このテンプレートAを別名で保存し(テンプレートB)、修正>テンプレート>新しいテンプレート(テンプレートB)を適用としてみても同じです。 おそらくこの不要なコードが入っていた同名のテンプレート(不要なコードが入っていた)を一度削除してしまってるのでリンク切れ、またはリンクの設定がおかしくなってしまってるのかなとも思い、 テンプレートのベースとなるhtmlから 再びテンプレート保存>編集可能領域を設定し、 別のテンプレートを作っても、ファイル>新規作成>から作成すると またこのコードが追加されてしまいます。 DWを再起動もし、対象となるページを一度テンプレートから切り離したりもしましたが結果は同じです。 テンプレートだけをDW内で開いてソースの確認すると、この不要な箇所はなく、またブラウザでプレビューしても入ってません。 ファイル>新規作成>テンプレートとなるときだけ このような現象がおきます。 もうひとつ疑問がありまして、 テンプレートAを少し修正し、更新するページの一覧が 出てきますが、そこに以前削除したはずのページ(この不要なコード入りのテンプレートを使用)も出てきてしまいます。 しかし、ローカルにはもちろん削除したページやフォルダは 存在していません。 やはりDWを再インストールする以外に このテンプレート機能を正常にする方法はないのでしょうか。 何が原因か色々しらべ、試してみたが未だ解決法ないので 質問させて頂きました。 回答頂けたら幸いです。 宜しくお願い致します。

    • 締切済み
    • CSS
  • JavaScriptのtable保存について

    先日時間割り表を作り以下のコードを書きました これをアプリにして自分のスマホに入れたのですがAndroidのためcookieが対応していません そこでlocalStorageを使えば可能ということを聞きました <body background="img/st18.png"> <center> <font style="font-size:30pt;"> <font color="#4795F4"><b><i>Monday</i></b></font> </font> <br><br> <a href="sat.html"><img src="img/blsat.gif" width="50" height="25"></a> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> <a href="tue.html"><img src="img/bltue.gif" width="50" height="25"></a> <form> <br> <table border="3" bordercolor="#4795F4" align="center" bgcolor="#DDFFFA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('mon_sects1')){var sect1 = getCookie('mon_sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('mon_sects2')){var sect2 = getCookie('mon_sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('mon_sects3')){var sect3 = getCookie('mon_sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('mon_sects4')){var sect4 = getCookie('mon_sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('mon_sects5')){var sect5 = getCookie('mon_sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('mon_sects1','mon_sects2','mon_sects3','mon_sects4','mon_sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><img src='img/bledit.gif' width='50' height='20' onClick='editj(" + i + ")'>"; } これをlocalStorageで保存するにはどうすればできますか? もしもcookieを使ってもAndroidで保存できる方法があれば教えてください

  • テンプレートを使ったHP作成☆リンクタグについて

    nanosという無料のHP作成サイトでHPを作成中です。 テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。 多分そういう設定になっているとは思うのですが、タグを見てもピンクの色指定の場所も無く、どう直したらいいのかわかりません。 ちなみに、カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。 タグのに何か設定があるのでしょうか? <br><center><pc><table width="550"><tr><td><div style=margin:10px;padding:5px;line-height:16px;></pc><nopc><table width="550"><tr><td><div style=margine:10px;padding:5px;line-height:15px;></nopc><div align="left"><font size="4" color="#000000" face="HGep021">タイトル</font> <a href="ページのurl">コチラ</a>より御入室ください。</font> </span></div></td></tr></table></center> <center><table width="550"><tr><td><div style=line-height:16px;><font size="1"> という感じです。 どこの部分がどんな表現をするのか教えていただけたらありがたいです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • このテーブルタグの中の色を白にするには

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます(画像<A href="images/001_base_1.gif">1</A>・<A href="images/001_base_2.gif">2</A>・<A href="images/001_base_3.gif">3</A>・<A href="images/001_base_4.gif">4</A>)</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色(背景の色)になっています。 これを透明でなく白にする方法をおしえてください!

  • tableがずれる理由がわかりません

    上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう?? 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>

  • javascriptを使い、サムネイル表示

    サンプルHP⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>

  • ページ上部にスペースが空いてしまう・・・

    今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="~.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="~html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="~html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="~.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。

    • ベストアンサー
    • HTML
  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • JavaScriptでの時間割り作成について

    <form> <br> <table border="3" bordercolor="#994C00" align="center" bgcolor="#FFDFAA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- // Set virtual screen width size to 320 pixels // 下の一行は使う時に外す。エラーが出たら消す。 monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('sects1')){var sect1 = getCookie('sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('sects2')){var sect2 = getCookie('sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('sects3')){var sect3 = getCookie('sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('sects4')){var sect4 = getCookie('sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('sects5')){var sect5 = getCookie('sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('sects1','sects2','sects3','sects4','sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); window.alert("完了しました!"); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><input type=button value='編集' onClick='editj(" + i + ")'>"; } //時間割表示ここまで --> </script> というコードです これは月曜日のシートで火曜日、水曜日・・・と土曜日まであります このコードで月曜日の時間割を変更すると火曜日、水曜日などすべてのシートが変更されてしまいます シートごとに保存する方法ってありますか? JavaScriptを始めたばかりなのでわかりやすく教えてほしいです><

専門家に質問してみよう