ベストアンサー

無駄なところ省いてほしいです。

2007/03/29 12:44

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css">  </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>

mituru1986
お礼率42% (632/1491)

ホームページ作成ソフト
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

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

ベストアンサー

y3k
ベストアンサー率61% (16/26)

2007/03/29 15:19 回答No.6

No.1,4です。ご質問の件ですが、 <td>タグ内のstyle属性に記載してある定義内容を <style type="text/css">内に移す形になります。以下を新規作成します。 td.任意の文字{ color: #666666; text-align: center; padding: 5px 15px; border: #666666 1px solid; } こちらは修正です。 <td class="任意の文字">Top</td> また、CSSに関しては No.5さんの紹介されているサイトや下記URLが参考になると思います。

参考URL：: http://www.tohoho-web.com/css/basic.htm

質問者

お礼 2007/03/29 16:19

回答ありがとうございます。みなさん、本当に詳しい回答をくださって非常に感謝しています。また、質問させていただくかもしれませんが、そのときはよろしくお願いします。

その他の回答 (5)

canaanium
ベストアンサー率47% (106/224)

2007/03/29 14:42 回答No.5

こんにちはNo.3です。外部スタイルシートというのはスタイルシートを直接ページソースに記入するのではなく、別ファイルに記入したもののことです。これをページソースで呼び出します。 ■簡単な作り方１．テキストエディタを開いて<style type="text/css">から</style>までのソースを記入２．名前をつけて（たとえばabcとか）拡張子.cssで任意の場所に保存３．<head>～</head>の間に<link rel="stylesheet" type="text/css" href="（abc.cssが保存してある場所）">と記入これでどのページも同じデザインに統一できて、ソースも省略できます。「外部スタイルシート」で検索するといろいろ見つかりますが http://www.tagindex.com/stylesheet/basic/pattern1.html こちらなどはいかがでしょうか？

参考URL：: http://www.tagindex.com/stylesheet/basic/pattern1.html

質問者

補足 2007/03/29 14:51

回答ありがとうございます。なんだか難しそうですね（＾＾；やっぱりこのままでいきます。 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css">  </style> </head> <body bgcolor="#ffffff" background="./top_img/1155290302.gif"> <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> まだ省けるところはあるでしょうか？

y3k
ベストアンサー率61% (16/26)

2007/03/29 14:26 回答No.4

No.1です。まだいくつか省けます。 > a.menu:hover,a.menu:active { 上記クラスですが、現状の動作としてマウスオーバー時に「文字色が黒くなる」「背景色が白くなる」以外の変化がないことから、一部の定義を削除して以下の2行のみを定義できます。 color: #666666; background-color: #FFFFFF; > .pagetitle{ > .sub1{ > .log{ > HR{ 現状のソースでは使用されていないクラスは削除できます。 bodyタグですが、 > text="#666666" link="#666666" vlink="#666666" alink="#666666" リンク色についてはCSSで定義していること、また、現状textの文字色の適用対象となる文字がないため上記を削除できます。蛇足ですが、ソース自体の見栄えを考慮して「Top」については現状<td>タグ内にて定義していますが、他と統一する意味でヘッダ内に新たにクラスを作成し、そちらへ移行することもできます。

質問者

お礼 2007/03/29 14:42

再度回答、非常に感謝しております。最後の＞ソース自体の見栄えを考慮して「Top」については＞現状<td>タグ内にて定義していますが、他と統一する意味で＞ヘッダ内に新たにクラスを作成し、そちらへ移行することもできます。ですが、これは具体的にどこにどのような文字を打っていけばいいのでしょうか？面倒でなければ教えていただきたいです。

canaanium
ベストアンサー率47% (106/224)

2007/03/29 13:44 回答No.3

こんにちは。いろいろ考えながらもたもたとタグを打っていたら同じような回答がすでに……。軽くしたいということでしたら、他のページも同じデザインにするのでしたら外部スタイルシートにしてみるのはいかがでしょうか。直接の回答になっていなくて申し訳ありません。

質問者

お礼 2007/03/29 13:49

回答ありがとうございます。考えてくださって、とても感謝しております（＾＾）ところで外部スタイルシートとは何でしょうか？勉強不足ですみません。。

steel_gray
ベストアンサー率66% (1052/1578)

2007/03/29 13:24 回答No.2

自分が書くならって観点で。 <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> body { margin:0; padding:0; background:#fff url(./top_img/1155290302.gif); color:#666; font:bold 10pt 'Comic Sans MS',cursive; } h1{ width:158px; margin:1px auto 3px auto; text-align:center; font-size:10pt; border:solid 1px #666; padding: 5px 0; } ul { width:160px; list-style-type:none; margin:0 auto; padding:0; } li { margin:0 0 3px 0; padding:0; } li a{ display:block; border:1px solid #666; padding: 5px 15px; background-color:#f9c; color:#fff; text-decoration:none; } li a:hover{ color:#666; border:1px ridge #fff; background-color:#fff; } </style> </head> <body> <h1>Top</h1> <ul> <li><a href="">Profile</a></li> <li><a href="">Diary</a></li> <li><a href="">BBS</a></li> <li><a href="">Chat</a></li> <li><a href="">Room</a></li> <li><a href="">Album</a></li> <li><a href="">Freepage-1</a></li> <li><a href="">Freepage-2</a></li> <li><a href="">Freepage-3</a></li> <li><a href="">Link</a></li> <li><a href="">Mailbox</a></li> </ul> </body> </html>

質問者

お礼 2007/03/29 13:28

回答ありがとうございます。これだとボタンではなく文字にリンクがいってしまいますよね？ボタンをリンクしたいんです。しかし、こういう書き方もあるのだなあと非常に勉強になりました。

質問者

補足 2007/03/29 13:33

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css">  </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> ＃１さんのアドバイスでこのようになりました。これからまだ省けますかね？

y3k
ベストアンサー率61% (16/26)

2007/03/29 13:20 回答No.1

どの観点で省きたいのかによりますが、「ブラウザ上の見栄えを変えない」「ソースを軽くする」の観点で考えたところ以下のようになりました。参考程度にどうぞ。 > padding: 5px 15px 5px 15px; > border-width : 1px 1px 1px 1px; > border-style : solid solid solid solid; > border-color : #666666 #666666 #666666 #666666; 上記のような記述は以下のようにまとめられます。 padding: 5px 15px; border-width : 1px; border-style : solid; border-color : #666666; また、 > a.menu:link { > a.menu:visited { および > a.menu:hover { > a.menu:active { は、定義内容が同様のため、それぞれ以下のようにまとめられます。 a.menu:link, a.menu:visited { （省略） } a.menu:hover, a.menu:active { （省略） }

質問者