メニューのリンクをクリックして、タイトルの色を変える方法
- リストのタグのリンクをクリックして、タイトルの色を変更する方法を教えてください。
- HTMLのレイアウトで左側にメニューのリストを表示している場合、リストの各リンクをクリックすると、タイトルの色を変えることは可能でしょうか？
- CSSを使用して、メニューのリンクをクリックするとタイトルの色を変更する方法を教えてください。
- ベストアンサー
メニューのリンクをクリックして、タイトルの色を変える方法。
メニューのリンクをクリックして、タイトルの色を変える方法。 上記の操作をするための記述内容がわかりません。 以下に、HTMLを載せます。 <style type="text/css"> h2{ color : #98FB98; font-size : 69px; letter-spacing: 0.8em; font-family: impact; margin:0px 0px 0px 10px; } TABLE { color : #57450f; font-size : 12px; } #bg{ background-color : #dedec2; border-right-style : solid; border-bottom-style : solid; border-right-color : #57450f; border-bottom-color : #57450f; border-right-width : 1px; border-bottom-width : 1px; width:460px; } #td1{ background-image : url(image/back01.gif);height : 60px; vertical-align:top; padding:2px; color : #dedec2; } #td2{ background-color : #665c50; height : 20px; text-align : right; } #left{ width:190px; text-align:center; vertical-align:top; border-right-width : 1px; border-right-style : dotted; border-right-color : #665c50; } .li1{ margin:5px auto; text-align : left; letter-spacing: 0.1em; line-height : 20px; } </style> <TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR> <TD id="td1" colspan="2"> <H2><font color="#DA70D6">a</font>b<font color="#DA70D6">c</font>d <font color="#DA70D6">e</font>f<font color="#DA70D6">g</font></H2> </TD></TR><TR> <TD id="left"> <h3>MENU</h3> <UL class="li1"> <li><A href="main.html" target="main">１</A></li> <li><A href="main.html" target="main">２</A></li> <li><A href="main.html" target="main">３</A></li> <li><A href="main.html" target="main">４</A></li> </UL> </TD> <TD id="right"> （関係ないので中略） </TD></TR><TR><TD id="td2" colspan="2"></TD></TR></TBODY></TABLE> （動作環境はVista、IE8） 左右に２分割のレイアウトで、左側に上記のHTMLを反映させてます。 私がやりたいことはリストのタグのリンクをクリックして、タイトル（<h2>タグの箇所）の色を変更することです。 リンクごとに其々色を変えたく、タイトルに２色用いているように、変更後も同じ配列で２色できれば使いたい。 CSSはそこそこ知識はありますが、JavaScriptに関しては全くの素人です。 上記のように設定するにはどうしたらいいでしょうか？
- JavaScript
- 回答数7
- ありがとう数12
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
まず、「リストのタグのリンクをクリックして」の処理は イベントハンドラー関数の追加になります。 簡単なのは、 elemnt.onclick=function(){......} です。 ターゲット色の変え方は、ターゲットの選択方法も考慮して、 個別に要素を指定して変えるなら element.style.color = "red"; で変えます。 あるいは、全色の色指定のCSSクラス定義を作っておいて、 element.className ="red_class"; で摘要されるクラスを変えます。 その要素に複数クラスが指定されていたり、他の処理で変えられたり している場合は、もうちょっと工夫する必要があります。 もう一つの方法は、CSS定義で定義したクラスのルールを書き換える 方法です。色のクラスを、２つだけ、作っておいて、定義内容（色指定） を動的に書き換え（本当は追加）てしまう方法です。 ターゲットの選択方法は、文字を<span></span>でくくって、<span>に name属性なり、クラス指定をして、 document.getsElementBy～で配列取得します。 上記を応用して作ってみたら、いかがでしょうか
その他の回答 (6)
- yyr446
- ベストアンサー率65% (870/1330)
No.6続き＝＝＝＝＝＝＝＝＝ for(var i=0;i<result.length;i++){ var textelm=result[i].firstChild; var textvalue=""; var regexp = new RegExp(/\S/); while(textelm.nodeValue==null){textelm=textelm.nextSibling;} var newelm=document.createElement('span'); for(var j=0;j<textelm.nodeValue.length;j++){ var char=textelm.nodeValue.substr(j,1); var span = document.createElement('span'); if(char.match(regexp))span.className=(j%2==0)?class2:class1; span.appendChild(document.createTextNode(char)); newelm.appendChild(span); } textelm.parentNode.replaceChild(newelm,textelm); } } function chg_color_class(selector,color){ var property ="color:"+color+";"; var CssSheet; if(document.styleSheets.length == 0){ CssSheet=document.styleSheets[0]; }else{ CssSheet=document.styleSheets[document.styleSheets.length-1]; } var ruleindex=0; var rules = CssSheet.rules || CssSheet.cssRules; for(var i=rules.length - 1;i >= 0;i--){ if(rules[i].selectorText.toLowerCase()==selector){ ruleindex=i; try{CssSheet.removeRule(ruleindex);} catch(e){CssSheet.deleteRule(ruleindex);} } } try{CssSheet.addRule(selector,property,CssSheet.rules.length);} catch(e){CssSheet.insertRule(selector+"{"+property+"}",CssSheet.cssRules.length);} } // --> </script> </head> <body> <div id="hoge"> <div> abcdefghi jklmn </div> <UL class="li1"> <li><A href="main.html" target="main" onclick="changeColor(0);return false;">１</A></li> <li><A href="main.html" target="main" onclick="changeColor(1);return false;">２</A></li> <li><A href="main.html" target="main" onclick="changeColor(2);return false;">３</A></li> <li><A href="main.html" target="main" onclick="changeColor(3);return false;">４</A></li> </UL> </div> <table> <tr class="drink"><td>お茶</td></tr> <tr class="food"><td>おにぎり</td></tr> <tr class="drink"><td>ジュース</td></tr> <tr class="food"><td>サンドイッチ</td></tr> </table> </body> </html>
お礼
こちらでも上手く作動できました！ 回答ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
まだ締め切ってないし、レスも無いので、 すでに作成してしまったHTMLの任意の要素以下に対して、テキストノードの文字を 交互に変えられるように作ってみた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title></title> <style type="text/css"> body {color:#000000;background-color:#E0FFFF;} </style> <script type="text/javascript" charset="utf-8"> <!-- var spanflg=false; // SPANをはずす部分を作らなかったので．．． function changeColor(n){ var colorList = [['#f00','#0ff'],['#0f0','#00f'],['#00f','#f00'],['#000','#fff']]; var text_color_class0="text_color_0"; var text_color_class1="text_color_1"; var target_node=document.getElementById("hoge"); // var target_node=document.getElementsByTagName("body")[0]; if(!spanflg){ spanflg=!spanflg; text_span_add(target_node,text_color_class0,text_color_class1); } chg_color_class("."+text_color_class0,colorList[n][0]); chg_color_class("."+text_color_class1,colorList[n][1]); } function text_span_add(node,class1,class2){ var result=[]; (function(node,result){ var regexp = new RegExp(/\S+/); for(var elm=node;elm;elm=elm.nextSibling){ if(elm.nodeType == 3 && elm.nodeValue.match(regexp)){ result.push(elm.parentNode); }else{ if(elm.hasChildNodes()) arguments.callee(elm.firstChild,result); } } })(node,result); ＝＝＝続く＝＝＝
- babu_baboo
- ベストアンサー率51% (268/525)
その２です。１につなげてください。 <script type="text/Javascript"><!-- //@cc_on @set @V = (@_jscript_version < 5.9) var colorList = [ [ '#f00', '#0ff' ], [ '#0f0', '#00f' ], [ '#00f', '#f00' ], [ '#000', '#fff' ] ]; var hoge = function ( color/*array*/ ) { return function ( e ) { var span, cnt = 0, o, f = false, i= 0; var t = o = e./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/.parentNode; if( 'LI' !== t.nodeName ) return; while( o = o.previousSibling ) cnt++; span = document.getElementById('bg2').getElementsByTagName('span'); while( o = span[ i++ ] ) o.style.color = color[ cnt ][ +(f=!f) ]; return e./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/; }; }; var G = (function ( click ) { return function ( t ) { /*@if( @_jscript ) t.fireEvent( 'onclick' ); @else@*/ t.dispatchEvent( click ( t.ownerDocument ) ); //*@end }; })( function ( doc ) { var e = doc.createEvent( 'MouseEvent' ); return ( e.initEvent( 'click', true, true ), e ); }); //____ document.getElementById('bg2')./*@if( @V ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', hoge( colorList ), false ); G(document.getElementById('bg2').getElementsByTagName('a')[0]); </script>
お礼
お礼が遅くなりました。 こちらも参考にさせていただきました。 回答ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
あまりHTMLとかCSSは、そこそこわかりませんが、こういうのはどうでしょう？ ぜんかくくうはくははんかくにしてくださいね たぶん、ながそうなのでぶんかつです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #bg2 { width:460px; background:#dedec2; border-right:1px #57450f solid; border-bottom:1px #57450f; color:#665c50;font-size: small} #bg2 h3 { height:1em; text-align:center;margin: 0 180px 0 0;} #bg2 div { float:left; padding-left: 5px; } #bg2 h2 { color:#98FB98; font: 69px impact; letter-spacing: 25px; margin:0 60px 0 10px;} #bg2 ol { width:280px; border-right:1px #665c50 dotted; margin:0; } #bg2 ol li{ margin-left: 20px; text-align: left; line-height: 20px; padding: 5px} #bg2 p { background:#665c50; height:20px; text-align:right; margin:0;clear:both; } </style> <div id="bg2"> <h2> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span> <span>f</span> <span>g</span> </h2> <h3>MENU</h3> <div> <ol> <li><a href="#">1</a> <li><a href="#">2</a> <li><a href="#">3</a> <li><a href="#">4</a> </ol> </div> <div>関係ない</div> <p> </p> </div>
- zeff
- ベストアンサー率69% (137/198)
#1です。 誤りがあったので訂正します。 oSpans = oH2.document.getElementsByTagName("SPAN"); ↓ oSpans = oH2.getElementsByTagName("SPAN"); 連投失礼しました；
お礼
お礼遅くなって申し訳ありません。 大変、参考になりました！
- zeff
- ベストアンサー率69% (137/198)
（中略） .span1{ color : #DA70D6; } --> </style> <script type="text/javascript"> <!-- //カラーリスト["h2のcolor","spanのcolor"]の順・組み合わせ; var aColorList = new Array(); aColorList[0] = ["red","purple"]; aColorList[1] = ["blue","green"]; aColorList[2] = ["brown","yellow"]; aColorList[3] = ["black","gray"]; var oH2,oSpans,i; function changeColor(n) { //nを-1する（配列は0～、nが1～なので） --n; //"h2id"をidに持つオブジェクトをoH2へ格納 oH2 = document.getElementById("h2id"); if(!oH2){return false;} //oH2の子要素のspanを（複数）取り出してoSpansへ格納 oSpans = oH2.document.getElementsByTagName("SPAN"); if(!oSpans){return false;} //H2のcolor変更 oH2.style.color = aColorList[n][0]; //oSpansをcolor変更 for( i in oSpans ) { oSpans[i].style.color = aColorList[n][1]; } } //--> </script> </head> <body> <TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR> <TD id="td1" colspan="2"> <H2 id="h2id"><span class="span1">a</span>b<span class="span1">c</span>d<span class="span1">e</span>f<span class="span1">g</span></H2> </TD></TR><TR> <TD id="left"> <h3>MENU</h3> <UL class="li1"> <li><A href="main.html" target="main" onclick="changeColor(1);">１</A></li> <li><A href="main.html" target="main" onclick="changeColor(2);">２</A></li> <li><A href="main.html" target="main" onclick="changeColor(3);">３</A></li> <li><A href="main.html" target="main" onclick="changeColor(4);">４</A></li> </UL> </TD> <TD id="right">（関係ないので中略）</TD></TR> <TR><TD id="td2" colspan="2"></TD></TR> </TBODY></TABLE> </body> </html> ※便宜上つけたもの（お好みで変更してください） span1,aColorList,oH2,oSpans,i,changeColor,n, ["h2のcolor","spanのcolor"]の組み合わせ ※fontの使用は非推奨なので止めましょう。 ＞タイトルに２色用いているように、変更後も同じ配列で２色できれば使いたい。 h2とspan(font)を決まった組み合わせの配色で変える、 という事で作りましたけれども合っていたでしょうか。
関連するQ&A
- リンク先から戻ったら、表示がおかしい。
未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> > ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright © Your site. All Rights Reserved. </td></tr> </table> </html>
- 締切済み
- HTML
- あるソースをあるソースに埋め込みたい
http://www.1uphp.com/con2/menu/tab41.html このURLの一番下の「全ての書き方」を 下記のソースのメニューの右にあるテーブルに埋めたいと思っています。 しかし、上記URLのソースのスタイルシート部分を書きのソースへコピペした段階で 下記のソースのページが全て左寄せみたいになってしまいます。 どこをどう記述すれば埋め込めるでしょうか？ <html> <head> <style type="text/css"> <!-- A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } TABLE#mainTable { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid; BORDER-COLLAPSE: collapse } TD.borderAll,TD.borderNoTop,TD.borderNoBottom { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid } --> </style> </head> <body bottommargin="10" background="sozai/kabegami.gif" topmargin="10"> <table height="1817" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 1817px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"><strong><font color="#ff0000" size="5"></font></strong></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">お教室情報</font></td> </tr> <tr> <td><a class="menu" href="5_shop.html" >Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table> <p align="center"> <font ><font color="#808080" size="1" > <font ><font size="2"> <br></font></font> </p></font></font></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 1380px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> <p align="left"><font color="#808080"></font> </p></td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> </p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- HTML
- リストタグの上に変なスペースが・・・
下記の１～４のリストを上下の画像(a.jpg/b.jpg)で囲んでいます。 なぜかa.jpgの下だけに10pxくらいのスペースが開いてしまいます。 解消方法を教えていただけないでしょうか？ 【html】 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="../images/a.jpg" border="0"></td> </tr> <tr> <td background="../images/bg.jpg"><h3> <ul id="pointlist"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </h3></td> </tr> <tr> <td><img src="../images/b.jpg"></td> </tr> </table> 【css】 #pointlist { padding-left: 30px; padding-right: 15px; margin: 0px; list-style-type:square; list-style-position:inside; } #pointlist li{ width: auto; float: left; margin-top: 0px; padding-right: 20px; font-size: 0.9em; line-height: 1em; text-align: left; white-space: nowrap; }
- 締切済み
- HTML
- ※再度※どこが悪いのかみていただきたいです。
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- ホームページ作成ソフト
- ※再々度※見ていただきたいです
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
- どこが悪いのかみていただきたいです。
下記のようなソースのHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- 無駄なところ省いてほしいです。
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } TD{ font-size : 10pt; } a.menu:link { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:hover { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : ridge ridge ridge ridge; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } a.menu:active { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : groove groove groove groove; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } .pagetitle{ color : #FF6699; padding-bottom : 5px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : #FF6699; } .sub1{ color : #FFFFFF; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color : #FF99CC; } .log{ border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color: #FFFFFF; } HR{ color : #999999; height: 1px; } --> </style> </head> <body bgcolor="#ffffff" background="./top_img/1155290302.gif" text="#666666" link="#666666" vlink="#666666" alink="#666666"> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; FONT-FAMILY: 'Comic Sans MS'" cellspacing="3" cellpadding="0" width="166"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href="">Profile</a></td> </tr> <tr> <td><a class="menu" href="">Diary</a></td> </tr> <tr> <td><a class="menu" href="">BBS</a></td> </tr> <tr> <td><a class="menu" href="">Chat</a></td> </tr> <tr> <td><a class="menu" href="">Room</a></td> </tr> <tr> <td><a class="menu" href="">Album</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-1</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-2</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-3</a></td> </tr> <tr> <td><a class="menu" href="">Link</a></td> </tr> <tr> <td><a class="menu" href="">Mailbox</a></td> </tr> </table> </center> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- テーブルが左右上下中央表示にできない。
<style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。
- ベストアンサー
- HTML
- テーブルの線について
下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
お礼
お礼が遅くなりました。 若干手間取りましたが、おかげでできました。 ありがとうございました！