JavaScript

Advertisements
IT

jQueryでアニメーションの動きを途中でキャンセルする方法/stopメソッドの使い方

jQueryのanimateメソッドは一度全て実行しないと次の動作に移れないという性質を持ちますが、これをキャンセルしてすかさず次の動作に移れるようにしたのがstopメソッドです。
IT

jQueryでボタンを押すと目的の場所までスライドするリンクナビ(目次)を作る方法/offsetメソッドの使い方

目的の場所にリンクさせたいだけなら、要素にIDを付けておき、リンク先にID名を指定するだけで事足ります。しかしアニメーションしながらとなると、jQueryで「要素の高さ」を取得する必要が出てきます。
IT

CSSで要素を斜体にする、傾斜させる方法/transform:skewプロパティの使い方

文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。
IT

CSSで要素を上下左右にアニメーション付きで動かす方法/transform:translateの使い方

CSSで要素を「ズラす」には、paddingやmarginで要素との距離を取るという方法がまずあります。しかしこれだと他の要素に対しても影響を及ぼしますし、レイアウト崩れを起こす可能性もあります。そういう心配がないのがtransform:t...
IT

CSSで要素を傾ける、回転させる方法/transform:rotateの使い方

transform:rotateはtransformプロパティの一種で、値の「角度」を指定することが可能です。
IT

CSSで要素の縮尺を変更する方法/transform:scaleプロパティの使い方

transformプロパティはCSS3から追加された新しいプロパティで、transform:scaleはその中でも要素の「伸縮」を担当しています。width・heightと似てますが、ちょっと使い方がちがいます。
IT

cssで画面の右下に「トップへ戻る」ボタンや画像を固定する方法/position:fixedの使い方

position:fixedの使い方はわかった。ヘッダーを上に固定することもできるし、top:0、left:0で左上に固定することもできる。しかし右下によくある「トップへ戻る」ボタン、レスポンシブで画像のサイズに依存せず常に右下にあるあ...
IT

jQueryでマウスカーソルが乗ってる間だけボタンの見た目を変える方法/hoverイベントの使い方

CSSなどと同じようにhoverイベントでマウスが乗っている間の挙動を決めますが、jQueryの場合はセットで「カーソルが外れたとき」も一緒に記述することができます。CSS側で:hoverで指定するほうがシンプルかつ速いので、必然性がなけれ...
IT

jQueryでセレクタがクラスを持つ・持たないで条件分岐する方法/hasClassメソッドの使い方

jQueryでCSSを直接いじることもできますが、ある程度まとめて見た目を変更したい場合にはやはりクラスなどの付け替えが簡単です。「特定のクラスがセレクタに付いているかどうか」を判別できるhasClassメソッドを使えば、クリックするたびに...
IT

jQueryで要素をアニメーションさせながら表示する方法/show、fadeIn、slideDownメソッドの使い方

jQueryで要素を表示するだけであればshowメソッドだけで事足りますが、アニメーションしながら表示するということだと、いくつか種類があります。