新米ノマドのWebデザイン便利帳

作業中にClass名やid名に迷ってしまい、
うーん何か良いアイディアがないものかどうか…と探していたところ、
面白いブログを見つけましたので、備忘録を兼ねたご紹介。

・CSS Happy life
「もう、class名やid名で悩まないんだからっ！！」
http://css-happylife.com/log/memo/000100.shtml

・常識と言う迷信
「一般的なID/クラス名の例のまとめ」
http://d.hatena.ne.jp/kattton/20090512/1242111605

・TAG index
http://www.tagindex.com/stylesheet/basic/naming.html


後で時間ができたら自分なりのまとめ表を作って辞書登録をしよう。そうしよう。

ともあれ、複数人で作成作業を行う場合や、後に作業が別の人の手に渡る事も考えて
分かりやすく見やすいソースを作れるよう心がけたいものです。

いや～しかし、寒いですね最近は。。。

Biffy Clyro を聴きながらこんばんは。

今までグローバルメニューを作るときは大抵
<ul>タグを使ってfloat：leftかdisplay:inlineで横並びにしたリスト要素としてマークアップすることが多かったのですが、
本日、その他に横並びのメニューを作るのにとても便利な方法があることに気がつきましたので
メモがてらにアップ。

今まで恥ずかしながら知らなかったのですが、
ｕｌ要素に対して、displayプロパティでinline-blockを指定してあげると
中に入る文字数に応じて一つ一つのボタンの横幅が自動で最適化されるブロック要素のメニューを簡単に作ることができるようです。

元々、display:inline-blockはインライン要素のものに幅や高さを指定したり、背景画像を指定したりと
タグの外側にはインライン要素の特性を保ったまま、要素の内側のみブロック要素のような振る舞いをしてくれるようになる便利なプロパティなのですが、

IE５、６、７の場合、元々インライン要素のものに指定する場合のみしか対応していないようですので、
これらのブラウザに対しては限定的に
/display:inline;
/zoom:1;
を指定してあげると同じような振る舞いをするとのこと。
（頭の「/」はIE5,6,7用ハック）

よくまとまっているページを見つけましたので、
リンクを貼っておきます。

・ヨモツネット
http://www.yomotsu.net/wp/?p=390


これでIE8、opera、google Chrome、Firefox3に加え、一部しぶとく生き残っているIE6,7勢にも対応してくれるようなのですが、
（一部とは思いますが）firefox1とか2を使っている人向けの対応方法がまだ不透明な感じです。
display：inline-blockの指定の前に、独自プロパティの
display: -moz-inline-box;を指定することで解決するらしいのですが、
手元で動作確認ができない為にイマイチ出来ているのかどうか…。

ともあれ、これでボタンの内容量に応じて自動で幅を可変してくれるグローバルが作りたい放題の予感！

Breaking Benjaminを聴きながらこんにちは。

現在、仕事が詰まってきていてひたすらコーディングコーディングコーディング…な状態です。

本日はこちらを紹介。
僕の場合、webサイトを作る際に、
発想の元として以前から撮りためている街中の「いいな」と思ったものの写メールだとか
中学生の頃から集めていて、そろそろ置き場所に困ってきている映画のチラシだとかを参考にすることも多いのですが、
そういう画像をアップロードすると、その画像に使われている主要な色を教えてくれる便利なWebサービスです。

・What ItsColor
http://whatsitscolor.com/


ローカルに保存してある画像は「参照」ボタンを押すことにより、
Web上の画像はフォームに画像のURLを入れることにより、
それぞれ主要な10色を抜き出して見ることができます。

一枚の画像として色がまとまっているなあ、と感じるものは、
元々使われている色自体にもそれなりに「まとまって見えるだけの理由」が潜んでいる事が多い
（だろうと勝手に思いこんでいる）というのと、
配色の本を読んでドミナント・カラーだのドミナント・トーンだのと文字を前に悩んでいても、
結局どうも「ありきたり」な配色に収まりなりがちなので、
ときには画像から思わぬ色を拾ってきてくれる場合のあるこういうツールも使ってみて
そこから派生してまたうんうんと悩むのも良いのではないかと。

ちなみに、僕はどうもカラスかなにかみたいに何でも収集するのが癖のようで、
Tumblrでも、ちょっと「きれいだなあ」と思うと、つい画像をバシバシReblogして集めてしまいます。

