- ベストアンサー
無駄なところ省いてほしいです。
<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>
- mituru1986
- お礼率42% (632/1491)
- ホームページ作成ソフト
- 回答数6
- ありがとう数5
- みんなの回答 （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が参考になると思います。
その他の回答 (5)
- canaanium
- ベストアンサー率47% (106/224)
こんにちは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 こちらなどはいかがでしょうか？
補足
回答ありがとうございます。 なんだか難しそうですね（＾＾； やっぱりこのままでいきます。 <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,a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px; border-width : 1px; border-style : solid; border-color : #666666; display: block; height: 25px; } a.menu:hover,a.menu:active { color: #666666; background-color: #FFFFFF; display: block; height: 25px; } --> </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)
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>タグ内にて定義していますが、他と統一する意味で ヘッダ内に新たにクラスを作成し、そちらへ移行することもできます。
お礼
再度回答、非常に感謝しております。 最後の ＞ソース自体の見栄えを考慮して「Top」については ＞現状<td>タグ内にて定義していますが、他と統一する意味で ＞ヘッダ内に新たにクラスを作成し、そちらへ移行することもできます。 ですが、これは具体的にどこにどのような文字を打っていけばいいのでしょうか？ 面倒でなければ教えていただきたいです。
- canaanium
- ベストアンサー率47% (106/224)
こんにちは。 いろいろ考えながらもたもたとタグを打っていたら同じような回答がすでに……。 軽くしたいということでしたら、他のページも同じデザインにするのでしたら 外部スタイルシートにしてみるのはいかがでしょうか。 直接の回答になっていなくて申し訳ありません。
お礼
回答ありがとうございます。 考えてくださって、とても感謝しております（＾＾） ところで外部スタイルシートとは何でしょうか？ 勉強不足ですみません。。
- steel_gray
- ベストアンサー率66% (1052/1578)
自分が書くならって観点で。 <!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>
お礼
回答ありがとうございます。 これだとボタンではなく文字にリンクがいってしまいますよね？ ボタンをリンクしたいんです。 しかし、こういう書き方もあるのだなあと非常に勉強になりました。
補足
<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,a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px; border-width : 1px; border-style : solid; border-color : #666666; display: block; height: 25px; } a.menu:hover,a.menu:active { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px; border-width : 1px; border-style : solid; border-color : #666666; 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; border-style : solid; border-color : #666666; background-color : #FF99CC; } .log{ border-width : 1px; border-style : solid; border-color : #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> ＃１さんのアドバイスでこのようになりました。 これからまだ省けますかね？
- y3k
- ベストアンサー率61% (16/26)
どの観点で省きたいのかによりますが、 「ブラウザ上の見栄えを変えない」「ソースを軽くする」の 観点で考えたところ以下のようになりました。 参考程度にどうぞ。 > 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 { （省略） }
お礼
回答ありがとうございます。 そうですね。ブラウザ上の見栄えを変えずに出来るだけソースを軽くしたいです。 非常に参考になりました。
お礼
回答ありがとうございます。 みなさん、本当に詳しい回答をくださって非常に感謝しています。 また、質問させていただくかもしれませんが、そのときはよろしくお願いします。