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

CSSのクラス名、ID名について

作業中に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

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

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

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

CSS：display:inline-block プロパティ

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;を指定することで解決するらしいのですが、
手元で動作確認ができない為にイマイチ出来ているのかどうか…。

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

Webサイトの配色決定に便利なカラーピッカー

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

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

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

・What ItsColor
http://whatsitscolor.com/

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

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

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

↓　今、こんな感じ。

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

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

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

使いやすいtoDoリストツールを探索中

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

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

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

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

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

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

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

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

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

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

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

BGMに迷うあなたにピッタリ -winamp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

携帯サイト構築Tips

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

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

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

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

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

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

あわわわ

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

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

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

クールすぎるPhotoshopチュートリアル

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

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

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

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

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

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

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

映画字幕風フリーフォントご紹介

「パソコンがクラッシュしたときリスト」第2弾。

メール連絡で商用もOKの味のある映画字幕風フォント「しねきゃぷしょん」です。

・しねきゃぷしょん
http://chiphead.jp/

ええのー。かっこええのー。

短めに「コーヒーを？」なんて、意味もなく字幕風の問いかけをしてみたくなってしまうー。

個人的な話ですが、
もともと以前、仕事で映画紹介をしてた事があるのもあって
今でも映画が好きでたまらない人種なのです。

なので、こういう雰囲気のあるフォントを無料で配布して頂けるのは非常に助かります。

実際に国内公開される映画のチラシなんかでもぼちぼち見かけた事のあるフォントですね。

商用フリーなシルエット素材配布サイト

個人用・商用ともにフリーで利用できる様々なシルエット素材を配布しているWebサイトを見つけましたのでご紹介。

・シルエットデザイン
http://kage-design.com/wp/

季節柄使い勝手の良いクリスマス用の素材など、なにか一つアクセントが欲しい時にとても重宝する素材を
全部商用フリーのaiファイルで配布してくれています。

あなたが神か！ありがたやー！

…というわけで、個人的に「パソコンがクラッシュしたとき用リスト」に加えました。
サイト自体のデザインも好きです。

XAMPP導入成功こんにちは、世界！

昨日深夜1時頃、喜び勇んでブログを更新しようとしたら
ちょうど10分前にメンテナンスが始まってしまって投稿はねられた不運な奴です。こんにちは。

昨日、悪戦苦闘の末、無事XAMPP導入とPHPのローカルでの動作確認ができる環境を作ることができました。
最初はどうもインストールがうまくいかなかったりしたのですが、
色々と検索していたところ、どうもVistaに標準で搭載されているユーザーアカウント制御機能が邪魔をしているということが判明。
機能をオフにしたところ、すんなりと入りました。

なお、XAMPPの存在を知ったきっかけと、導入の手順の参考にしたページはこちら

PHPSpot
http://phpspot.net/php/

これからもお世話になると思います。ありがたや、ありがたや。

さて

昨日は phpinfo()だとかecho ('Hello world!')だとか表示させて満足してしまった感じですが、
これから徐々に勉強を進めていって、色々と覚えてWebデザインに活かしていきたいと思っています。

最初はアクセスカウンターを作成するぐらいのところから覚えた方が良い！
なんて言葉を耳にしたのですが、やっぱりサイト構築用に使うとなると、
いきなりお問い合わせフォーム作りぐらいから始めてしまいたい…。

ただ、僕は小さい頃からそうなんですが、こらえ性がないというか、後先考えないというか。

例えば、両親に初めて雪山にスキーに連れて行ってもらった時も
スキー靴を履いて白くキラキラ輝くゲレンデに出るなり
滑り方の説明も全く聞かず、経験もないまま、ただ初めて見るゲレンデの楽しそうな雰囲気に
我慢できずに飛び出していって

転倒→捻挫→初スキー終了

…となるような子だったので、
自分なりに少しは慎重にいきたいと思ったりもしてます。