↓　今、こんな感じ。



ああー　やめられないとまらない、集めずにはいられない。

しかも、ローカルPCに保存しなくても良くなって、
どこからでも集めた画像を参照できるようになった昨今、
集めラーにとってはまさに歯止めがかからない収集天国といった風情。

本当に良い時代になったと思います。

最近、やるべきことが増えてきたので「ああ！忘れてた！」ということがないように
toDoリストを作って今後の予定を管理しようと考えているのですが、
いまいち使いやすそうなサービスを発見できずにいます。

普段のブラウジングにはFirefox3.5を使っているので、Firefoxのアドオンも選択肢に入っていますが
どれも旧バージョン向けか、あるいは多機能すぎる感じで使いづらい感触。

そんな中、Webサービスでひとつ見つけました。
シンプルにして必要十分なtoDoリスト管理ツールは以下。

・checkpad
http://www.checkpad.jp/


デザインがとてもシンプルな上、
やるべきことの登録、管理も簡単。
用事が終了したら横のチェックボックスをマウスでクリックすると、
文字が暗転して終了ししたものリストの側へポンポンと移動してくれます。

もう見ないのでいっそ項目ごとリストから消したいな～と思ったら、
その横の×ボタンを押すだけでパッと消えてくれるので、本当に余計なものが一切ついていないといった感じ。

とにかく動作が小気味良いので、同じようにtoDoリストを探している方は一度試してみては。

現在β版で、利用登録無料だそうです。


ただ、個人的にはPC起動した瞬間にデスクトップで確認したかったり、
最低でもブラウザを立ち上げた瞬間には間違いなく確認したかったりするので、
サイトにアクセスしてログインしなきゃならないとなると、今回の用途にはあと一歩足りない感じなのです。

サービス自体は本当に使いやすそうなのですが、残念。

デスクトップウィジェットを探してみようかな…

「あー…何か音楽でも聴きたいけど、曲探してくるのめんどくさいなあ…。」なんて時、ありますよね？

というわけで、今日はさきほどインストールして嬉しくなったソフトをひとつご紹介。

・winamp
http://www.winamp.com/


超定番ですいません。
でも、知らない方が居たら、こいつは一度試してみる価値あり。

これ、MP3、AACなんかの音声ファイルや、MPEG、AVI ファイルなどのムービーファイルが再生出来る
いわゆる多機能プレイヤーです。

僕がインターネットを始めた頃にはもう配布されていた記憶があるので、かなり老舗の部類に入る定番ソフトなんじゃないでしょうか。

windowsメディアプレイヤーなんかで再生出来るものなら、だいたいのものはこっちでもOK。
（しかも、動作が軽い！）

そして個人的に白眉なのは、この機能。



ネットラジオついちゃってます。

かなりの数のチャンネルが登録されているので、まさに聞き放題といった感覚でとても使いやすい。

立ち上げて左側のメディアライブラリの欄から、

・オンラインサービス→SHOUTcast Radio

で起動できるので、あとは上の検索窓に「Pop」とか「Rock」とか、聴きたいジャンルの言葉で検索かけるだけ。

CDや着うたに比べると音質は劣りますが、
中学生の頃FMラジオかけながら勉強してたような世代からすると、懐かしさも伴っていっそう作業にも集中できる感じです。

しかも、インストールすると、Firefoxの場合、一番上の画像のようにブラウザ上部のツールバーのところに
細く常駐してくれるので、「ちょっと気分転換に音楽」なんて用途には最適かもしれません。

skin機能で外見を色々カスタマイズ出来ることでも有名で、ちょっと検索かけるとこれまたすごい数のskinが配布されているので、見た目を自分好みに変えて楽しんでみてはいかがでしょうか。

（winamp自体にブラウザとしての機能も備わっているので、上のナビゲーションから「オプション→スキン→スキンブラウザ」でwinamp上から探すことも可能。）



↑ワンタッチでこういうはっちゃけた外見に変えることも可能。
もう音楽プレイヤーだかオブジェだか何だか判らない状態に。

最近PCを買い換えたてまだ音楽プレイヤーを入れていなかったので、
先ほど思い出したようにインストールしたんですが、いやー、改めて、このソフト非常にありがたいです。