基本的にWebのもの作る時はMacで作ったあと、VMWare Fusion上のWindows XPのIEでチェック、問題があれば修正って流れでやってる(みんなも？)。
で、Windows上でたまにIE以外のブラウザもチェックしたりするんだけど、なんかおかしいの出たのでメモっとく。
Windows版のGoogle Chromeで見た、このサイトのFooter。
backgroundに-webkit-gradientを使ってるんだけど、見事におかしなことになってる。リンク要素にマウスオーバーするとその要素のみ、backgroundが出てくる。謎。Windows上のGoogle Chromeのみでの現象。VMへのメモリ割当が少ない(300MB程)のが悪かったりするのかな？
Windows版Safariでフォントにアンチエイリアス掛けるとLucida Grandeがなんかおかしくなる。
右上の「Search」のところ。フォントのディセンダが通常のWindowsのフォントレンダリング時と比べて大きくなっている。Safariが自前で持ってるLucida Grandeのフォントの問題なのかな。ちなみに通常のフォントレンダリングはこんなん↓
他にもスクリーンショットは取ってないけど、Safari/Chromeでinput type=”search”のデザインがなんかおかしかった。少なくともMac上のSafari/Chromeとは全く違うものになってる。ので、Windows上ではinput type=”search”は使わないようにした。
box-shadowもなんか違う感じだった。
Firefoxはこういうとこ優秀だなーと思う。
ちなみに、問題の解決はしてない。ほったらかしー。
なんか飽きてきたので、見た目変えました。数日前。
今回は簡素な造りになってるんだけど、ここに到るまで随分時間が掛かった。ほぼ出来上がりのものを4、5回作り直した…。最初に考えていたものとは全く違うものになってしまったけど、シンプルになったからこれでよし…かな…。まぁ当初考えてた「ワイド画面が主流やねんから、横をもっと有効利用せなアカンな！」とは全く逆方向に行っちゃってるんだけど。むしろ縦が狭くなった。なにこれ。なにやってんのよ。
前のテーマファイルを使って作り直したんだけど、コードは随分と少なくなった。削ってくばっかり。JSON読み込んでうんたらほんたらとかなくなったしね。css/jsはほとんど書き直し。jsは今もちょこちょこ追加・修正中。
使ってるライブラリ等は、jQuery, uuAltCSS, dynamic gradient backgroundと、YUI Reset/Fonts CSS(現時点)。IEでの表示にはuuAltCSSに頼りっきり。ほんとすごいなぁこれ。非IEではCSSGradientが使えない環境の場合、dynamic gradient backgroundを使ってグラデーションさせてる。CanvasのtoDataURL使ってbackground-imageに突っ込んでるくさいから違和感無いね。生成の負荷も軽いっぽいし。
今回もインターフェースには画像ファイルを使わずにCanvasで(ほぼ無いけど)。SVG使おかなと思ったけど、そもそも画像をあんまり使わないし、CanvasだったらuuAltCSSにuuCanvas入ってるから、別途SVGのIE向けライブラリ(SIEとか)読み込まなくて済むからね。
あ、全部uuAltCSSでやればいいのかなぁ。
それと、やっとAutopagerizeに対応させた。以前気持ち悪いとぼやいてたrel=”next”だとかの件はSITEINFOで回避。
あとは、Footerなんとかしよ。
もうひとつ、一年くらい前に作って放置(開発環境に)したままのiPhone用テーマもビシっとさせてこっちに持ってこよ。またApplicationCacheとか使お。つかiPhoneのSafariで、metaに何か書いたらorientationしないモードみたいになんないかなぁ、そろそろ。あと、position:fixed;とかー。そしたらもっとSafariが活きてくると思うんだけどなー(Flash対応よりも)。
デザイン変えたときにほったらかしになってたArchivesとTagsを追加。
全部Javascriptだけでやったので、ブラウザがJavascriptに対応してなかったり切ってたりしてると、存在そのものが見えないです。というか、このサイトJavascript切ってるといろいろ見えないです＞＜ トップページの縦にズルンッとスライドするやつとかね。WordPressにJSON吐かせて自由自在ー。
今までだと、Javascript切っててもある程度見られるように作ったりしてたし、それが当たり前なんだとおもうけど、最近はこうやってバッサリ切り落とした作りでいっちゃうね。まぁコンテンツじゃないから問題なし。
ということで、ArchivesとかTagsとか押してみるといいよ。
とりあえず押してみるのよ、それでダメだったら引いてみよう。最初から待ちのスタンスじゃやっぱダメだよね。うん。はい。
追記 090421:
jQueryのfancyboxプラグインも、Archives & Tagsで使ってるやつに変えた。なので、pngfixなjsも使わなくなった(でも、スクリーンショットとかで透過png使うとき用にcss書かなあかんな)。でもまぁこれでインターフェース周りで使う画像が全てなくなった。ちょうきもちいい。
それと、マウスオーバー時にズームしますよアイコンも追加。Closeアイコンも。このへんのアイコンはcanvasで。IEでの表示はuupaa-excanvas.jsに助けてもらってます。
あ、CloseアイコンはMacとそれ以外のOSで表示位置を変えてみました。MacのUIだとウィンドウを閉じるボタンは左側にあるので。まぁWebのUIとOSのUIをごっちゃに考える必要は全くないんだけど、モノは試しってことで。
まだまだ気に入らない部分が山ほどあるので、ちょいちょい修正・追加ちゅう。
見た目変えました。
当然、毎度の通り作ってる途中です。
やっぱりバックは白がいいわ。モノクロームがいい。落ちつくというよりは安心するね。
とりあえず、現状ArchivesとかTagsとかがないので早めになんとかしたいなと。
cssでHelvetica Neue Lightを使うときのメモと、いろいろやってて気付いたこと。
まぁまず使う時の書き方。
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
これ以外の書き方だとうまくいかなかった。font-familyの”Helvetica Neue”を取るとFirefoxだとダメで、”Helvetica Neue Light”を取るとOperaがダメ。font-weight:lighter;だとSafariでの表示がLightにならなかった。
と、各ブラウザで動作がバラバラになってて、結局上の書き方でなんとかうまくいった。でも、上の書き方でHelvetica Neue UltraLightを使おうとするとFirefoxだけダメだった（font weightは100ね）。これはFirefoxのバグなのかなぁ…。
気付いたこと（間違ってたら叱ってください）
- Firefoxはフォントのファミリーネームにしか対応していない
- SafariとOperaはフォントのフルネームも対応してる
- Operaはfont-familyをフルネームで指定されたとき、font-weightを無視する
- Safari(4は)はfont-familyをフルネームで指定されていても、font-weightが機能する
- OperaもSafariもfont-familyをファミリーネームで指定すると、レギュラー以下のweightにできない
というような感じ。検証ブラウザのバージョンが全部Beta版（Firefox3.1b2, Safari4Beta, Opera10a）なんであてにならないかも。
Continue reading
変えてばっかりだけど、また変えよっかな。
だって飽きちゃったんだもん。二週間もあったら飽きるには十分すぎる。
えーものすごく小さいことなんだけど、日付のところに時計のアイコンが出るようにしました。凝視してみるとわかると思うんだけど、時計なんですよこれ。
で、これ、gifでもjpgでもpngでもtiffでもsvgでもswfでもましてbmpでもなくて、canvasなんです！！詳しくはこことかこことかで見て！
ずっとこのcanvasを使ってみたかったんだけどあんまり見聞きしないし、正直面倒だったので後回し後回しになってたんだけど、やっと踏み込みました。いつもどおり「うはーわからーん、わからんわー！」と言いながらの作業でした。
とりあえずーな感じの仕上がりなので、もうちょっとなんとかしたいところ。
Continue reading
デザイン変えました。
背景は白の方が落ちつくなぁなんて言ってたのにね…。色付きです。
前回も使ってたposition:fixed;を今回はページ送り部分にも使いました(画面の下部分にあるやつね)。で、ついでに今回はじめてcss3のborder-radiusとbox-shadowも使いました。対応してるブラウザ(Safari3, Firefox3.1beta)で見てみるといいよ！
実はこのデザインに至る前にしこしこ作ってたのがあったんだけど、年明けと共に飽きられてしまった（ぼくに）。この新しいのはぼくにしては珍しく、一週間くらいで作ったんじゃないかな。ま、シンプルだし、jsまだ書いてないしね。
前のデザインは一月持たなかったなぁ。
そして当然、まだ未完成。
探し物をしてたら、流れ星をみつけた。
7年前につくったもののようです。
肝心の探し物はみつからなかった…。スキャンして溜め込んだテクスチャーデータ集がまるごとなくなってる…。Spotlightよ、探し出してくれよ。
