iPhone風のアクアアイコンを作る。

アクアアイコン、iPhone風

前回アイコンを作った訳ですが、今回、ソフトバンクからiPhoneが発売されるというニュースを聞いて、コレはぜひ、iPhone風のアイコンを考えてみなければ・・・と思って色々挑戦した、条件は相変わらずPhotoshopレイヤーを2つまで。
iPod Touchユーザの僕としては勝手に使命感にかられる。

続きを読む iPhone風のアクアアイコンを作る。

Macの「システム終了」メニュー等が2つになる、Macが英語をしゃべる

メニューがダブる

マックが急に英語をしゃべり始め、ボタンに触れたら枠線が付いて、再起動、システム終了が2つになります。

続きを読む Macの「システム終了」メニュー等が2つになる、Macが英語をしゃべる

2レイヤーで作るアクアアイコン

ピクチャ 0.png

今回はアクアアイコンに挑戦、デザイナーの皆さんがよく使うPhotoshopをわずか2レイヤーで、立体感があり、ツヤめいているような、そんなボタン、アイコンを目指します。

ポイントは「レイヤー効果」のグラデーションと光彩(内側)だと思ってます。

続きを読む 2レイヤーで作るアクアアイコン

グローバルナビゲーション、押したくなりますか?

グローバルナビゲーション、押したくなりますか?

ボタンですね、これってサイトにとってはスゴく重要な位置づけで、ボタンの存在感だけで、見てもらえるページも見てもらえなくなる可能性も否めないと思います。
ここでは、自然にクリックしたくなる、そんなボタンを作ってみたいと思います。

続きを読む グローバルナビゲーション、押したくなりますか?

clearfix、下に出る余白をfont-sizeが影響!?:Mac Safari 2

Mac Safari 2でclearfixのレンダリング結果を画像付きで検証

俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。
下図は以下のソースコードのレンダリング結果です。

続きを読む clearfix、下に出る余白をfont-sizeが影響!?:Mac Safari 2

DREAMWEAVER テンプレートのコメントタグで表示崩れ IE6

DREAMWEAVER テンプレート編集可能領域の多数使用とIE6の組み合わせ

<!-- InstanceBeginEditable name="main" -->

というコメントアウトタグを利用したDREAMWEAVERの独自機能、テンプレート。
たまに使いますし、便利な場合があります、ただしなぜか大規模案件には1度も使われる所は見た事なかったですね。
実は正当なマークアップ(validしてる)にも関わらず、IE6に限り表示崩れを起こす事がありました。

続きを読む DREAMWEAVER テンプレートのコメントタグで表示崩れ IE6