WEB制作.Hack

最近紹介ばかりな感じがしますが・・。
ちょっとテクニックの発想に感動したので、解説も踏まえて紹介したいと思います。
ちなみにこのテクニックの元になったのはこちらの 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 擬似クラスを使います。

では使われているポイントを見てみましょう。

<br /> ul.ulTop li.liTop a.aTop:hover ,<br /> ul.ulTop li.liTop a.aTop:focus ,<br /> ul.ulTop li.liTop a.aTop:active {<br /> margin-right:1px;<br /> }<br />

しっかりと a 要素に :hover 擬似クラスが使われています。
ここで指定されているmargin-right: 1pxは、プルダウンメニューの親（マウスオーバーしたらメニューが表示される部分）の右マージンを拡大する、という処理です。

ではなぜ、こんな処理をしているのでしょうか。
答えは、これを追加することによって、上で書いた overflow: hidden で隠れているリスト要素を “カラム落ちさせる” ことです。
ぴったりと計算したカラムの場合、1px でも width なり margin なりが違うとカラム落ちしてしまいますよね。
これを “あえて” 実行しているわけです。

さて、カラム落ちしたリストはどうなるでしょうか。
overflow: hidden で隠れるのは、幅の部分のみなので当然、カラム落ちしたリスト要素は、マウスオーバーした a 要素の下に来ます（カラム落ち）。

まさにプルダウンメニューが表示されたように見えますね。
しかし、これだけではリスト部分にマウスを移動した瞬間、a 要素のmargin-right: 1pxがなくなってしまうため、また元の位置に戻ってしまいます。

ここが秀逸な部分です。
リスト部分にマウスを持っていくと、当然その先もリンクになっています。
リンクということは a 要素ですよね。
そして、この a 要素にも同じようにボックスのサイズが変わる処理をしておきます。
こんな感じです↓

<br /> ul.sub a:hover ,<br /> ul.sub a:focus ,<br /> ul.sub a:active {<br /> margin-right: 1px;<br /> }<br />

すると、親に当たる a 要素からマウスが離れても、今度は子要素に当たる a 要素の幅が変わるため、結果的にプルダウンで表示された部分にマウスを移動してもプルダウンしたままになる、というわけです。

さらに秀逸な点

さて、これでテクニックの肝は説明しましたが、このサンプルにはさらに秀逸な点があります。
それは “クリックしてプルダウンを固定することができる” ということです。

上の CSS を見て気づいている人もいるかもしれませんが、ul.sub a:focusやul.sub a:activeにもmargin-right: 1pxが設定されているため、クリックした際にも margin-right: 1px が反映されます。

そのため、クリックするとプルダウン状態が維持される、というわけです。
これを応用すると、クリックで表示させるメニューも簡単に作れそうですね。

注意点

このテクニックの注意点というか、対応できない点として、リストの幅が固定でないといけないため、2 階層以上あるようなプルダウンメニューは作成できません。そのため、ちょっとしたプルダウンなどに使うことが望ましいです。

元の記事はこちら

iPhone のステータスバーをタップするとページ上部に移動するのは元々用意されているのですが、最下部へ行く方法がありません。（もしなにかやる方法があったら教えてください(;´д｀)）

なので、ちょっとめんどくさいですが自作のブックマークレットを活用しています。
twitter でそんなことが投稿されていたので、もしかしたら誰かの役に立つかなーと思ったので記事にしてみました。
ずばり、以下のスクリプトをブックマークして、それを最下部に移動したいページでブックマークから実行すると、ページの最下部に移動します。

<br /> javascript:window.scrollTo(0,document.documentElement.scrollHeight);<br />

iPhone からのブックマーク登録用リンク

上記のリンクを、iPhone でブックマークして使ってください。

元の記事はこちら

今回はちょっと趣旨を変更して、便利そうな Web アプリを紹介したいと思います。
その名も、”NAVERフォトエディター“。

実際に使ってみた感想は、「かなり使いやすい」でした。
レイヤー数に制限はあるものの、写真を編集する、という目的では十分だと思いす。
ちなみに “無料、登録なしで使える” のでとりあえずやってみることができるのでオススメです。

オンラインツールであるため、ブラウザさえあれば写真の編集ができるというのも強みかと。
クライアントで更新をしていく、というような案件の場合で、Photoshop などのツールはないよ、っていう場合なんかに教えてあげると、写真掲載のときなど少しでも見栄えをよくした上で公開できるので重宝するのではないでしょうか。

本家 Photoshop のオンライン版 もありますが、こちらはどちらかというと自動補正ツール、というイメージが強いですね。あまり自分で細かくいじれない感じ。

直感的には、NAVER フォトエディターのほうが使いやすいと感じました。

元の記事はこちら

最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。

これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。

そこで、この “キャンセルだけ” を行うスクリプトを作ってみました。
動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。

下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。

ポップアップさせたレイヤーをキャンセルするスクリプトデモ

JavaScript ファイルダウンロード

キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。

キャンセル用レイヤーの呼び出し

<br /> coveObject( function );<br />

ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。

またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。

キャンセル用レイヤーの消去

<br /> removeCover();<br />

上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。

元の記事はこちら

ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。

しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。

↓こんな感じでずれが生じてしまいます。

今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトする デモ

サンプルダウンロード

テクニック詳細

<br /> #mainWrap {<br /> padding: 7px 8px 0;<br /> margin: 0 -8px;<br /> width: 470px;<br /> }<br />

ネガティブマージンを使う

このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。

この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、（感覚的に）影の幅の分だけコンテンツ領域が縮小したことになります。

これにもともと想定していた（影の部分を加算しない）幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。

最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。

このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。

IE 対策

IE の場合、ネガティブマージンを指定すると思ったような表示がされない場合があります。
その場合は “IE6で背景が表示されない際にチェックすること” で紹介している「背景が表示されない要素に「position: relative;」を指定」を利用します。

これで IE 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。

元の記事はこちら