Web Tips：効果
CSS3 animationプロパティでアニメーションを実装する
CSS3のanimationプロパティは、transitionプロパティに比べて複雑なアニメーションを実装するのに適しています。リピート再生や、キーフレームを定義することによりアニメーション中の動作を細かく設定することが可能です。
CSS3 transitionプロパティでアニメーションを実装する
CSS3のtransitionプロパティは、要素に設定したCSSプロパティが古い状態から新しい状態へ変化する際の動作を規定します。変化にかかる時間や途中段階での速度を指定することにより、アニメーション効果を実現します。
CSS3の変形機能「transformプロパティ」の使い方
CSS3では要素の変形処理を行う「transformプロパティ」が追加されました。処理方法としては、拡大縮小、回転、移動、ゆがみの４つです。イベント発生時やアニメーションの中でこのプロパティを使うと、動きのある効果的なWebページを作成できます。
CSSだけで背景パターンを作成する
CSS3で追加された線形グラデーション「linear-gradient」と円形グラデーション「radial-gradient」を使用すれば、さまざまなパターンを表現することが可能です。
これに background-sizeプロパティを組み合わせれば、CSSだけで背景画像を作成することができます。
CSS3 線形グラデーションの記述方法
CSS3ではグラデーションがサポートされましたが、これまでブラウザごとに多くの書式を併記する必要がありました。特によく使う線形グラデーションについて、現状どのように記述すればよいのかまとめてみます。
入力フォームのテキストガイドをjQueryで実装する
問い合わせメールなどの入力フォームのガイドとして、テキストボックスに薄いグレーの文字を表示させておくことがあります。HTML5でも実装できますが、jQueryプラグインを使った方法を解説します。
入力ボックスの初期値として薄いグレーの文字を表示する
入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。
jQueryで開閉式FAQを実装する
質問の文章をクリックしたら、回答の文章が開きその下に表示されるWebページがあります。
それだと不必要な質問の回答は折りたたまれているためスペースの節約になります。
そのような開閉式のFAQをjQueryで実装する方法を解説します。
JavaScriptでスムーズスクロールを実装する
ページ内リンクでページトップに戻る時に、スクロールがなめらかだとユーザーが違うページにジャンプしたと勘違いしなくてすみます。
このスムーズスクロールをJavaScriptで実装する方法を紹介します。
box-shadowプロパティを使って複数の境界線を設定する
境界線をCSSで設定するには、borderプロパティを使う方法があります。CSS3にはボーダーラインに影をつけるbox-shadowというプロパティがありますが、この影は何重にも設定することができます。つまり、box-shadowを使えば二重にも、三重にも境界線をつけることができます。
マウスオーバーした時、CSS3で画像を半透明にする方法
画像の上にマウスカーソルをのせた時に、リンクを示すため半透明にすることがあります。
マウスオーバー用の別画像を用意しなくても、img要素にCSS3のopacityプロパティを指定することで半透明は実現できます。
表示する画像や文字の切り替えをdisplay/visibilityプロパティで行う
PCサイトとスマホサイトでは画面サイズが違いますので、表示する画像や文字を切替えたいことがあります。この方法ではCSSプロパティの設定を変えるだけで、非常に簡単に切り替えができます。
aタグにonclick属性を付けた時のイベント内処理のキャンセル
aタグにonclick属性をつけて、クリックした時にJavaScriptの関数を実行するようにした場合、関数実行後にhref属性の値を参照しようとします。
これをキャンセルするには以下のようにfalseを戻り値となるように記述します。
