jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法
書き方の例 $('読み込ませたい場所').load('読み込ませたいファイル idなどの箇所の指定'); ファイル全体を読み込ませたい場合は”idなどの箇所の指定”はなくて大丈夫です。こちらの方法だと、 記述方法がシンプルでわかりやすい 一気に特定の箇所まで指定できる というのが良い点かなと思います。 jQuery辞書：load .load() | jQuery API Documentation 書き方の例 $.ajax({ type: 'GET', url: '読み込ませたいファイル', dataType: 'html', success: function(data) { $('読み込ませたい場所').html($(data).find('idなどの箇所の指定')); } }); こちらはパッと見た感じ複雑になりました。その分エラーの時の処理などの様々なプロパティが設定出来ます。 j
レスポンシブデザインにするための基本的な方法｜WEB Drawer
スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 @import url("mini.css") screen and (幅の指定) インラインの記述法 @media screen and (幅の指定) { ～ここに記述～ } 個人的には同じファイルで見れたほうが嬉しいので、インラインを使っています。自分が管理しやすい方でよいかと思います。 幅の指定 上記のコードの「幅の指定」部分に適用したい幅を入れてスタイルを調整していきます。 この「幅の指定
jQueryでtransformをアニメーションさせるプラグイン「Transit」
jQueryのanimateではアニメーションしながらtransoformさせることが出来ないようです。 それを可能にするのが今回ご紹介するこちらの「Transit」になります。 transformがjQueryで動かせる 基本的には以前ご紹介した、transformの動作がjQueryで可能になるプラグインです。 要素を変化させる、CSS3「transform」のおさらい｜WEB Drawer 3Dアニメーションもできて、従来のanimateのeasingなども実装できます。他にもtransform以外のmarginなどもアニメーションさせることができます。 サンプルページ いろいろな動きができる 他にも様々な使い方が配布サイトに載っていますので御覧ください。 Transit – CSS transitions and transformations for jQuery 対応ブラウザ
jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
Sublime Text 2の設定をDropboxで共有して便利にする
前回は初期の設定とプラグインのインストールと削除をやりました。 今回は、Dropboxを使って家のマシンでも会社のマシンでも設定を共有出来るようにしたいと思います。 設定の共有 別のマシンでも製作する人は設定が同じ方が便利ですよね。でもわざわざ設定をまるまる移すのは大変だったりします。移し忘れることもありますし。 というわけで、このSublime Text 2を使うときに設定が簡単に共有できないか調べたのですが、 Dropboxで設定ファイルを共有し、別のマシンでも同じ設定を共有できる方法を見つけました。 共有するフォルダ 共有するフォルダは以下の3つ。 Installed Packages Packages Pristine Packages フォルダの場所は「C:\Users\hogehoge\AppData\Roaming\Sublime Text 2」 MacかWindowsか。ま
要素を変化させる、CSS3「transform」のおさらい
今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();（角度の変更） #img01 img { animation: animat
途中からスクロールについてくる
スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。 慣性スクロール 横スクロール（ナビゲーション付き） iOS見たいなスクロールバーと慣性スクロールができるプラグインNiceScroll スクロールに遅れてついてくるコンテンツ 途中からスクロールについてくる 慣性スクロール こちらは以下のサイトに実装方法が書いてありましたので、そちらをそのままご紹介です。 jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel 参考JSソース <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
