CSSを使ってファイルサイズを削減したい

B-Cus 1999/07/21(水) 09:06:56
　http://www.keim.cs.gunma-u.ac.jp/~matsu/link.html
というのを作っているのですが、サイズの肥大化で悩んでいます。
見ていただくとわかりますが、同じタグが何度も(300回くらい)出てきます。

元々は1件につき
　<a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1</a>
　<a href="URL2" style="text-decoration:none"><font color=green>～</font></a>
という記述をしていたのですが、とほほさんのとこでCSSなるものを
ちょっとだけ学んで <head>～</head> に
　<STYLE TYPE="text/css">
　
　</STYLE>
として、1件につき
　<a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1</a>
　<a class=green href="URL2" style="text-decoration:none">ほげほげ</a>
と、少しだけ短くなりました。

で、CSSを使ってこれをさらに短くしたいのですが、それは可能でしょうか。

　1. <a href="URL">URL</a> と、同じURLが2度書かれているのを、
　　 CSSを使って1度だけ書けば済むようにしたい
　2. style="text-decoration:none"もCSSで抽象化したい
　3. class=greenの方のリンクは、全て http://www.jp.freebsd.org/QandA/ で始まる
　　 URLだが、<base>タグを使わず、こちらもCSSで抽象化したい(BASEタグを使うと
　　ページ内リンクが使いにくいから)

以上3点、可能かどうか教えてください。

それからCSS自体についても疑問があるのですが、
　.green { color: green }
を
　.qa { color: green }
として、
　<a class=green href="URL2" style="text-decoration:none">ほげほげ</a>
を
　<a class=qa href="URL2" style="text-decoration:none">ほげほげ</a>
とすると、リンクの色が緑になりません。これは何故でしょうか?
ID(z98yとか)を使えばできましたが、なぜgreenをqaに変えるとダメなのか
教えてください。

よろしくお願いします。

B-Cus 1999/07/21(水) 09:15:01
訂正訂正。正確には1件につき
　<li><a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1</a>
　<dl><dd>
　　<a class=green href="URL2" style="text-decoration:none">ほげほげ</a>
　</dl>
という構造になってます。<li><dl><dd>もあわせて抽象化できれば
さらにgoodです。いい方法ありませんか?

ST 1999/07/21(水) 09:20:10
2については，
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:hover { text-decoration:underline; }
A:active { text-decoration:underline; }
こんな感じでは。最初の一行があればやりたいことはできると思います。1は…そんなことできるんですか？

>…とすると、リンクの色が緑になりません。これは何故でしょうか?
http://www.tohoho-web.com/css/basic.htm#Class
の方法がいいと思います。

B-Cus 1999/07/21(水) 09:37:33
なるほろ。
> A:link { text-decoration: none; }
style="..." はそのままCSSとして利用できるわけですね。
で、Aを定義(用語がわからん…)することで、リンク全体に影響を
与えられる、と。今回は一部のリンクだけに影響を与えたいので
　#z98y { text-decoration: none; color: green; }
としました。これで最初に比べて20KBくらい減ったかな?

> 1は…そんなことできるんですか？
できないですかね? 1時間前に初めてCSSに触れたもので、
CSSで何が可能で何が不可能かを理解してないんですが。

> http://www.tohoho-web.com/css/basic.htm#Class
> の方法がいいと思います。
いえ、うまくいかない理由を知りたいのです。
　.green { color: green }
はよくて
　.qa { color: green }
がダメということは、
　.ほげ { color: 最初のほげと同じ文字列 }
である必要があるとか?

ポケ鬼！！ 1999/07/21(水) 11:11:08
　久々に復活！！入院してたんです（少年院じゃないよ）。
　いやぁ、はじめて手術しました。麻酔聞いてていたみはないけど、メスが刺さったときに「さくっ」という感覚があるのは最高に気持ち悪いですね。

　さて・・・

>CSSで何が可能で何が不可能かを理解してないんですが。

　CSSでできるのは主に配置の制御と、装飾ですね。

>いえ、うまくいかない理由を知りたいのです。
>　.green { color: green }
>はよくて
>　.qa { color: green }
>がダメということは、

　どんな環境なのか分からないですけど、単なるバグでしょうね。
　NT4.0＋IE5.0ではちゃんと緑色になります。

>　.ほげ { color: 最初のほげと同じ文字列 }
>である必要があるとか?

　これはないです。
　余談ですが、そもそもクラス名に色名を付けるのはナンセンス。「見栄え」ではなく「意味」を前面に出すためのCSSなのですから。後でリンクを赤にしたいなぁ・・・と思ったときに、
.green {color: red;}
じゃ気持ち悪いしね。

Ｓ [E-Mail] [HomePage] 1999/07/21(水) 14:36:22
>　1. <a href="URL">URL</a> と、同じURLが2度書かれているのを、
>　　 CSSを使って1度だけ書けば済むようにしたい

これは単に

<li><a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1
　<dl><dd>
　　<p class=hoge>ほげほげ</p></a>
　</dl>

と書けばすみそうですが、だめですか？

　

Ｓ [E-Mail] [HomePage] 1999/07/21(水) 14:46:50
すみません。質問の意味を取り間違えました。同じURLが2度という
のは、<a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1
のことで、<a href="http://hoge/fuga/URL1">と<a href="http://hoge/fuga/URL2">
の２度という意味ではなかったのですね。

すみません。

