htmlテーブルのリンク書式設定が反映されない
- htmlでテーブル内にリンクを貼った場合、<font size="20">と書いても文字色や文字サイズの変更が反映されません。
- リンクの書式設定が正しく反映されない原因はどこにあるのか解決方法を教えてください。
- テーブル内のリンクの装飾を変更する方法について詳しく説明してください。
- ベストアンサー
■至急■html詳しい方 テーブル内のリンク書式
htmlでテーブル内にリンクを貼った場合の書式設定が 反映しません。 下記のテーブル内のTOP , PROFILEなどの文字色、文字サイズを 変更したいのですが、<font size="20">と書いても全く反映しません。 書く場所が悪いのでしょうか？ <html> <head> <title>memuページ</title> <!--<link href="./style.css" rel="stylesheet" type="text/css">--> <body link="WHITE" vlink="WHITE" alink="WHITE"> </head> <body> <BR> <table width="1200" border="0" cellspacing="0" cellpadding="5" align="center"> <tr bgcolor="pink"><font size="20"><td colspan="2"><b> <td width="250" height="30"><a href="./main.html" target="main">｜TOP｜ <td width="250" height="30"><a href="./profile.html" target="main">｜PROFILE｜ <td width="250" height="30"><a href="./shop.html" target="main">｜SHOP｜</td> <td width="250" height="30"><a href="./help.html" target="main">｜HELP｜</td></font> </table> </body> </html>
- red0176
- お礼率15% (26/166)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLを基本から学びなおさないとだめです。--学問に王道なし--- まず、 ・table(表)でないものをtableでマークアップしてはならない!! 「ページレイアウトの目的で表を用いる。」 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) この場合はナビゲーションリンクですから <ul><!-- HTML4.1以前,HTML5だとnav要素を使う --> <li><a href="./main.html">TOP</a></li> <li><a href="./profile.html">PROFILE</a></li> <li><a href="./shop.html">SHOP</a></li> <li><a href="help.html">HELP</a></li> </ul> またtargetはframeで使う属性ですが、frame自体非推奨です。 <font size="20"> font要素は非推奨です。スタイルシートを使いましょう。 15.2.2 フォント変更要素: FONT要素とBASEFONT要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-FONT ) <br>は間隔をあけるために使用する要素ではなく、ひとつの段落内で強制的に改行させるための空要素です。間隔をあけるにはスタイルシートでmarginで指定します。 スタイルシートはHEAD内に書くときは <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link{color:white;} --> </style> のように書きます。 参考までにHTMLの<body>内を書き直すと <body> <ul class="nav"> <li><a href="./main.html">TOP</a></li> <li><a href="./profile.html">PROFILE</a></li> <li><a href="./shop.html">SHOP</a></li> <li><a href="help.html">HELP</a></li> </ul> </body> </html> スタイルシートは body{width:100%;background-color:pink;} /*1200pxでは小さな画面ははみ出る*/ ul,li{list-style:none;display:block;height:30px;} ul li{width:20%;float:left;} とかになるかな・・・ ■至急、基本から
その他の回答 (2)
- DrFell
- ベストアンサー率55% (305/551)
<body link="WHITE" vlink="WHITE" alink="WHITE"> </head> <body> を <style>td{color:#文字の希望色;font-size:20px;font-weight:bold;}</style> </head> <body link="WHITE" vlink="WHITE" alink="WHITE"> に変えてみてください。 上のことをされると希望の表示になると思います。 位置もわるいです。そして、fontタグやｂタグは非推奨タグです。これらのタグでは詳細度の関係でcssファイルに色や大きさの指定があると、負けます。正しい位置に来ていても意図したようにはならないです。 一応、fontやbタグは<td></td>の中に、<font><b></b></font>か<b><font></font></b>のように<font><b></font></b>にはならないように、入れてください。<a>タグも閉じましょう。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html で文法テストをやってくれます。ｈｔｍｌ上の間違いは機械的に教えてくれますので、お試しください。
- STICKY2006
- ベストアンサー率29% (1536/5269)
こんちくは。 >>変更したいのですが、<font size="20">と書いても全く反映しません。 やるなら <font size ="7">|TOP|</font> ですので、<td> の内側に入れてやりましょう。 また、fontタグの場合は、サイズは１～７ですので２０では無意味ですよ。 font-size:20ならば、css側になるので、別のお勉強になります。 HTML fontタグ http://www.htmq.com/html/font.shtml スタイルシート font-size http://www.htmq.com/style/font-size.shtml
関連するQ&A
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- ブラウザによってリンク集のバナー画像が表示されません。
↓ こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名：<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人：***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、～。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名： <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人：***様<BR> ***さんが描かれるイラストは、～。</FONT></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- テーブルとテーブルの間に、隙間があいてしまいます。
お世話になります。 表題のとおりです。 下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。 1時間ほど考えましたが、どうにもこうにも理由が分かりません。 初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。 ---------------------------以下ソース-------------------------------------- <body> <!-- 背景白 --> <table border="1" cellpadding="0" cellspacing="0" class="table_white"> <tr> <td> <!-- 丸枠 --> <table width="820" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="image/head.gif" width="820" height="9" /></td> </tr> </table> <!-- 丸枠ここまで --> </td> </tr> <tr> <td align="center"> <!-- ヘッダ --> <table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="324" height="15" align="left" > <strong class="seo01">ミ</strong></td> <td width="203"> </td> <td width="5" align="center"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="42"><a href="kaisya.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','image/head_kaisya_ov.gif',1)"><img src="image/head_kaisya.gif" alt="会社概要" width="42" height="11" border="0" id="Image4" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="61"><a href="toiawase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('問い合わせ','','image/head_toiawase_ov.gif',1)"><img src="image/head_toiawase.gif" alt="お問い合わせ" width="61" height="11" border="0" id="問い合わせ" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="62"><a href="sitemap.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemap','','image/head_sitemap_ov.gif',1)"><img src="image/head_sitemap.gif" alt="sitemap" width="62" height="11" border="0" id="sitemap" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> </tr> </table> <!-- ヘッダ ここまで--> </td></tr> <tr> <td align="center"> <table width="730" border="0" cellspacing="0" cellpadding="0"> <!-- ロゴ --> <tr> <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td> </tr> <!-- ロゴ ここまで --> ---------------------------ソースここまで-------------------------------------- ---------------------------念のため使用CSS-------------------------------------- body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size: 12pt; font-weight: normal; color: #5c5c5c; background-color: #889fb6; margin-left: 30px; margin-top: 30px; letter-spacing: 2.5px; line-height: 18px; } .table_white { background-color: #FFFFFF; width: 820px; } .seo01 { font-size: x-small; letter-spacing: normal; font-weight: normal; } ---------------------------ここまで--------------------------------------
- ベストアンサー
- HTML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- インラインフレーム内へのリンク
質問させて頂きます。 インラインフレーム内へのリンクが上手くいかなくて困っています。 name="main" でインラインフレームに名前を付け、外部からはtarget属性でtarget="main"と指定してリンクをはっているのですが、どういうわけだか新しいウインドウが開いてしまいます。 ソースをのせておきますので、どこがいけないのか御指導頂けないでしょうか。お願い致します。（暫定的にYAHOO!にリンクさせています） 以下ソース↓ <html> <head> <title>インラインフレーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="17"><a href="http://www.goo.ne.jp" target="main">YAHOO!</a></td> </tr> <tr> <td height="300"><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="yes" style="border:solid 1pt cc0000" src="http://www.yahoo.co.jp" width="500" height="300"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブル幅を完全に指定したい
テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 alt="小A"～alt="小D" のところは 項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。 実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると 若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。 何がいけないのか、お知恵を拝借できませんでしょうか。 宜しくお願い致します。 以下、その表の一部である テーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>
- ベストアンサー
- HTML
- テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。 現在、大きなテーブルの中にさらに小さなテーブルをいれています。 そのためタグがとてもごちゃごちゃしています。 小さなテーブルはサイト更新の度に追加していく予定なので、 見た目よりデータが重いページになってしまうと思います。 これをなんとかスッキリさせたいのですが 良い方法はあるでしょうか？ スタイルシートを使えばいいのでしょうか？ どのように使用すれば無駄の無い形になるか 具体的なアドバイスをいただけると助かります。 参考までに作りかけのタグを載せました。 悪い部分等があったら、ぜひお願いします。 よろしくお願いします。 <!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> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名 タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が 縮まらなく困っています。 具体的には、セル内の余白を５ピクセルにしているのですが テキストとセルの境界線の縦の距離が何倍も開いてしまいます。 ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。 使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
- メニューのリンクをクリックして、タイトルの色を変える方法。
メニューのリンクをクリックして、タイトルの色を変える方法。 上記の操作をするための記述内容がわかりません。 以下に、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
- CSS：横一列にリンクする文字の見栄えをよくする
リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。 ■HTML <table> <tr> <td><a href="">プロフィール(Profile)</a></td> <td><a href="">日記(Diary)</a></td> <td><a href="">絵(Picture)</a></td> <td><a href="">疑問(Question)</a></td> </tr> </table> このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
