最近書いた記事
2009年3月
Diary
2009年3月 3日 20:13
2009年3月27日
よく行くスーパーのマリームの価格設定は意味不明だ。リンク先2段目にある、詰め替えパックが棚の上下に並んでいるのだが
- 250g パック：208円
- 500g パック：498円
という値札がついている。いつ行ってもその値段・セールの際も 500g パックがやっぱり割高、という状況なので値札間違いではないと思うのだが、これで 500g パックは売れるのだろうか。
「650g パック 647円」なんて商品ならまだ分かる。（650g 647円ってのは上記 500g パックと同じ単価）計算すると多い方が割高になる事に変わりはないのだが、店頭で「250g で 208円とー、えっとこっちは 650g で 647円だからー」ってのはかなり面倒なので「たくさん使うからこっち買おう」という人もいるだろう。
しかし 250g vs 500g と、単純に2倍すれば良いだけなら大抵の人が暗算可能で、しかもご丁寧に 250g パックの価格の十の位は 0 で、繰り上げに頭を悩ませる必要もない。
これが瓶入り商品と詰め替えパックの話であれば、単なるお買い得目線から少し離れて「詰め替えパックより瓶入りの通常商品の方が割安じゃん。でもま瓶を無駄に捨てるくらいなら、簡易包装でゴミの少ない詰め替えパックを買うか」って人がいるんだろうなぁ、とも思える。（オレ自身、洗濯洗剤なんかはそのパターンで詰め替え用を買っている）
しかし、両方詰め替えパックとなると、500g の代わりに 250g を2つ買ったところで、減らすことができるゴミはごくごくわずかでしかない。
楽天で検索してみると「248円＆508円」と、さほど差が無いながらも多い方が割高な店もあったので、500g パックの卸値自体が割高なのだろうか。
2009年3月25日
Turbolinux wizpy その後。
- 操作性が悪い
- 場面によってボタンの挙動が違ったり、長押しを多用する操作体系が混乱を招く。インターフェイスのデザインも極めてチープで、特にヘナヘナしたフォントは見るたびに脱力する。
- 音質がなかなか良い
- 多少高音が強調されすぎている気もするが、音に荒さやこもり感が無く、小さな音量から大きな音量まで比較的素直に聞く事ができる。
- 動画が綺麗
- 画面自体が非常に小さいため全く期待していなかったのだが、明るく鮮やかな画質で PV のような短めの動画を見るくらいなら十分。
当初予定していた寝る時の BGM 再生機としては十分満足。スリープタイマーにワンタッチでアクセスできたら最高だったんだけどなぁ。
2009年3月20日
原因は不明だが、iTunes 8.1 でアクセスにえらく時間がかかる曲がある。
iTunes 起動後の初回アクセス時だけでなく、その曲を再生したり曲情報を見ようとすると、常に10秒以上の時間がかかってしまうのだ。
特殊なフォーマットの曲であるとか、ファイルのある場所が他と違うといった事もなく、ID3 タグを変換したりアートワークを削除してみても変わらず。iTunes で再変換した新しいファイルは問題なく再生できるので、変換に使ったソフトによって何かあるのかもしれない。
昔は音質比較や単なる興味で Windows 用も含めて色々なエンコーダを使っていたから、そのうちの一つ（もしくはいくつか）と、相性やらの問題でもあるのかなぁ。
2009年3月19日
Amazon で 3,100 円と投げ売り状態の Turbolinux wizpy 4GB を購入。スリープタイマーがついてるようなので寝る時の BGM 用に。AAC 非対応なのが地味に痛い。
2009年3月13日
iTunes を Ver. 8.1 にアップデート。
起動がすげー速い。フルスクリーンビジュアライザの切り替えも速い。「アップデートしたら速くなった.....と思ってしばらくしたら元に戻った」ってパターンでない事を期待。
前面のアプリケーションに関わらずキーボードで iTunes を操作できる SizzlingKeys というユーティリティを使っているのだが、iTunes 起動時の「待たされ感」が激減。以前は iTunes を起動項目に入れておこうかと思うくらい起動が遅かったのだが、8.1 ではわずかなタイムラグの後、演奏を開始してくれる。
2009年3月7日
Google のテキストインク色さらに続き。
あれ？ 色戻ってる。
ソースを見ても「{color:#00c}」になってる。いったいなんだったんだ。
2009年3月4日
Google のテキストインク色つづき。
Safari で見ると先日書いたようにくすんで見えるのだが、Firefox や Opera では以前とさほど変わらない。PDF 書類などへのリンク判別用にユーザサイドスタイルシートを使用しているので、そこに変な設定でも加えてしまったのかと確認してみたが問題はなかった。Google 検索結果のソースは激しく見にくい（トラフィックを減らすため、スペースや改行を極限まで排している）ので後回しにしていたのだが、 a:link,.w,#prs a:visited,#prs a:active,.q:active,.q:visited{color:#0029aa}
で変更されているようだ。
ただ、そうすると Firefox で変更されていない事に疑問が生じる。Firefox が a:link という指定に対応していないなんてバカな話はないのだが、念のためサンプルデータを作って試してみると、やはり問題なく Safari 同様の色で表示された。
「Firefox は表示ガンマが微妙に違ってたりするのかなぁ」などと思いつつ、見た目だけでなく数値でしっかり確認しようと、Safari / Firefox の Google 検索結果スクリーンショットを Photoshop のスポイトツールで検証すると、Safari は指定通りの #0029aa だったが、Firefox はやはり微妙に鮮やかな #0022bb になっていた。
疑問符が消えないまま Firefox 側でソースを検証しようと「0029aa」で検索すると「見つかりませんでした。」とつれない台詞。コピー＆ペーストしているので入力ミスじゃないよなぁ、とさらに疑問符が増えたところで、もしやと「0022bb」で検索してみると...........あれ？やっぱり「見つかりませんでした。」
これだと思ったんだけどなぁ、と仕方なくソースを目で追って行くと {color:#02b} の指定が。（注：HTML / CSS おいて #02b と #0022bb は同じ数値）
Safari で暗くくすんで、Firefox で明るく見えるのは、指定自体が別々になっているからのようだ。
これにて検証終了かと思ったのだが少し甘かった。単純に、ユーザエージェントもしくはブラウザの Google 検索窓使用時に付加される「client=safari&rls=ja-jp」「&rls=org.mozilla:ja-JP-mac:official&client=firefox-a」といった情報で振り分けられているのかと思ったのだが、なにやらそれらを組み合わせたよくわからない分岐が行われているらしい。
一例として、Firefox の Google 検索窓による検索結果 URL を Safari に入力すると、Firefox と同じ色で表示されるのだが、逆のパターンを試しても Firefox の表示色は Safari 同様にはならない。
また、Google のトップページから検索すると URL にクライアント情報は付加されないのだが、その場合でも Safari と Firefox では表示色が違う。それじゃあと、Safari のユーザエージェントを Firefox と同じ「Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; ja-JP-mac; rv:1.9.0.6) Gecko/2009011912 Firefox/3.0.6」に変えても Firefox と同じ色にはならなかった。
現状に不満がある訳でも何か不具合がある訳でもないので、とりあえずここまでで分かった事だけで満足だが、詳しい理屈（または今回の検証が間違っているなど）を知っている人がいたら教えて欲しい。
2009年3月2日
あれ？ Google のテキストリンク色変わった？
これまではブラウザデフォルトの青に近かった（もしくはそのままだった？）けど、少し彩度が落ちてくすんだ感じに。
この記事に続きはありません
コメント (0) |
トラックバック (0) |
このページの先頭へ △
幅可変画像ブロック : 機能縮小版
キャプション
キャプション
テキストが回り込まない「画像：文章」パーツって、テーブルタグ使わないといろいろ面倒だよなー.....という事で、Takazudo さんの「幅可変な画像ブロックをtable無しで作る」の機能縮小版。
機能的にはどんな内容にでも対応可能な Takazudo さん制作のパーツが一番なので、これは IE 独自の CSS expression 使用による不具合を避けたい人や、CSS が valid でないとなんか気持ち悪いという人向け。
長文キャプションへの対応をばっさり切って単純化したものを基本として、ある程度の制限つきながら長文キャプションを使うパターンへの切り替えも可能。
特殊なデザインのボックス
WEB > HTML > flexible box
2009年2月18日 19:22
特殊なデザインのボックス
flexible box は基本的に Photoshop などで好きなデザインの枠を作成し「中央のリピート部分・蓋・底」の3つの画像を切り出せばサイズ可変の背景を作成する事ができる。
一般的なデザインであれば画像さえ作成すれば枠を表示させる事ができるが、以下の3つのパターンでは画像作成に加え CSS を修正する必要がある。
- 背景の右側に 80px 以上のイラストやグラデーションを使いたい
- 110px 以下のごく小さなサイズのボックスを作りたい
- 周辺に 20px 以上の透過部分を作りたい
これは、標準状態の CSS で確保された、透過枠表示用の 20px・右側表示用の 80px のスペースによる制限で、目的に応じてこの値を増減させる。
ボックスの基本
WEB > HTML > flexible box
2009年2月16日 23:31
ボックスの基本：全体の余白
flexible box の各種制御は <div class="box-frame boxname"> のように、box-frame と同じ場所に指定した ボックス名で行う。ボックス内部の余白は「.boxname .box-body」の padding によって指定可能で、内容物が収納される <div class="box-body"> は背景の外周とぴったり同じサイズになるため、余白ゼロから任意のサイズまで自由に設定する事ができる。
ただし、別項で解説予定だが .box-body の padding-top を 0 にした場合、CSS の仕様上、ボックス内の最初の要素の margin-top の分だけ、親要素が下がってきてしまう。（厳密には少し違うのだが、外見上はそう見える）
最初の要素の matgin-top を 0 にしておけば問題無いのだが、そういった事はたいてい最も忙しい時に忘れて「なんで崩れてんの？」となりがちなので、「.boxname .box-body」の padding-top は最低 1px 確保しておく事を勧める。
flexible box
WEB > HTML > flexible box
2009年2月16日 22:26
一般的な blog の記事表示のように、ヘッダ・本文・フッタといった定型フォーマットがある場合、それぞれのパーツに背景を割り当てれば、不要な div などを付加する事無く角丸などのデザイン枠は実現可能だ。
ただしその場合、表示する内容にあわせて調整を要する事が多く、さらにデザインの自由度も限られてくる。（蓋や底のデザインを表示内容の高さに合わせる必要があったり、逆にデザインの高さを確保するために不自然なスペースが生じたりする）
という事で、万能は言い過ぎだが結構応用の効くボックスパーツ、名付けて flexible box（いま命名）。このサイトのカテゴリーアーカイブや、サイドメニューなどで使用している。
- 上端・中央・下端の3枚の背景画像で上下左右にサイズ可変
- CSS 側で細かいサイズ調整が可能なため、レイアウト変更・サイズ調整に強い
- % 指定や、固定 + フリー等の段組みが可能
- 入れ子が可能
- 中身をボックスの最外周まで配置できるため、デザインの自由度が高い
- 透過入りの角丸画像なども使用可能
- 蓋や底にあたる要素が不要
- IE 5.5 / 6 / 7・Firefox 2 / 3・Opera 9・Safari での表示が可能（Mac IE 5.2.3 でも一応表示可能だが、追加設定や段組みを行ったボックスは崩れる可能性あり）
- HTML / CSS とも Valid で空 div なし......ただまあ、笑っちゃうソース