2008年11月21日

トップをねらえ!

「トップをねらえ!」ってアニメがあるそうだ。

ここでは<a href="#top">ページの最初へ</a>というふうな、「ページの最初へ移動しよう」の意味


ページの最初に書いてあるものに id="top" とすればよさそうだが、案外うまくいかない。margin や padding の関係で微妙にずれる場合がある


<a href="#">ページの最初へ</a>
とすればページの最初に戻るが、行くところがなく仕方がないのでたまたま最上部に戻るだけで不正な書き方になる。javascriptを使って実現しているページもあるほどだ。その場合 javascript が動かないと移動しない。それでも往々にして動くのは script と併せて href="#" などとしてあるせいだ。またページの最初・ body 直下に<a name="top"></a>とやっている所もある。これも見ていて気持ちの良いものではない。


先日webstandards.orgを見たら、scriptを切っているにもかかわらず、蜂をクリックすると見事にTopへジャンプする。

ソースを見てみると html に id が設定してあった、body に id を振ったことはあるけれどもなるほどなぁと、ちゃんと勉強しなかったものなぁ、と。


というわけで、トップを狙うには

<html id="top" ………>

として

<a href="#top">ページの最初に移動</a>


などとしましょうという備忘。


このページにも <html id="sixapart-standard" ………> とあったので訂正したらちゃんと移動するようになった。

続きを読む
posted by ふう at 19:24 | Comment(0) | TrackBack(0) | HTML

2008年11月11日

svgを背景にする

htmlでsvgが背景に使えれば、ギザギザのないきれいな画像になる。
表示されるのはOpera・Safari位しか思いつかないが、いずれほかのブラウザがもしサポートすれば、そのとたん表示されることになる。それもおもしろい。


svgの画像を作らなければならないが、Oooか花子しか手元にない。そこで花子を使ってsvgを作ることにした。

日本語文字をいれたいが、そうするとブラウザによってはうまく表示されないことがある。そこで文字をアウトライン化して図形として張り込むことにした。ついでに文字を変形させた。幅が1pxの線もギザギザがなく表示されている。


cssには


background-image: url("hoge.svg");

と書くだけだ。あとは普通の画像と一緒。


作った画像は何のひねりもないこれ

これを背景画像にしたページがここ


Operaで見ると背景に表示され、インラインフレーム扱いになっている。Firefoxで見ると背景は表示されないが、背景だけを表示するようにすると画像が見えるようになる。何か拡張があって導入すると見えるのかもしれない。IEでは背景はないことになっている。

posted by ふう at 22:33 | Comment(0) | TrackBack(0) | css

2007/02〜 ここに移動したのは 2010/04/02 by huu