intel Mac なあなたにお勧めのブラウザありました。

昨日、杉山さんに教えてもらった。ちょっと感動したので書き込み。
Caminoというブラウザが存在する事は知ってたけど、Geckoエンジンなので、Firefoxとさほど違わないんじゃない?
とか思ってました。しかも教えてもらったのは、Camino 1.1 Betaでもなく、nightlyビルドでもない。
Camino : Private Build – Optimized for i686プライベートビルドなのだ。
i686に最適化っつーことは、intel Mac な人には最高じゃないですか。
ありがたく使わせてもらいます。
しかし、どこでこういうの見つけて来るんだろうねー。
使ってみた第一印象で、サクサク動いて気持ちいい。
拡張機能を入れまくったFirefoxは、もっさりしていて、とてもブラウジング向きではなくなってた。
開発には使うけどね。safariよりも見れないページは少ないと思われ。Googleの一部のサービスとかね。
これならメインブラウザに十分。
早速、Caminicious入れて、LaunchBarからブックマーク呼び出せるようにしたり、bookmarklet入れたりして使い勝手も向上。
あとは、Rosettaで動いてるAdobe製品だな。日本語版はいつかなー。

id、classの最近の自分の傾向

id名、class名の最近の自分の傾向|CSS Happy LifeClass名とID名の命名規則(2) | Blog hamashun.comを真似て自分のためにも書いてみよう。

idとclassの使い分け

idを使うところ

  • ワイヤーフレームでパーツが決まってる部分(インターフェイス名とかコンテナ名とか)
  • HTMLファイル対CSSファイルが1対1の関係でない場合に、ページを判別させる場合

上記以外ではclassを使う。
サイトの規模が大きければ大きい程、class名がかぶったりする可能性が高くなると思うんだけど、class名を考える時間ももったいない訳で。
class名がかぶっても良いように、css側のセレクタは、パーツのidから記載するようにしているな。
あんまり子孫セレクタ長過ぎるのもどうかと思いますから、先にインターフェイス名とかコンテナ名を決める事が重要ですよね。

命名規則
最近の案件だと、@importとか使って、古いブラウザには、css読み込ませない。という手法が主流だと勝手に思ってますが、その場合だと、大文字小文字、アンダースコア、ハイフンも使える訳でして。そうなると選択肢も多いですよね。選択肢が多いということは、プログラム側とhtml側で使い分けすることも可能ですよね。
例えば、プログラム側はラクダ型でhtml側はハイフン型使うとか。

何にも制約がなければ、個人的には、ラクダ型が一番好きかも。
理由は、htmlファイルをガーッと見た場合に、クラス名とか見つけやすいような気がするんですよね。
ファイル名には、アンダースコア使 ってるでしょ?他のタグや属性も小文字でしょ?そんだけなんですけどね。
あと、id、class名に見た目の意味より役割の意味を付けた方がいいというのも、よくわかりますが、やはり誰が管理/更新するのかが重要で、その人がわかりにくかったらダメだと考えてます。

Photoshop使用時の効率的なスライス #2

前のエントリーの続き。
K氏と話していて、「ナッジして『イメージ』-『切り抜き』で良くないですか?」とのこと。
なるほど。切り抜きツールも範囲選択するのがメンドクサイのでこれはいい。
ということで、これにショートカットを割り当てたいが、Photshopだとできないから、アクションを作って、ファンクションキーを割り当ててみる。
うーんナイス。K氏天才w
範囲選択までの流れ
vで移動ツールに持ち替え
コマンド+クリックでレイヤーを選択
そのレイヤーをコマンド+クリックで範囲選択
ここからアクションを作る
新規アクションを作成
自分の好きなファンクションキーを割り当てる
『イメージ』-『切り抜き』
コマンド+Dで範囲選択を解除
アクションの記録を中止
実際の使い方
vで移動ツールに持ち替え
コマンド+クリックでレイヤーを選択
そのレイヤーをコマンド+クリックで範囲選択
上で割り当てたファンクションキーを押す
コマンド+Alt+Shift+SでWeb用に保存
コマンド+Alt+Zを数回押して基に戻る
Windows使いの方は、コマンド→Controlに読み替えてください。
Photoshopがちょっと好きになった。ImageReadyいらね。

情報のアウトプットってやっぱ大事だなー