toshi [E-Mail] 1999/07/21(水) 16:22:21
＞１について...
あの～、質問の意味をとりちがえていたら申し訳ありませんが、JavaScriptを使ってはダメなのでしょうか？
それなら
<script language="JavaScript">
  url[0]="http://hoge/fuga/URL1";
  url[1]="http://hoge/fuga/URL2";
  .
  .
  .
  url[99]=http://hoge/fuga/URL99";

  url_max=99;

  var BUF="";
  n=0;
  while(n<=url_max){
    BUF+='<li><a href="'+url[n]+'">'+url[num]+'</a><dl><dd>'
       + '<a id=z98y href="'+url[n]+'">いろいろ</a></dl>';
    n++;
  }

  document.write(BUF);
</script>
でいけるとおもいます。あとは適当に応用してください。
私もこれと似たことをやろうとしていましたのでよければ
http://hp.vector.co.jp/authors/VA014508/main/index.html
のソースをご覧下さい。かなり見にくいですが...(笑)

B-Cus 1999/07/21(水) 17:36:27
> 少年院じゃないよ
救護院ですか?(さぶ～)

> CSSでできるのは主に配置の制御と、装飾ですね。
要は見栄え、ってことですね。
　#define mylink(x,y) <li><dl><dd><a href="$x">$x</a>\
　　<a href="http://....../$y.html">[管理番号 $y]</a></dl>
なんて感じのが出きるかなと思ったのですが無理のようですね。

> どんな環境なのか分からないですけど、単なるバグでしょうね。
なるほど。今はSolaris2.5.1+Netscape4.08を使ってます。
# 4.6がうまく入らないの。

> JavaScriptを使ってはダメなのでしょうか？
確かにもっともな案です。が、互換性のなさ(UNIXのNN/NCでエラーに
なるページがとても多い)で苦しんできた僕としては、Javascriptにだけは
手を出したくないので、すいませんがパスさせてください。

別に他意はないのですが、toshiさんの
　http://hp.vector.co.jp/authors/VA014508/main/index.html
もうちの環境では見ることができません。
　JavaScript Error:
　http://hp.vector.co.jp/authors/VA014508/main/data.js,
　line 63:
　unterminated string literal.
　　　　s_like[s]="以下文字化け...
　..................^
# Javascriptは知らないのでブラウザの方が悪いのかもしれませんが。
# なお、このエラーの出るサイトは山のようにあります。

あと、another-htmllintでチェックすると
　line 51: <A> の ID 属性の値 `z98y` は 47行目ですでに使われています。→ 解説 106
というエラーがたくさん出ます。
　106.<TAG> の ID 属性の値 `XXXX` は NN行目ですでに使われています。
　　HTML2.xやHTML4.0で各タグに付けることのできるID属性は、ひとつのHTML中で
　　重複した名前を付けることはできません。また、ID属性の値は、大文字小文字
　　区別されません。
ということらしいですが、
　#z98y { text-decoration: none; color: green; }
　<a id=z98y href="...">ほげほげ</a>
は誤りなのでしょうか?

鱸 1999/07/22(木) 00:19:04
僕の使っているCSSの解説本には
id名もclass名も" "で囲まれているので
" "で囲ってみたらどうですか？

.hoge1 {color:green;text-decoration:none;}
#hoge2 {color:green;text-decoration:none;}

<A CLASS="hoge1" HREF="URL">ほげほげ</A>を
<A ID="hoge2" HREF="URL">ほげほげ</A>

こんな感じ。

たーむ 1999/07/22(木) 01:29:09
>　106.<TAG> の ID 属性の値 `XXXX` は NN行目ですでに使われています。
>　　HTML2.xやHTML4.0で各タグに付けることのできるID属性は、ひとつのHTML中で
>　　重複した名前を付けることはできません。また、ID属性の値は、大文字小文字
>　　区別されません。

これは

#z98y { text-decoration: none; color: green; }

このように指定した場合

<a id=z98y href="aaa">ほげほげ</a>

<a id=z98y href="bbb">ほげほげ</a>

というように、HTML中で２回以上z98yという値は使用してはいけない
と言うことだったと思います。
JavaScriptでもidが使われてるみたいなので
CSSに限ったことじゃないのかもしれませんが。

たーむ 1999/07/22(木) 01:38:17
続けてですみませんが・・・

> <li><a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1</a>
> <dl><dd>
> <a class=green href="URL2" style="text-decoration:none">ほげほげ</a>
> </dl>
>

とこのようになっているのであれば
このようにしてはどうでしょうか？
Netscapeでちゃんといくか不安ですが。

<STYLE TYPE="TEXT/CSS">

</STYLE>

<li><a href="http://hoge/fuga/URL1">http://hoge/fuga/URL1</a>
<dl>
<dd><a href="URL2">ほげほげ</a>
</dl>

B-Cus 1999/07/23(金) 00:00:56
[[解決]]
一応解決マーク付けておきます。
> HTML中で２回以上z98yという値は使用してはいけない
> と言うことだったと思います。
これはどうしてなんでしょうか。まるで「1度しか読み出せない変数」
みたいで、これだとIDの存在意義があるのかと思ってしまうのですが…。

> このようにしてはどうでしょうか？
どうもです。試してみます。

Nobu3 1999/07/23(金) 00:38:58
直接関係ないですが、idの重複についてです。
idは、nameと同じようにアンカーの役目もするので、重複できない事になっています。（HTML4.0では）
でも、IE4などは、同一idを配列化してくれるので、スクリプトなどで使う分には問題ないですが。

[上に] [前に] [次に]