『jQueryでマウスオーバーでスライドアニメーションさせる(解説付き)』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ jQueryとCSSを使ってマウスオーバーでメニューが スライドするアニメーションさせるサンプルが紹介 されていたのでメモ 動きもクールでいい感じなので使えそうですね。 Animated Navigation with CSS & jQuery このテクニックを使えば、サイトのナビゲーション以外にも 使えそうです！ 今まではメモだけだったけど今後は、スキルアップ のために解析していきたいと思います 既にコメントが入っているので分かりやすかったです。 間違っていたら教えてください HTML<ul id="topnav"> <li><a href="#">
CSS3 の Transition を JavaScript と連携させるときのメモ - 8th713 Log
はじめに今回は Google Chrome と Safari に限った話。他のブラウザはしりません。検証に使ったバージョンは win 版の Google Chrome 6.0.495.0(Official Build 56152) devSafari 5.0.1(7533.17.8)です。また CSS のプロパティに関してはベンダープレフィックスは記事上では省いていますが実際のCSSではちゃんとプレフィックス付きで書いています。 サンプルTransition and webkitTransitionEnd Event - jsdo.it - share JavaScript, HTML5 and CSS hover 擬似要素や JavaScript からのインラインスタイル変化などが起きたときその変化をアニメーションで表現する仕組みです。 サンプルコードではクリックしたときクラスを付けたり
今日から使えるCSS3 アニメーション その1 « SMART LAB
スマートフォン,smart phone,Windows7,iPhone,Android,iPadPCサイトの場合、ブラウザごとの実装がまちまちでまだなかなか使えないCSS3ですが、 webkitベースのデフォルトブラウザが載っているiPhone, Android向けサイトならいけるはず！ もっと積極的に使っていかないと！ ということで、CSS3のアニメーションやってみました。 CSS3アニメーションのサンプル ※PCから閲覧の場合、safari, chromeのみ動作します。 びょいんびょいん動いてます。でも残念ながらナビゲーションとしては失格です。 まあ、今回は動かすこと自体が目的なので大目に見てください。 アニメーション部分のCSSは以下の通りです。 @-webkit-keyframes animate1 { 0% { opacity: 0; -webkit-trans
jQuery+css3のanimationでフワっとボックスを出す - jsdo.it - Share JavaScript, HTML5 and CSS
$('body').append(popbox($('#form1>input').val())); $('#form1').submit(function(e){ $('body').toggleClass('pop').find('div').addClass('popbox').removeClass('close'); e.preventDefault() }) $('#form2').live('submit',function(e){ e.preventDefault() $('body .popbox').removeClass('popbox') $('body').removeClass() }) function popbox(val){ html = '<div><p><strong>'+val+'</strong></p><br><form id="form2"><
サンプルで学ぶjQuery：(X)HTML/CSSを操作する (6/7)
10．CSSの制御 jQueryでは、CSSのプロパティの設定や値の取得も簡単にできます。 ■CSSの設定 css() を使うと、指定した要素のCSSのプロパティを設定できます。プロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述します。 ▼サンプルコード（スクリプト部分） $("p").css("color","red"); このサンプルを実行すると、p要素のCSSのcolorプロパティがredに変更され、p要素のテキストが赤色で表示されます。 ▼サンプルコード（元の(X)HTML部分） <p>テキストテキストテキストテキストテキスト</p> ▼実行結果（実際のWebページ） 複数のCSSプロパティを同時に設定したい場合は、css() の括弧内に {...} で以下のように記述します。 $(セレクター).css({ プロパティ名 : "プロパティの値" , プロパティ名 : "
css(properties) - jQuery 日本語リファレンス
キーと値がセットになったハッシュを渡すことで、全ての要素のstyle属性を設定します。 全ての要素に同じスタイルをセットしたい場合に便利です。 <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> $("p").hover(function () { $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" }); }, function () { var cssObj = { backgroundColor: "#ddd", fontWeight: "", color: "rgb(0,40,244)" } $(this).css(cssObj); });
iPhone向けサイトを考える
2011年10月22日 時間管理アプリ"Yomo"を作りました。無料です。 iPhoneアプリを作ったので紹介します。 Developer登録をして3年、初めて自分名義でアプリを登録しました。 時間管理アプリ Yomo : ある行動の始めた時間と終わった時間を記録するアプリ。 タイムロガーとか呼ばれていて、AppStoreにもすでに似たようなものがいくつかあります。 モチベーションを保つには記録するのがいい : これ、時間に限った話ではないんですが、何かを続けようと思う時、その努力を記録すると楽に続けられることがあります。 僕はコードを書いて保存する時、自動でその時点の行数 その日書いた行数をSQLiteに保存しつつGrowlに投げるようにしています。 これを元に行数の変化のグラフを都度 画像として出力して、GeekToolでデスクトップに表示させる。 こんな簡単な仕組みで、やる気がでるん
Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって？ちょっとした補足】
今さら聞けないjQuery実行パターンまとめ :: 5509(+1) noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){～});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。 十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー 慣習的に書く理由 この「$(document).ready(function(){～});>」や「$(function(){～});」はjQueryのスクリプトを書くときの最初に、慣習的に書くもので、「おまじない」とか「とりあえず書いておけ！」なんて言われて、何となく書き入
CSSを使った画像プリロード | なつみかん。
CSSを使った画像プリロード 2006.04.24 Monday A Simple CSS Image preloading technique(Specere Blogs)より転載。 説明は不要だと思います。 CSS #preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); } HTML <div id="preloadedImages"
window.onloadでは遅い - ひらい ぶらり Hi-Library
jQueryに慣れると、prototypeよか便利な気がしますね。 最新版のprototypeはjQueryにある機能を大体備えてますが、調べていると先に実装いているのはjQueryの方が早いということを書いてある記事をちらほら目にします。 jQueryの場合は$()で指定できるものがidだけじゃなく、クラスだろうがタグだろうが何でもぶち込めます。 記述の仕方もCSSに書くのと同じで id="hoge" => $("#hoge") class="hoge" => $(".hoge") <div> => $("div") 見たいな感じですね。 複数のオブジェクトを指す場合($(".hoge")とか)は $(".hoge").css("height","10px"); とか書くとclass="hoge"を持つオブジェクトすべてのheightプロパティの値が10pxになりますね。 prototy
nondelion.com - 続・swfobject で flash を Window 内に全画面表示
swfobject で flash を Window 内に全画面表示では、swfobject（v2.0 のオプション2 または v1.5）と FitFlash（2.4） またはスタイルシートを使って全画面表示をしていました。その後でもう少し詳しく調べてみた結果、実は特定の公開識別子のみ全画面表示可能であったり、縦スクロールバーが出てしまうことが分かりました。 公開識別子によって縦スクロールバーが出てしまうブラウザがある 前回のサンプルコードは、公開識別子を全て XML 宣言付きの XHTML1.0 Transitional にしていたため、IE6, 7 以外では全画面表示されていました。そこで、15種類の公開識別子に変えて各ブラウザで表示テストを行った結果、以下の表（リンク先）のようになりました。 ※Win環境（IE6, IE7, Firefox2.0.0.11, Opera9, Oper
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
