タグ

ブックマーク / jmblog.jp (5)

  • jmblog.jp - preventDefault() と stopPropagation()

    先日公開した「投稿スラッグ(Post slug)が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。(間違いがあれば是非ご指摘ください!) やりたかったこと WordPressの投稿画面で「公開(Publish)」ボタンをクリックしたときに、「投稿スラッグ(Post slug)」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。

  • :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp

    スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか? 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効

    :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
  • jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5

    斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。

    nibushibu
    nibushibu 2008/02/28
    CSSで色を帰られるストライプ画像の作り方。なるほどこれは便利です。
  • IEで絶対配置(position:absolute)のボックスが消えるバグの検証

    先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う~ん、なぜだ・・・ 日語のリソースを調べてみても解決策

  • jmblog.jp - 角丸にチャレンジ - JavaScript編

    今回は、画像を使わずに JavaScript だけで角丸を実現させる方法を紹介します。 角丸を表示するための JavaScript ライブラリは数多く存在します。その中からいくつかピックアップしてみました。 » Nifty Corners Cube 有名な Nifty Corners の最新バージョンです。恐らく、これが角丸用ライブラリの元祖じゃないでしょうか。初めて見たときは、「こんなことが画像なしでできてしまうのかー!」とびっくりしました。まだご存じない方も、サンプルを見ればきっと驚くはず。使い方もすごくシンプルです。どういう仕組みになっているかは、最初のバージョンのページに詳しく解説があります。 » curvyCorners アンチエイリアスが売りのライブラリ。背景に画像があってもきれいに見えます。(デモ) » Mochikit Ajax なエフェクトや UI を実現させるための J

  • 1