カテゴリー:webの便利なものを紹介

リスト表示へ

IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」

2009年6月26日 12:05

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

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

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

導入の仕方

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

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

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

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

画像のファイルサイズを最適化してくれるWebツール「smush.it」

2009年5月29日 10:17

サイト:smush.itのサムネイル

ずいぶん前からあるみたいですが、画像内の不要なメタデータ(制作したツール名とか、そんなのらしい)を削除して、ファイルサイズを軽量化してくれる Web ツールの紹介です。サイトの名前は「smush.it

ちょっと大きなサイトを構築しているときなどは画像ひとつひとつのファイルサイズが気になってくるのではないかと思います。
このサイトでは、画像をアップロードするか、すでにサーバにアップしてある画像の URL を指定するか、もしくはブックマークレットを使って、閲覧中のサイトの全画像ファイルを一括して軽量化してくれる、というものです。

軽量化された画像ファイルは、zip 形式に圧縮されてダウンロードが可能です。
いちおう Firefox のアドオンもあるみたいですが、使い方が違うのかブランクページが開いてちゃんと動作してくれませんでした・・(;´Д`)

バナー制作で、ファイル容量が決まっているときなどにも重宝しそうですね。

RSSより手軽な情報収集ツール - Googleアラート

2008年7月 4日 09:31

最近知った「Googleアラート」。
自分の興味のあるキーワードを設定しておくだけで、それに関連する記事をピックアップしてメールに届けてくれる機能です。

キーワードには「CSS」や「html」、「javascript」などと記載して使っています。
届いたメールのサンプルはこんな感じ↓

Googleアラートサンプル

設定には、キーワード以外に配信頻度が設定でき、「1日1回、その都度、1週間に1回」が選べます。
また、収集元をニュースやウェブ、グループとカテゴリを選択。(総合もある)
収集元で配信された記事から、設定したキーワードに関連する記事を届けてくれる、というものです。

RSSより設定が簡単で、なにより自分が購読していないRSSなどの情報を届けてくれるため、RSSと合わせて使うとより情報収集力がアップすること間違いなしです!

1