タグ

ブックマーク / h2ham.seesaa.net (8)

  • jQueryを使ってHTMLのhead内にアクセス:実験メモ

    jQueryを使うと、HTML内のいろいろなタグにアクセスできて、 簡単にそれらを操作することができる。 けど、head内って操作することできるのかな? 一応htmlだしできるよね?なんて疑問に思ったので、 とりあえず試してみた。 いろいろなスクリプトを試してみる 試してみたスクリプトと、 それぞれの結果をプレビューしておきます。 尚、プレビューは、それぞれの中身をtext表示しています。 ■ document.domain

    jQueryを使ってHTMLのhead内にアクセス:実験メモ
  • CSS3のtransitionプロパティでアニメーションを試してみた

    このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。 今回はその中でもtransitionを使ってアニメーションをみてみようと思います。 webkitとOpera、Firefox4で動作 2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します(IE未確認)。ただし、それぞれのブラウザでベンダープレフィックス(接頭語)がないと動作しません。 まずはデモを まずは簡単に、ブロックが大きくなるデモから。 ■CSS .demo div{ background-color:#0000ff; width:100px; height:100px; color:#ffffff; /*以下アニメーションの設定(○○は

    CSS3のtransitionプロパティでアニメーションを試してみた
  • 親要素のみ削除する方法[jQuery1.4系版]

    結構前のエントリーで『jQueryメモ:親要素だけ消すってどうやるんだろう?』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。 今回の各でもについて 今回のデモは下記のHTMLをそれぞれ利用します。 利用するHTML <a href="#damy"><span>サンプルデモ</span></a> デモ5だけは子要素にSPANがないものを利用しています。 このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。 プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます(spanを子要素に持たないデモはこのイベントは付けていません。) 子要素(SPAN要素へのイベント) $('span','.pr

    親要素のみ削除する方法[jQuery1.4系版]
  • jQuery1.4の追加機能や変更された点など その1

    jQuery1.4のリリース前より、いろいろ紹介するとか言って起きながら結局紹介できなかったダメ男です。ちょっと奮起してちょっとずつでもご紹介していくぞ! ということで、いくつかの機能を自分なりに紹介 今回は.first() と .last()、あとはそれに関するものと、.nextUntil() と .prevUntil()、あと.parentsUntil()の5つを書いておきます。 1、.first() / .last() セレクタのフィルタリングメソッドでの追加で、要素の最初と最後を返します。 //最初の要素 $('li','#demo1 ul').first().append(' First!'); //最後の要素 $('li','#demo1 ul').last().append(' Last!'); .first() / .last() DEMO このメソッドは、次に紹介するメソ

    jQuery1.4の追加機能や変更された点など その1
  • フォントサイズを変える「大・中・小」ボタンを実装する方法

    知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し

    フォントサイズを変える「大・中・小」ボタンを実装する方法
  • Firebugの使い方2 THE HAM MEDIA

    以前に『意外と知られていない機能が多い!?Firebugの使い方』というエントリーを書いたところ、気づけばビックリなブクマ数がついたりする。 Firebugってかなりのコーダー(デザイナー)とか、Webに関わる人の多くはいれているアドオンのハズ(未調査なので自分の気持です)だけど、SaCSS参加者では使っていないって人が意外にもいたので書いたエントリーでした。そのブクマしている人の数やコメントをみると、やっぱりみんながみんな、使い切れているものでないですよね。 ということで、前回は紹介しきれなかったけど、こんな使い方してるよ~という自分の使い方を紹介します! 不必要な要素は消してしまおう 前回のおさらいっぽい部分から。 いろいろなサイトをみてまわっていると、時々、「これ邪魔だな」とか思う要素がポッとでてきたりってしませんか?大きいモニタの時はそんなこと特に思わないのですが、小さいモニタを使

    Firebugの使い方2 THE HAM MEDIA
  • Firebugを活用しよう!jQueryの動作チェックに最適な『FireQuery』

    皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います! しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか? 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います!個人的にかなり便利だと思います。 FireQueryとは? FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ

    Firebugを活用しよう!jQueryの動作チェックに最適な『FireQuery』
  • 【TB企画】これまでに使った便利なjQueryプラグイン

    これまでに使った20のjQueryプラグイン :: 5509 5509のnoriさんとチャットで会話しているときに nori: みんなでよく使うプラグインをまとめる、とかは? nori: ↑それぞれがまとめる nori: 意外と知らないやつとかあったりするかも hiromu45: 皆さんはどうですかー?大募集! hiromu45: みたいなのやりますか。 なんて話題になったので、TB(トラックバック)企画にしちゃいます! 自分の普段使うプラグインやこれは便利だ!なんてプラグインを書いてエントリーに書いて、トラックバックしてください! 便利なプラグインのまとめ サイトの制作時に使ったプラグインや、これは便利だ!と思っていたプラグインをまとめてみました。今だったら自分で書くかなっていうプラグインも含めてまとめてあります。 jQuery Opacity Rollover http://h2ham

    【TB企画】これまでに使った便利なjQueryプラグイン
  • 1