今回はちょっと趣旨を変更して、便利そうな Web アプリを紹介したいと思います。
その名も、”NAVERフォトエディター“。
実際に使ってみた感想は、「かなり使いやすい」でした。
レイヤー数に制限はあるものの、写真を編集する、という目的では十分だと思いす。
ちなみに “無料、登録なしで使える” のでとりあえずやってみることができるのでオススメです。
オンラインツールであるため、ブラウザさえあれば写真の編集ができるというのも強みかと。
クライアントで更新をしていく、というような案件の場合で、Photoshop などのツールはないよ、っていう場合なんかに教えてあげると、写真掲載のときなど少しでも見栄えをよくした上で公開できるので重宝するのではないでしょうか。
本家 Photoshop のオンライン版 もありますが、こちらはどちらかというと自動補正ツール、というイメージが強いですね。あまり自分で細かくいじれない感じ。
直感的には、NAVER フォトエディターのほうが使いやすいと感じました。
最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。
これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。
そこで、この “キャンセルだけ” を行うスクリプトを作ってみました。
動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。
下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。
キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。
ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。
またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。
上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。
ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。
しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。
↓こんな感じでずれが生じてしまいます。
今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。
このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。
この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、（感覚的に）影の幅の分だけコンテンツ領域が縮小したことになります。
これにもともと想定していた（影の部分を加算しない）幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。
最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。
このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。
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 を参照ください。
nly-of-type
タイトルバーのところのアイコンも変わったみたいですが、なんか以前のより安っぽくなったような気がするのは自分の気のせいでしょうか・・ｗ
ちなみに、過去のバージョンと共存させたい、なんていう方は、過去のバージョン置き場 からインストールしたいバージョンのセットアップファイルをダウンロードしてください。
合わせて読むと役に立つかもなエントリー
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 セレクタから継承を受けているので指定に困ることは少ないと思います。