今日、杉山さんと音声チャットしてるときに、福岡の人材の話になって、「自分がRSS購読してる人に福岡の人がいて、その人と一緒に仕事できたら楽しそう。」とURLを送ってみると、
なんと、知っている会社の社員の方のblogだった。
たまたま杉山さんが知ってたのだが。
ちゃんとblogとか書いてたり、情報発信してると、見てる人は見てたりするんだよなー。と実感。
今、ちょっとアレなのであんまり書けないけど、できるだけ書くようにしようっと。

Photoshop使用時の効率的なスライス

HTMLコーディングにおけるスライスの効率は、PhotoshopよりFireworskの方が断然上だと思ってます。
オブジェクトを複数選択して、ショートカットで一気にそのオブジェクトのサイズにスライスできますし。
しかし、画像を書き出す時のレンダリング能力という点では、やっぱりPhotoshopに軍配があがると思います。
微妙なグラデーション部分を両方のアプリケーションで書き出し比べたらわかりやすいかもですね。
Photoshopで新規ページをスライスする場合は、普通にスライスツールでやるのが効率いいと思いますが、
このパーツだけ書き出したいという時や、そのパーツに修正が入って書き出し直しが必要なときとかは、
スライスの代わりに切り抜きツールでトリミングして、別名保存して、Web用に書き出しした方がが効率いい気がしてます。
うまいことバッチ作ったら更に効率的かも。

リストタグの中に画像入れたけど下に隙間ができちゃったときの対処(IE6)

リストタグに画像を入れてナビゲーションバーにすることもあると思います。
※Daniel Nolan氏のImage Rollover Codeなどを利用する場合。
しかし、IE6では、画像の下に隙間が出来ちゃいます。
これは、確か画像がインライン要素で、行間をもってるからだったような・・・。
そんなときは、隙間ができちゃう画像にdisplay: block;するといいみたいです。
簡単な例は、下記の通りです。

■HTML

■CSS

NetScape7.1でbackground-position :0 bottom;に配置した背景が出ない

忘れがちなのでメモ
背景をボックスの下部に配置しようとして、下記のようなCSS書くこともあると思うんだけど、
なんでかNetscape7.1でbackground-position: 0 bottom;がダメみたい。
対応策は、0をなくして記述。忘れるなよオレ。

■Netscape7.1でうまくレンダリングしてくれない例

■対応策

SEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」

これまでは、RankQuest SEO Toolbarというアドオンをインストールしてました。
けど、高機能すぎて?よく使い方わかんないし、ツールバーの面積は取るしで、あんまし使ってなかったんです。
SEO専門の方には、いいのかも知れませんが。
SEO for Firefoxをk氏に教えてもらいました。
これは、切り替えもウインドウの右下のロゴで切り替えもできるし、いいっ!
GIGAZINEの記事よりSEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」

Vim7のOmni補完の候補の選択

今まで、Omni補完の候補を選択するとき、矢印キーとか使ってたんだけど、EmacsとかCocoaアプリみたいな、キーバインドが効くんだ。orz
↓:C-n
↑:C-p

HTML.vimでVimでのHTML編集が楽になる

最近、Vimが良いとの事で、使い始めたが、正直なにがいいのか?今ひとつピンと来てなかった。
前のエントリーでclosetag.vimについて書いたが、基本的な使い方がわかってなかったorz
Vim使いの人は、HTMLの編集には、HTML.vimとか使ってるんだな。
オレのVim環境は、杉山さんに作ってもらった環境なんで、HTML.vimはインストールしてあったけど、Last modified: Jan 03, 2007 ってなってたので、最新のファイルをダウンロードした。
ダウンロードしたファイルを開いて、サイトに書いてある通り、『:source %』って入力したら、自動でインストールできた。スゲ。

これで、filetypeがこのプラグインが動く状態になっていれば、HTMLの編集は、かなり楽になるはず。
ちなみに、オレの環境はfiletypeはhtmlでもxhtmlでもプラグインは機能してるみたい。
あとは、HTML.vimのヘルプテキスト見ながら、;○○っていうのを打ち込めば、タグが勝手に出て来て、その時のカーソルの位置もいい感じ。
例えば、;af って打てば、↓ここまで出て来て、カーソルは””の中間に来てる。
しかも、ショートカットの設定というか、キーのマッピングが直感的にわかりやすい。
知らなくても、これかな?って打ったら出てくるじゃん。
こりゃちょっと慣れたら、Dreamweaverより早いな。
次はCSSファイルだな。