Tag: design

Webkit いろいろ

基本的にWebのもの作る時はMacで作ったあと、VMWare Fusion上のWindows XPのIEでチェック、問題があれば修正って流れでやってる(みんなも?)。
で、Windows上でたまにIE以外のブラウザもチェックしたりするんだけど、なんかおかしいの出たのでメモっとく。

chrome_footer
Windows版のGoogle Chromeで見た、このサイトのFooter。
backgroundに-webkit-gradientを使ってるんだけど、見事におかしなことになってる。リンク要素にマウスオーバーするとその要素のみ、backgroundが出てくる。謎。Windows上のGoogle Chromeのみでの現象。VMへのメモリ割当が少ない(300MB程)のが悪かったりするのかな?

safari_anti-alias
Windows版Safariでフォントにアンチエイリアス掛けるとLucida Grandeがなんかおかしくなる。
右上の「Search」のところ。フォントのディセンダが通常のWindowsのフォントレンダリング時と比べて大きくなっている。Safariが自前で持ってるLucida Grandeのフォントの問題なのかな。ちなみに通常のフォントレンダリングはこんなん↓

safari_normal

他にもスクリーンショットは取ってないけど、Safari/Chromeでinput type=”search”のデザインがなんかおかしかった。少なくともMac上のSafari/Chromeとは全く違うものになってる。ので、Windows上ではinput type=”search”は使わないようにした。
box-shadowもなんか違う感じだった。

Firefoxはこういうとこ優秀だなーと思う。

ちなみに、問題の解決はしてない。ほったらかしー。

見た目 reboot

なんか飽きてきたので、見た目変えました。数日前。

今回は簡素な造りになってるんだけど、ここに到るまで随分時間が掛かった。ほぼ出来上がりのものを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対応よりも)。

scrap

dev-font-sketch

久しぶりすぎて、うまくパスが描けない。

Archives + Tags

デザイン変えたときにほったらかしになってた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をごっちゃに考える必要は全くないんだけど、モノは試しってことで。

まだまだ気に入らない部分が山ほどあるので、ちょいちょい修正・追加ちゅう。

Changed

home見た目変えました。

当然、毎度の通り作ってる途中です。
やっぱりバックは白がいいわ。モノクロームがいい。落ちつくというよりは安心するね。

とりあえず、現状ArchivesとかTagsとかがないので早めになんとかしたいなと。

use Helvetica Neue Light

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

たぶんまたCHANGE

変えてばっかりだけど、また変えよっかな。

だって飽きちゃったんだもん。二週間もあったら飽きるには十分すぎる。

はじめてのcanvas

えーものすごく小さいことなんだけど、日付のところに時計のアイコンが出るようにしました。凝視してみるとわかると思うんだけど、時計なんですよこれ。

で、これ、gifでもjpgでもpngでもtiffでもsvgでもswfでもましてbmpでもなくて、canvasなんです!!詳しくはこことかこことかで見て!

ずっとこのcanvasを使ってみたかったんだけどあんまり見聞きしないし、正直面倒だったので後回し後回しになってたんだけど、やっと踏み込みました。いつもどおり「うはーわからーん、わからんわー!」と言いながらの作業でした。
とりあえずーな感じの仕上がりなので、もうちょっとなんとかしたいところ。

Continue reading

Design Rebooooot!

デザイン変えました。

背景は白の方が落ちつくなぁなんて言ってたのにね…。色付きです。
前回も使ってたposition:fixed;を今回はページ送り部分にも使いました(画面の下部分にあるやつね)。で、ついでに今回はじめてcss3のborder-radiusとbox-shadowも使いました。対応してるブラウザ(Safari3, Firefox3.1beta)で見てみるといいよ!

実はこのデザインに至る前にしこしこ作ってたのがあったんだけど、年明けと共に飽きられてしまった(ぼくに)。この新しいのはぼくにしては珍しく、一週間くらいで作ったんじゃないかな。ま、シンプルだし、jsまだ書いてないしね。

前のデザインは一月持たなかったなぁ。

そして当然、まだ未完成。

nagareboshi

探し物をしてたら、流れ星をみつけた。

流れ星

7年前につくったもののようです。

肝心の探し物はみつからなかった…。スキャンして溜め込んだテクスチャーデータ集がまるごとなくなってる…。Spotlightよ、探し出してくれよ。

Me

Yasutaka Sato

more

Tags
add-on again album amazon analytics animal apologize app apple appreciation bag baseball battle beauty birthday blog blood blue bluetooth body book bookmark bought brave broken browser burn camera canon canvas car care catalyst change chocolate chrome chromium circle cleaning code coffee coffeeshop coke command communication complete conference cook coupon creation css cui cute dark db design desire desktop diary disqualification dizzy drama dream drive drunk eeepc empty erotic error essay fake false fav festival firewall fireworks flirt font food forgot fortune frame france friends from iPhone fx game geek geolocation girl google graph hack hatena headache holiday hot house hungry ice impressions interesting ipad iphone ipod itunes jailbreak jetpack jquery js json kicks kiss kobe kyoto leopard lie life lifestyle light lighttpd linux livedoor logic lost love lunch lyric mac macbook mail map maps marriage mcdonald's me memo mental message microsoft miss misunderstanding mobile moblin morning mouse movie music mysql mystery name neet netbook newbalance news newyear night notebook occupation omelet os pack pain parting past pc peace peperoncino perl phobia photo photoshare php picture plan pleasure plugin poem pop producer profile pwned rabbit radio rain rap recipe redo regret relation release remember reminiscence repeat reverse rice rip rnb rrd sakura scan scare search server sex shinjuku sick simple sky slept slim smell snack snowboard softbank sorrow sound souvenir spaghetti speed sports ssd star start station store streaming stupid stystk suicide summer sunrise switch tears temperature temple terminal test thanks thought time tips tokyo trable trance travel true tumblr twitter uneasy urban used uupaa vacation various vertigo video walk wandering web weight wifi word work wp year-end you youtube