iPhone用壁紙を配布しているサイトが多数紹介されたエントリーです。
かなりの量のサイトがまとめられているので、気に入った壁紙が見つかるのではないでしょうか。
Archive
Archive for 10月, 2009写真加工に便利なPhotoShopのアクションファイルをまとめた記事です。
比較的最近のものが集められているようです。
via. http://designm.ag/images/0909/12.jpg
via. http://designm.ag/images/0909/27.jpg
Bittboxのフリーテクスチャ、今回は古いフィルムを撮影したテクスチャです。
グランジ系デザインに使えるのでは。
via. http://www.bittbox.com/~caleb/free_high_res_texture_219.jpg
via. http://www.bittbox.com/~caleb/free_high_res_texture_220.jpg
最近紹介ばかりな感じがしますが・・。
ちょっとテクニックの発想に感動したので、解説も踏まえて紹介したいと思います。
ちなみにこのテクニックの元になったのはこちらの CSS Play で紹介されているものです。
まず最初に、概念図を見せます。（クリックで拡大）
クリーン HTML のプルダウンメニュー デモ
サンプルダウンロード
ネガティブマージンとパディングで余白を相殺
概念図を見てもらうと分かりますが、通常のメニューに対して margin-top にネガティブマージンを、 IE6 で対応している数値いっぱいに設定し、かつ同様の値を padding-top にも設定します。
“モダンブラウザの場合はこれはなくても大丈夫なのですが、IE6 の場合、隠れているプルダウンメニュー部分が隣の要素と重なる、という不具合があるのでこれで解消しています。”
メニューに固定幅と overflow: hidden を設定
そしてリスト要素に対して表示させたい固定幅を指定しつつ、overflow: hiddenではみ出した部分を非表示にします。ここがまずポイント 1 です。
メニューとプルダウンメニューを float で配置
続いて、リスト内の a 要素を左に float させ、プルダウンでマウスオーバー時に表示させたい要素も左に float させます。
これで、なにもしていなければ、単純に最初の a 要素とリスト要素が横に並ぶ状態になります。
ここでポイント 1 が生きてきます。固定幅と overflow: hidden によって、float で並んだ要素のうち、a 要素のみが表示されます。2 カラムのサイトで、右カラムだけ overflow: hiddne で隠れているのを想像すると分かりやすいと思います。（イメージはこんな感じ↓）
:hover でボックスのサイズを変更
ここがポイント 2 です。そして秀逸。
:hover 擬似クラスは IE6 の場合、a 要素以外には対応していません。
無理やり対応させる方法がなくはありませんが、その場合は HTML 的に invalid になってしまいます。
しかし、今回はタイトルの通りクリーンな HTML 実装されているため、しっかりと a 要素に :hover 擬似クラスを使います。
では使われているポイントを見てみましょう。
しっかりと a 要素に :hover 擬似クラスが使われています。
ここで指定されているmargin-right: 1pxは、プルダウンメニューの親（マウスオーバーしたらメニューが表示される部分）の右マージンを拡大する、という処理です。
ではなぜ、こんな処理をしているのでしょうか。
答えは、これを追加することによって、上で書いた overflow: hidden で隠れているリスト要素を “カラム落ちさせる” ことです。
ぴったりと計算したカラムの場合、1px でも width なり margin なりが違うとカラム落ちしてしまいますよね。
これを “あえて” 実行しているわけです。
さて、カラム落ちしたリストはどうなるでしょうか。
overflow: hidden で隠れるのは、幅の部分のみなので当然、カラム落ちしたリスト要素は、マウスオーバーした a 要素の下に来ます（カラム落ち）。
まさにプルダウンメニューが表示されたように見えますね。
しかし、これだけではリスト部分にマウスを移動した瞬間、a 要素のmargin-right: 1pxがなくなってしまうため、また元の位置に戻ってしまいます。
ここが秀逸な部分です。
リスト部分にマウスを持っていくと、当然その先もリンクになっています。
リンクということは a 要素ですよね。
そして、この a 要素にも同じようにボックスのサイズが変わる処理をしておきます。
こんな感じです↓
すると、親に当たる a 要素からマウスが離れても、今度は子要素に当たる a 要素の幅が変わるため、結果的にプルダウンで表示された部分にマウスを移動してもプルダウンしたままになる、というわけです。
さらに秀逸な点
さて、これでテクニックの肝は説明しましたが、このサンプルにはさらに秀逸な点があります。
それは “クリックしてプルダウンを固定することができる” ということです。
上の CSS を見て気づいている人もいるかもしれませんが、ul.sub a:focusやul.sub a:activeにもmargin-right: 1pxが設定されているため、クリックした際にも margin-right: 1px が反映されます。
そのため、クリックするとプルダウン状態が維持される、というわけです。
これを応用すると、クリックで表示させるメニューも簡単に作れそうですね。
注意点
このテクニックの注意点というか、対応できない点として、リストの幅が固定でないといけないため、2 階層以上あるようなプルダウンメニューは作成できません。そのため、ちょっとしたプルダウンなどに使うことが望ましいです。
合わせて読むと役に立つかもなエントリー
iPhone のステータスバーをタップするとページ上部に移動するのは元々用意されているのですが、最下部へ行く方法がありません。（もしなにかやる方法があったら教えてください(;´д｀)）
なので、ちょっとめんどくさいですが自作のブックマークレットを活用しています。
twitter でそんなことが投稿されていたので、もしかしたら誰かの役に立つかなーと思ったので記事にしてみました。
ずばり、以下のスクリプトをブックマークして、それを最下部に移動したいページでブックマークから実行すると、ページの最下部に移動します。
iPhone からのブックマーク登録用リンク
上記のリンクを、iPhone でブックマークして使ってください。