新米ノマドの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に保存しなくても良くなって、
どこからでも集めた画像を参照できるようになった昨今、
集めラーにとってはまさに歯止めがかからない収集天国といった風情。

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

さて、本日は
今、仕事で急遽必要になったものに関連して「携帯サイト構築」についてのTipsを載せているサイトをご紹介。

実に微に入り細に入り、PCサイトしか構築経験のない人が
携帯サイトを作ろうとした時ハマってしまいがちな多くの部分を解説してくれています。

◆◆携帯サイトを作ろう！　-ちょっと詳しいモバイルサイトの作り方-◆◆
http://dspt.blog59.fc2.com/

いや～。たかがモバイルサイトでしょ？？
などと舐めてかかっていると、大変なことになりそうですよコレは。。

案の定、auで支障なく見られるのにdocomoでハマったりだとか、色々と苦戦してます。

PCサイトに例えてみると、IE6みたいな『苛々させられる』ブラウザが星の数ほどあるような感じ。

あわわわ

こりゃ、明日からはしばらく、
ガッツリ上記のサイトさんと睨めっこしながら携帯サイトの構築にかかりっきりになりそうです。

いやー、勉強すべきことは沢山あれど、
一方で街は何時の間にやらすっかりクリスマスムードというやつで。

少年老い易く学成り難し、とはうまく言ったものですねえ。。

Webサイトのアクセントとして使用できそうな様々な画像素材を作るためのチュートリアルを掲載しているサイトを知りましたので、ご紹介。

・tutorial9
http://www.tutorial9.net/category/photoshop/



こんな木箱や、リアルすぎる帽子やラジオなど、Webサイトのアクセントとしても、メインビジュアルとしても活躍してくれそうな素材を作る技術を色々と掲載してくれています。

英文ですが、スクリーンショットをふんだんに交えながら紹介している為、
英語が分からなくても問題なさそう。

その他にも、ブログやWebサイト構築について、写真についてなど、興味のそそられる様々なカテゴリに渡るチュートリアルが掲載されています。

毎日ひとつずつやったとしても、かなり実力がつきそうです。

ううう、こういうの目にするたびに 悔しくて利き腕をへし折ってやりたくなりますね。 チックショー！