WEB制作.Hack

最近では 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 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。

元の記事はこちら

いよいよ Firefox3.5 がリリースされましたね。

このバージョンアップにより、かなりの CSS3 セレクタに対応しました。
これで、Firefox, Safari, Google Chrome, Opera でほとんどの CSS セレクタに対応したことになります。（IE は相変わらず・・）

取り立てて大幅にレイアウトが崩れる、という状況でなければ、積極的に使っていっていいのではないでしょうか。

今回、Firefox3.5 が新しく対応した CSS3 セレクタを紹介します。（ちなみに、CSS3.info というサイトのチェックを参考にしました）
詳しい CSS セレクタの説明は CSSセレクタまとめ1、CSSセレクタまとめ2、CSSセレクタまとめ3 を参照ください。

新しく対応した CSS3 セレクタ

余談

タイトルバーのところのアイコンも変わったみたいですが、なんか以前のより安っぽくなったような気がするのは自分の気のせいでしょうか・・ｗ

Firefox の過去バージョン

ちなみに、過去のバージョンと共存させたい、なんていう方は、過去のバージョン置き場 からインストールしたいバージョンのセットアップファイルをダウンロードしてください。

元の記事はこちら

Safari や Google Chrome などの、webkit 系ブラウザに搭載されているwebインスペクタ。
Firefox のエクステンションである Firebug に比べると、やや使いづらいイメージがあります。（なんというか、直感的に使えない感じで。慣れの問題だとは思いますが）

さてこの webインスペクタ、Firebug みたいに閲覧中の CSS が追加できなくて不便だなーと思っていたんですが、どうやら CSS を追加することはできるようです。

まずは新規スタイルを適用したい要素をピックアップ

やり方は、ちょっと分かりづらいんですが、まずはinspect（）ボタンで CSS を変更したい要素を選択します。（このボタンが搭載されているのは Safari4, Google Chrome2 以上のようです。それ以外の ver では、調べたい要素上で右クリックして出てくるメニューの “要素の検証” を選ぶことですぐに調べたい要素がクローズアップされるようです）

適用されているスタイルを確認する

選択すると右側に適用されているスタイルの一覧が表示されます。スタイル一覧の中で、class セレクタや ID セレクタで指定されているスタイルのオン・オフができます。

スタイルを修正する

このプロパティの部分をダブルクリックすると編集状態になります。ここで値を変更すると内容が書き変わるわけですね。ただ、これではすでに指定されているものを変更するだけにしかなりません。

ここが肝心、新規スタイルを追加する

しかし、そこは “1 行の CSS エディタだ“、と思って見ると分かりますが、セミコロン;の後に続けて他のプロパティを指定し、Enter キーを押すと、そこで記述した内容が追加されるのです。

色々調べても、新規で追加する方法が見つからなくて諦めていたのですが、これでずいぶんと Safari などでのチェックが楽になりました。

Firebug のように、完全に新規で追加できるわけではないものの、大体の場合において class セレクタか ID セレクタから継承を受けているので指定に困ることは少ないと思います。

元の記事はこちら

今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」

このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。

指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。

導入の仕方

導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。

<br /> addEvent( window, ‘load’, initCorners );</p> <p>function initCorners() {<br /> var settings = {<br /> tl: { radius: 10 },<br /> tr: { radius: 10 },<br /> bl: { radius: 10 },<br /> br: { radius: 10 },<br /> antiAlias: true<br /> }</p> <p> curvyCorners( settings, “#test” );<br /> }<br />

イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。

また、指定する要素には CSS セレクタのように指定します。（ただし、+ や ~ などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。

複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）

元の記事はこちら