2009年4月アーカイブ

背景に半透明を配置したいとき、PNG画像を用いるが、
IE7での配置の際に気をつけることが見つかったので、メモとして。

背景画像にPNG画像(半透明)を配置したいときに気をつけなきゃいけないことがある。
それは画像のリピート。

こちらの記事実験をいろいろしていると記述違いがありました。

感覚として、極端な話、
1ピクセル×1ピクセルの半透明PNGを用意すれば、あとはリピートでなんとかなるというような感じになるが実はIEではうまくいかないことが判明。
1ピクセル×1ピクセルのときはなめらかに動くが、これを5ピクセル×5ピクセルにするとうまくいかないことが判明。
うまくいかないというか、スクロールなどをしたときに、ものすごいガタつく。カクンカクンと動く。これはIE7で言えることで、IE8になったときにどうなのかはまだ検証していない。
このガタつきをなくすためには、背景画像のリピートを1方向にするのがいい。

例えば、900px幅のコンテンツがあったとする。
このとき横幅900pxで背景用透明PNGを作成し、background-repeatをrepeat-yにすれば滑らかになる。これを
1px幅の画像を作り、repeatに指定してしまうと、すごくもたつく。
1ピクセルのときは問題が感じられないが、5ピクセルにするともたつく。
コンテンツ内容によると思われるけど、これは結構見た目の上で重要かな・・・。


一応実験してみてるので、参照のこと。
中身があまりな感じなので、読み込みのタイミングでのもたつき程度しか見えませんが。。。

Ex:1px
http://sevenstyleweb.com/labo/pngtest/1x1.html

Ex:5px
http://sevenstyleweb.com/labo/pngtest/5x5.html

Ex:900px
http://sevenstyleweb.com/labo/pngtest/900x5.html

風邪になった。


鼻水がとまらん。咳が「ぐえっほ」級。



だいぶ調子はよくなったけど、鼻水がとまらん。



ティッシュがたらん。

先日のどを鏡でたまたまみたら、でろーんってなってたので、耳鼻科に行ってみたら、でろーんは特に問題ではなかったが、扁桃腺がでかすぎるとのこと。

でかすぎるせいで、夜無呼吸とかそんなのになってんじゃね？ってこと。


手術という言葉が現実味を帯びてきた。


いっそやっちまうか。やるとしたらいつだ？

そんな感じで若干揺れる。

IE6では効かないので、expressionを使ってIE6でもなんとか実現できるし、
IE7のシェアも上がってきていることなので、fixed使ってもいいんじゃね？ってことで、いろいろやっていると配置位置の件で気になることが出てきたのでいくつか整理のためにもメモ。

そもそもposition:fixedというのウィンドウの絶対位置として場所をしてしている。つまり

#hoge{
    position:fixed;
    top:100px;
    left:100px;
}

とすると、画面表示部分のtopから100px,左から100pxの位置に配置される。これはすでに認知。

さてでは、中央寄せのコンテンツの場合、どうすればいいの？ってことになる。
position:absoluteの感覚でやっていけば、親ボックスをrelativeにしたら相対位置になんじゃね？って感じになる。つまり

<div id="parent">
     <div id="child">
           hogehogehogeho
     </div>
</div>

ってソースのとき、absoluteだと

#parent{
     position:relative;
     width:800px;
     margin:10px auto;
}
#child{
    position:absolute;
    top:100px;
    left:100px;
}

とすれば、#parentのボックスの中で相対位置としてtop:100px,left:100pxで配置される。
しかし、これと同じように考えて、fixedを

#child{
    position:fixed;
    top:100px;
    left:100px;
}

と指定してしまうと、fixedは表示部分の絶対値としての配置になるので、普通に、左上からtop:100px,left:100pxという結果になる。（初めの#hogeと同じ）

でも中央寄せのときにも位置を固定したいときどうすれば？ということになるのだが、やり方としては、位置の指定をmarginでやるとうまくいく。
つまり、

#child{
   position:fixed;
   top:100px; /*トップからは絶対値と同じなのでそのまま*/
   margin-left:100px;
}

こうすれば、とりあえず問題ない。
とにかく、fixedでは相対位置の考えを持っていないので、相対位置を意味するものを使わないとうまくいかない。ということのようだ。


間違っていたらご指摘お願いします。
また何か調べたら書き込みます。

伊藤学さんのエントリーに【雑記】新たに本気でチェックすべき対象メディアの登場？と題して書き込みがあった。正直キター！という感じの記事だ。

以前Wiiでインターネットをしてみて思ったことという記事を書いたが、俺はこの方向が必ずあると思う。学さんの記事の中にある

実際Web制作する側に情報提供が事前に下りてこないのは、代理店とつながっていないとそもそも除外されているということなのだろうか？
それとも、チェックしたければメーカーのTV買って自分でチェックしろ、というのだろうか。

というのはかなりうなずける。以前から気になっていた情報なので、もろもろ記事を探してはいたのものなかなかヒットしないという現状があった。あるとすれば、Wiiでネットができるというくらいの記事。角メーカーで言えば、アクトビラ的なものばかり。を
ところが、今回GIGAZINEの記事
「続きはWEBで」をすぐに検索可能、Yahoo！JAPANが新サービス「テレビ版Yahoo！JAPAN」を開始
を見る限りメーカーなどはすでに見ている。これはどういうことなんだろうか？やはり作り手次第という感じもするが・・・。

まぁ政治的な部分もあるだろうから、そこら辺はどう言っても仕方なく、結局作り手の考え方になってくるというのは今まで通りのことだろう。

さて、前に思っていた、impersonal computer（個人的でないコンピュータ）にTVは向かっていると思う。その時に、Webコンテンツ（今のWebコンテンツ）では、やはり対応できないと思う。やっぱりどこまで行っても、現在世の中に出ているWebコンテンツは個人で見るものだ。

この記事のようにTVで・・・という感じになれば、それは個人だけをターゲットにできない。複数人数。またコンテンツとユーザーとのコミュニケーションを考えるのではなく、コンテンツを使ったユーザー通しのコミュニケーションを頭にいれないといけないのではないだろうか？

どちらにしても、俺の思っている方向であることには違いないし、今まで「どうだろうな」と思っていた（半信半疑だった）部分が、すこし後押しされたような気分だ。

情報を集めてもろもろ考察をしてみながら、新しい価値観を見つけていければ面白い事間違いないと思う。

あ、誤解をされていては困るので一応言っておくが、iPhoneのような完全パーソナルな方向性も「あると思います」。俺はそれだけではないんじゃねーの？ってスタンス。

パーソナルとインパーソナルの世界が広がっていって、最終的にはそこも連携する・・・と思うわけ。