みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

<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>

投稿日時 - 2007-03-29 12:44:20

QNo.2876002

困ってます

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

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 15:19:12

お礼

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

投稿日時 - 2007-03-29 16:19:12

ANo.6

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.5

こんにちはNo.3です。
外部スタイルシートというのはスタイルシートを直接ページソースに記入するのではなく、別ファイルに記入したもののことです。
これをページソースで呼び出します。

■簡単な作り方
1.テキストエディタを開いて<style type="text/css">から</style>までのソースを記入
2.名前をつけて(たとえばabcとか)拡張子.cssで任意の場所に保存
3.<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:42:44

補足

回答ありがとうございます。
なんだか難しそうですね(^^;
やっぱりこのままでいきます。


<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>

まだ省けるところはあるでしょうか?

投稿日時 - 2007-03-29 14:51:41

ANo.4

y3k

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:26:06

お礼

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

投稿日時 - 2007-03-29 14:42:23

ANo.3

こんにちは。
いろいろ考えながらもたもたとタグを打っていたら同じような回答がすでに……。

軽くしたいということでしたら、他のページも同じデザインにするのでしたら
外部スタイルシートにしてみるのはいかがでしょうか。

直接の回答になっていなくて申し訳ありません。

投稿日時 - 2007-03-29 13:44:35

お礼

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

投稿日時 - 2007-03-29 13:49:00

ANo.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:24:40

補足

<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>

#1さんのアドバイスでこのようになりました。
これからまだ省けますかね?

投稿日時 - 2007-03-29 13:33:02

お礼

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

投稿日時 - 2007-03-29 13:28:39

ANo.1

y3k

どの観点で省きたいのかによりますが、
「ブラウザ上の見栄えを変えない」「ソースを軽くする」の
観点で考えたところ以下のようになりました。
参考程度にどうぞ。

> 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 {
(省略)
}

投稿日時 - 2007-03-29 13:20:40

お礼

回答ありがとうございます。
そうですね。ブラウザ上の見栄えを変えずに出来るだけソースを軽くしたいです。
非常に参考になりました。

投稿日時 - 2007-03-29 13:27:13

あなたにオススメの質問