私のウェブサイトにリンクする際に、ちまたに氾濫しているいわゆる「バナーアイコン」を使いたいという方がもしいらっしゃるのなら、当方で用意したものがございますのでどうぞご使用ください。(これです →) Index of /˜s-endo/
ただし、CSS1に完全対応したウェブブラウザでないと当方の意図した表示にはなりません。そういうわけで、現時点(2000年1月)でまともにこれを表示できるウェブブラウザはMozilla/5.0くらいだと思いますが。:-)
(2000年7月追記)MSIE 5.5; Windowsでもようやくインライン要素へのボーダー指定が有効になったようですね。Macintosh版はMSIE 5.0; Macの頃から対応していたようですけど。
このバナーアイコンを使用する際のHTMLの記述例は以下のとおりです。
<A HREF="http://www.yk.rim.or.jp/%7Es-endo/"
HREFLANG="ja"
CHARSET="ISO-2022-JP"
LANG="en"
TITLE="Index of /˜s-endo/"
STYLE="font-family: serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: large;
color: black;
background-color: gray;
background-image: none;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
line-height: 2em;
margin: 0.25em 0.5em;
padding: 0.25em 0.5em;
border-width: medium thick;
border-color: silver black black silver;
border-style: outset;
display: inline;
white-space: nowrap;"
>Index of /˜s-endo/</A>
こちらはCSS2版のバナーアイコンです。 バナーアイコンの標準的なサイズ(88×31ピクセル)に合わせてみました。MSIEでは縦横4ピクセルずつ小さくなってしまうのですが、これはご愛敬ということで。なお、一番外側のSPAN要素で"display: block"の指定をしているため、バナーアイコンの前後が改行された状態で表示されてしまいます。これが気になる場合は、フロートやポジショニング関連の指定を使ってうまくごまかしてください。
(2001年4月追記)MSIE 6.0; WindowsとかMSIE 5.0; Macならば、縦横4ピクセルずつ小さくなってしまう
ことはなさそうです。
HTMLの記述例は以下のとおりです。
<SPAN STYLE="background-color: ThreeDFace;
background-image: none;
text-decoration: none;
text-indent: 0;
margin: 4px;
padding: 0;
border-width: 2px;
border-color: ThreeDLightShadow ThreeDDarkShadow ThreeDDarkShadow ThreeDLightShadow;
border-style: solid;
width: 84px;
height: 27px;
display: block;
white-space: nowrap;
overflow: hidden;
cursor: pointer;">
<A HREF="http://www.yk.rim.or.jp/%7Es-endo/"
HREFLANG="ja"
CHARSET="ISO-2022-JP"
LANG="en"
TITLE="Index of /˜s-endo/"
STYLE="font-family: serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: ButtonText;
background-color: ThreeDFace;
background-image: none;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-indent: 0;
line-height: 1;
margin: 0;
padding: 0;
border-style: none;
white-space: nowrap;
position: static;">
<SPAN STYLE="font-size: 8px;
color: ButtonText;
background-color: ThreeDFace;
background-image: none;
text-decoration: none;
text-align: left;
line-height: 1;
margin: 0;
padding: 0 0 0 2px;
border-style: none;
width: auto;
height: 8px;
float: left;
position: static;"
>Index of</SPAN>
<SPAN STYLE="font-size: 18px;
color: ButtonText;
background-color: ThreeDFace;
background-image: none;
text-decoration: none;
text-align: right;
line-height: 1;
margin: 0 0 -4px 0;
padding: 0 4px 0 0;
border-style: none;
width: auto;
height: 18px;
display: block;
clear: both;
position: static;"
>/˜s-endo/</SPAN>
</A>
</SPAN>
なお、ISO-HTML(ISO/IEC 15445:2000)ではすべての要素についてSTYLE属性が破棄されています。ISO-HTML文書でこのバナーアイコンを使用する場合は、適当なクラスを設定した上で、HEAD要素内でSTYLE要素を使用するなり外部スタイルシートを使用するなりしてスタイル指定を行ってください。
以上の内容はすべてジョークなので真に受けないでくださいね。いや、現状のウェブブラウザはCSS1すら完全にはサポートしていないのでまともに表示できないというのは本当なのですが……。
(2000年11月追記)CSS1くらいなら、まともにサポートしているウェブブラウザも多くなってきましたね。
まあ、私のウェブサイトでは「画像である必然性」がないかぎり画像は使わない方針なので、バナーアイコンのようなものを使うことはないでしょう。
Author: Shingo Endo <s-endo@yk.rim.or.jp>